4
0
forked from crowetic/commerce
This commit is contained in:
Luis Alvarez 2020-10-14 17:54:13 -05:00
commit b86ab71cef
14 changed files with 155 additions and 40 deletions

View File

@ -5,11 +5,24 @@
--bg-primary-hover: rgba(0, 0, 0, 0.075); --bg-primary-hover: rgba(0, 0, 0, 0.075);
--bg-primary-accent: #f1f3f5; --bg-primary-accent: #f1f3f5;
--bg-secondary: black; --bg-secondary: black;
--text-primary: black; --text-primary: black;
--text-secondary: white; --text-secondary: white;
--text-default: #252f3f; --text-default: #252f3f;
--cyan: #50e3c2;
--purple: #f81ce5;
--foreground: #000;
--background: #fff;
--selection: var(--cyan);
--accents-1: #fafafa;
--accents-2: #eaeaea;
--accents-3: #999999;
--accents-4: #888888;
--accents-5: #666666;
--accents-6: #444444;
--accents-7: #333333;
--accents-8: #111111;
} }
[data-theme='dark'] { [data-theme='dark'] {
@ -17,11 +30,21 @@
--bg-secondary: white; --bg-secondary: white;
--bg-primary-hover: rgba(255, 255, 255, 0.075); --bg-primary-hover: rgba(255, 255, 255, 0.075);
--bg-primary-accent: #111; --bg-primary-accent: #111;
--text-primary: white; --text-primary: white;
--text-secondary: black; --text-secondary: black;
--text-default: white; --text-default: white;
--foreground: #fff;
--background: #000;
--selection: var(--purple);
--accents-8: #fafafa;
--accents-7: #eaeaea;
--accents-6: #999999;
--accents-5: #888888;
--accents-4: #666666;
--accents-3: #444444;
--accents-2: #333333;
--accents-1: #111111;
} }
.fit { .fit {

View File

@ -7,3 +7,11 @@
.quantity::-webkit-inner-spin-button { .quantity::-webkit-inner-spin-button {
@apply appearance-none m-0; @apply appearance-none m-0;
} }
.productImage {
position: absolute;
top: 0;
left: -10px;
top: 15px;
transform: scale(1.9);
}

View File

@ -3,7 +3,7 @@ import usePrice from '@lib/bigcommerce/use-price'
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item' import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item' import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
import { ChangeEvent, useEffect, useState } from 'react' import { ChangeEvent, useEffect, useState } from 'react'
import styles from './CartItem.module.css' import s from './CartItem.module.css'
const CartItem = ({ const CartItem = ({
item, item,
@ -53,9 +53,13 @@ const CartItem = ({
} }
}, [item.quantity]) }, [item.quantity])
console.log(item)
return ( return (
<li className="flex flex-row space-x-6 py-6"> <li className="flex flex-row space-x-8 py-6">
<div className="h-12 w-12 bg-violet"></div> <div className="w-12 h-12 bg-violet relative overflow-hidden">
<img className={s.productImage} src={item.image_url} />
</div>
<div className="flex-1 flex flex-col justify-between text-primary"> <div className="flex-1 flex flex-col justify-between text-primary">
<span className="font-bold mb-3">{item.name}</span> <span className="font-bold mb-3">{item.name}</span>
<div className="flex items-center"> <div className="flex items-center">
@ -66,7 +70,7 @@ const CartItem = ({
type="number" type="number"
max={99} max={99}
min={0} min={0}
className={styles.quantity} className={s.quantity}
value={quantity} value={quantity}
onChange={handleQuantity} onChange={handleQuantity}
onBlur={handleBlur} onBlur={handleBlur}

View File

@ -61,13 +61,16 @@ const CartSidebarView: FC = () => {
</header> </header>
{isEmpty ? ( {isEmpty ? (
<div className="flex-1 px-4 flex flex-col justify-center items-center"> <div className="flex-1 px-4 flex flex-col justify-center items-center ">
<span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16"> <span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16 bg-black p-12 rounded-lg text-white">
<Bag /> <Bag className="absolute" />
</span> </span>
<h2 className="pt-6 text-xl font-light text-center"> <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your cart is empty. Your cart is empty
</h2> </h2>
<p className="text-accents-3 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
</div> </div>
) : error ? ( ) : error ? (
<div className="flex-1 px-4 flex flex-col justify-center items-center"> <div className="flex-1 px-4 flex flex-col justify-center items-center">

View File

@ -8,7 +8,7 @@ interface Props {
} }
function getRandomPairOfColors() { function getRandomPairOfColors() {
const colors = ['#f33', '#7928ca', '#50e3c2', '#7928ca', '#7928CA'] const colors = ['#37B679', '#DA3C3C', '#3291FF', '#7928CA', '#79FFE1']
const getRandomIdx = () => random(0, colors.length - 1) const getRandomIdx = () => random(0, colors.length - 1)
let idx = getRandomIdx() let idx = getRandomIdx()
let idx2 = getRandomIdx() let idx2 = getRandomIdx()
@ -27,7 +27,7 @@ const Avatar: FC<Props> = ({}) => {
return ( return (
<div <div
className="inline-block h-8 w-8 rounded-full border border-accent-8" className="inline-block h-8 w-8 rounded-full border-2 border-accents-2"
style={{ style={{
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`, backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
}} }}

View File

@ -1,5 +1,5 @@
.input { .input {
@apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg placeholder-accent-4 pr-10; @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg placeholder-accents-4 pr-10;
min-width: 300px; min-width: 300px;
} }

View File

@ -4,7 +4,7 @@ import { FC, useState } from 'react'
import s from './ProductView.module.css' import s from './ProductView.module.css'
import { Colors } from '@components/ui/types' import { Colors } from '@components/ui/types'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import { Button, Container } from '@components/ui' import { Button, Container, LoadingDots } from '@components/ui'
import { Swatch, ProductSlider } from '@components/product' import { Swatch, ProductSlider } from '@components/product'
import useAddItem from '@lib/bigcommerce/cart/use-add-item' import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import type { Product } from '@lib/bigcommerce/api/operations/get-product' import type { Product } from '@lib/bigcommerce/api/operations/get-product'
@ -25,18 +25,28 @@ const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
const ProductView: FC<Props> = ({ product, className }) => { const ProductView: FC<Props> = ({ product, className }) => {
const addItem = useAddItem() const addItem = useAddItem()
const { openSidebar } = useUI() const { openSidebar } = useUI()
const [choices, setChoices] = useState<Choices>({ const [choices, setChoices] = useState<Choices>({
size: null, size: null,
color: null, color: null,
}) })
const [loading, setLoading] = useState(false)
const addToCart = async () => { const addToCart = async () => {
// TODO: loading state by awating the promise setLoading(true)
await addItem({
productId: product.entityId, try {
variantId: product.variants.edges?.[0]?.node.entityId!, await addItem({
}) productId: product.entityId,
openSidebar() variantId: product.variants.edges?.[0]?.node.entityId!,
})
openSidebar()
setLoading(false)
} catch (err) {
// Error err.
setLoading(false)
}
} }
const activeSize = choices.size const activeSize = choices.size
@ -75,11 +85,16 @@ const ProductView: FC<Props> = ({ product, className }) => {
<div className="flex-1 px-24 pb-0 relative fit box-border"> <div className="flex-1 px-24 pb-0 relative fit box-border">
<div className="absolute z-10 inset-0 flex items-center justify-center"> <div className="absolute z-10 inset-0 flex items-center justify-center">
<ProductSlider> <ProductSlider>
{product.images.edges?.map((image) => ( {product.images.edges?.map((image, i) => (
<img className="w-full object-cover" src={image?.node.urlXL} /> <img
className="w-full object-cover"
src={image?.node.urlXL}
loading={i === 0 ? 'eager' : 'lazy'}
/>
))} ))}
</ProductSlider> </ProductSlider>
</div> </div>
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block"> <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
<img src="/slider-arrows.png" /> <img src="/slider-arrows.png" />
</div> </div>
@ -128,7 +143,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
/> />
</section> </section>
<section className=""> <section className="">
<Button type="button" className={s.button} onClick={addToCart}> <Button
type="button"
className={s.button}
onClick={addToCart}
loading={loading}
>
Add to Cart Add to Cart
</Button> </Button>
</section> </section>

View File

@ -2,7 +2,7 @@
@apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6 @apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6
bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
text-center justify-center uppercase py-4 uppercase text-center focus:outline-none text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
border border-transparent; border border-transparent items-center;
} }
.root:hover { .root:hover {
@ -17,6 +17,6 @@
@apply bg-gray-600; @apply bg-gray-600;
} }
s.filled { .loading {
@apply text-white bg-black; @apply bg-accents-1 text-accents-3 border-accents-2 cursor-not-allowed;
} }

View File

@ -8,7 +8,7 @@ import React, {
import mergeRefs from 'react-merge-refs' import mergeRefs from 'react-merge-refs'
import { useButton } from 'react-aria' import { useButton } from 'react-aria'
import s from './Button.module.css' import s from './Button.module.css'
import { LoadingDots } from '@components/ui'
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
href?: string href?: string
className?: string className?: string
@ -17,6 +17,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
type?: 'submit' | 'reset' | 'button' type?: 'submit' | 'reset' | 'button'
Component?: string | JSXElementConstructor<any> Component?: string | JSXElementConstructor<any>
width?: string | number width?: string | number
loading?: boolean
} }
const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => { const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
@ -30,6 +31,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
disabled, disabled,
width, width,
Component = 'button', Component = 'button',
loading = false,
...rest ...rest
} = props } = props
const ref = useRef<typeof Component>(null) const ref = useRef<typeof Component>(null)
@ -47,7 +49,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
const rootClassName = cn( const rootClassName = cn(
s.root, s.root,
{ {
[s.filled]: variant === 'filled', [s.loading]: loading,
}, },
className className
) )
@ -66,6 +68,11 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
data-active={isPressed ? '' : undefined} data-active={isPressed ? '' : undefined}
> >
{children} {children}
{loading && (
<i className="pl-2 m-0 flex">
<LoadingDots />
</i>
)}
</Component> </Component>
) )
}) })

View File

@ -0,0 +1,32 @@
@keyframes blink {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.loading {
@apply inline-flex text-center items-center leading-7;
& span {
@apply bg-accents-6 rounded-full h-2 w-2;
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
margin: 0 2px;
&:nth-of-type(2) {
animation-delay: 0.2s;
}
&:nth-of-type(3) {
animation-delay: 0.4s;
}
}
}

View File

@ -0,0 +1,13 @@
import s from './LoadingDots.module.css'
const LoadingDots: React.FC = () => {
return (
<span className={s.loading}>
<span />
<span />
<span />
</span>
)
}
export default LoadingDots

View File

@ -0,0 +1 @@
export { default } from './LoadingDots'

View File

@ -1,7 +1,8 @@
export { default as Button } from './Button' export { default as Hero } from './Hero'
export { default as Container } from './Container'
export { default as Sidebar } from './Sidebar'
export { default as Logo } from './Logo' export { default as Logo } from './Logo'
export { default as Grid } from './Grid' export { default as Grid } from './Grid'
export { default as Button } from './Button'
export { default as Sidebar } from './Sidebar'
export { default as Marquee } from './Marquee' export { default as Marquee } from './Marquee'
export { default as Hero } from './Hero' export { default as Container } from './Container'
export { default as LoadingDots } from './LoadingDots'

View File

@ -14,11 +14,14 @@ module.exports = {
075: '0.75', 075: '0.75',
}, },
colors: { colors: {
'accent-1': '#FAFAFA', 'accents-1': 'var(--accents-1)',
'accent-2': '#F1F3F5', 'accents-2': 'var(--accents-2)',
'accent-4': '#888', 'accents-3': 'var(--accents-3)',
'accent-6': '#E5E5E5', 'accents-4': 'var(--accents-4)',
'accent-8': '#111111', 'accents-5': 'var(--accents-5)',
'accents-6': 'var(--accents-6)',
'accents-7': 'var(--accents-7)',
'accents-8': 'var(--accents-8)',
violet: '#7928CA', violet: '#7928CA',
pink: '#FF0080', pink: '#FF0080',
cyan: '#50E3C2', cyan: '#50E3C2',