Merge branch 'master' of https://github.com/okbel/e-comm-example

assets/global.css

@@ -5,11 +5,24 @@
   --bg-primary-hover: rgba(0, 0, 0, 0.075);
   --bg-primary-accent: #f1f3f5;
   --bg-secondary: black;
-
   --text-primary: black;
   --text-secondary: white;
-
   --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'] {
@@ -17,11 +30,21 @@
   --bg-secondary: white;
   --bg-primary-hover: rgba(255, 255, 255, 0.075);
   --bg-primary-accent: #111;
-
   --text-primary: white;
   --text-secondary: black;
-
   --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 {

components/cart/CartItem/CartItem.module.css

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

components/cart/CartItem/CartItem.tsx

@@ -3,7 +3,7 @@ import usePrice from '@lib/bigcommerce/use-price'
 import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
 import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
 import { ChangeEvent, useEffect, useState } from 'react'
-import styles from './CartItem.module.css'
+import s from './CartItem.module.css'
 
 const CartItem = ({
   item,
@@ -53,9 +53,13 @@ const CartItem = ({
     }
   }, [item.quantity])
 
+  console.log(item)
+
   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">
         <span className="font-bold mb-3">{item.name}</span>
         <div className="flex items-center">
@@ -66,7 +70,7 @@ const CartItem = ({
             type="number"
             max={99}
             min={0}
-            className={styles.quantity}
+            className={s.quantity}
             value={quantity}
             onChange={handleQuantity}
             onBlur={handleBlur}

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -61,13 +61,16 @@ const CartSidebarView: FC = () => {
       </header>
 
       {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>
-          <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>
+          <p className="text-accents-3 px-10 text-center pt-2">
+            Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
+          </p>
         </div>
       ) : error ? (
         <div className="flex-1 px-4 flex flex-col justify-center items-center">

components/core/Avatar/Avatar.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 function getRandomPairOfColors() {
-  const colors = ['#f33', '#7928ca', '#50e3c2', '#7928ca', '#7928CA']
+  const colors = ['#37B679', '#DA3C3C', '#3291FF', '#7928CA', '#79FFE1']
   const getRandomIdx = () => random(0, colors.length - 1)
   let idx = getRandomIdx()
   let idx2 = getRandomIdx()
@@ -27,7 +27,7 @@ const Avatar: FC<Props> = ({}) => {
 
   return (
     <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={{
         backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
       }}

components/core/Searchbar/Searchbar.module.css

@@ -1,5 +1,5 @@
 .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;
 }
 

components/product/ProductView/ProductView.tsx

@@ -4,7 +4,7 @@ import { FC, useState } from 'react'
 import s from './ProductView.module.css'
 import { Colors } from '@components/ui/types'
 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 useAddItem from '@lib/bigcommerce/cart/use-add-item'
 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 addItem = useAddItem()
   const { openSidebar } = useUI()
+
   const [choices, setChoices] = useState<Choices>({
     size: null,
     color: null,
   })
 
+  const [loading, setLoading] = useState(false)
+
   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
@@ -75,11 +85,16 @@ const ProductView: FC<Props> = ({ product, className }) => {
         <div className="flex-1 px-24 pb-0 relative fit  box-border">
           <div className="absolute z-10 inset-0 flex items-center justify-center">
             <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>
           </div>
+
           <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
             <img src="/slider-arrows.png" />
           </div>
@@ -128,7 +143,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
             />
           </section>
           <section className="">
-            <Button type="button" className={s.button} onClick={addToCart}>
+            <Button
+              type="button"
+              className={s.button}
+              onClick={addToCart}
+              loading={loading}
+            >
               Add to Cart
             </Button>
           </section>

components/ui/Button/Button.module.css

@@ -2,7 +2,7 @@
   @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
   text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
-  border border-transparent;
+  border border-transparent items-center;
 }
 
 .root:hover {
@@ -17,6 +17,6 @@
   @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;
 }

components/ui/Button/Button.tsx

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

components/ui/LoadingDots/LoadingDots.module.css

@@ -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;
+    }
+  }
+}

components/ui/LoadingDots/LoadingDots.tsx

@@ -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

components/ui/LoadingDots/index.ts

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

components/ui/index.ts

@@ -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 Grid } from './Grid'
+export { default as Button } from './Button'
+export { default as Sidebar } from './Sidebar'
 export { default as Marquee } from './Marquee'
-export { default as Hero } from './Hero'
+export { default as Container } from './Container'
+export { default as LoadingDots } from './LoadingDots'

tailwind.config.js

@@ -14,11 +14,14 @@ module.exports = {
         075: '0.75',
       },
       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',
         pink: '#FF0080',
         cyan: '#50E3C2',