Bump (#642)

* Packages Bump

* Code Updated

* More API Changes

* Working updates

* Updated Tailwind Config

* SWR API updates

* More changes

* Commercejs Types

* Commercejs Types

* Commercejs Types

components/auth/LoginView.tsx

@@ -4,9 +4,7 @@ import useLogin from '@framework/auth/use-login'
 import { useUI } from '@components/ui/context'
 import { validate } from 'email-validator'
 
-interface Props {}
-
-const LoginView: FC<Props> = () => {
+const LoginView: React.FC = () => {
   // Form State
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
@@ -35,8 +33,8 @@ const LoginView: FC<Props> = () => {
       })
       setLoading(false)
       closeModal()
-    } catch ({ errors }) {
-      setMessage(errors[0].message)
+    } catch (e: any) {
+      setMessage(e.errors[0].message)
       setLoading(false)
       setDisabled(false)
     }

components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx

@@ -15,7 +15,7 @@ import { useCheckoutContext } from '../context'
 const CheckoutSidebarView: FC = () => {
   const [loadingSubmit, setLoadingSubmit] = useState(false)
   const { setSidebarView, closeSidebar } = useUI()
-  const { data: cartData, revalidate: refreshCart } = useCart()
+  const { data: cartData, mutate: refreshCart } = useCart()
   const { data: checkoutData, submit: onCheckout } = useCheckout()
   const { clearCheckoutFields } = useCheckoutContext()
 

components/common/FeatureBar/FeatureBar.module.css

@@ -1,7 +1,6 @@
 .root {
-  @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out;
-
-  @screen md {
-    @apply flex text-left;
-  }
+  @apply text-center p-6 bg-primary text-sm flex-row 
+  justify-center items-center font-medium fixed bottom-0
+  w-full z-30 transition-all duration-300 ease-out
+  md:flex md:text-left;
 }

components/common/I18nWidget/I18nWidget.module.css

@@ -16,16 +16,6 @@
 
 .dropdownMenu {
   @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
-
-  @screen lg {
-    @apply absolute border border-accent-1 shadow-lg w-56 h-auto;
-  }
-}
-
-.closeButton {
-  @screen md {
-    @apply hidden;
-  }
 }
 
 .item {
@@ -44,3 +34,15 @@
 .icon.active {
   transform: rotate(180deg);
 }
+
+@screen lg {
+  .dropdownMenu {
+    @apply absolute border border-accent-1 shadow-lg w-56 h-auto;
+  }
+}
+
+@screen md {
+  .closeButton {
+    @apply hidden;
+  }
+}

components/common/UserNav/DropdownMenu.module.css

@@ -1,11 +1,13 @@
-.dropdownMenu {
-  @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
-
-  @screen lg {
+@screen lg {
+  .dropdownMenu {
     @apply absolute top-10 border border-accent-1 shadow-lg w-56 h-auto;
   }
 }
 
+.dropdownMenu {
+  @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
+}
+
 .link {
   @apply text-primary flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 leading-6 font-medium items-center;
   text-transform: capitalize;

components/product/Swatch/Swatch.tsx

@@ -13,52 +13,50 @@ interface SwatchProps {
   label?: string | null
 }
 
-const Swatch: React.FC<Omit<ButtonProps, 'variant'> & SwatchProps> = React.memo(
-  ({
-    active,
-    className,
-    color = '',
-    label = null,
-    variant = 'size',
-    ...props
-  }) => {
-    variant = variant?.toLowerCase()
+const Swatch: React.FC<Omit<ButtonProps, 'variant'> & SwatchProps> = ({
+  active,
+  className,
+  color = '',
+  label = null,
+  variant = 'size',
+  ...props
+}) => {
+  variant = variant?.toLowerCase()
 
-    if (label) {
-      label = label?.toLowerCase()
-    }
-
-    const swatchClassName = cn(
-      s.swatch,
-      {
-        [s.color]: color,
-        [s.active]: active,
-        [s.size]: variant === 'size',
-        [s.dark]: color ? isDark(color) : false,
-        [s.textLabel]: !color && label && label.length > 3,
-      },
-      className
-    )
-
-    return (
-      <Button
-        role="option"
-        aria-selected={active}
-        aria-label={variant && label ? `${variant} ${label}` : 'Variant Swatch'}
-        className={swatchClassName}
-        {...(label && color && { title: label })}
-        style={color ? { backgroundColor: color } : {}}
-        {...props}
-      >
-        {color && active && (
-          <span>
-            <Check />
-          </span>
-        )}
-        {!color ? label : null}
-      </Button>
-    )
+  if (label) {
+    label = label?.toLowerCase()
   }
-)
 
-export default Swatch
+  const swatchClassName = cn(
+    s.swatch,
+    {
+      [s.color]: color,
+      [s.active]: active,
+      [s.size]: variant === 'size',
+      [s.dark]: color ? isDark(color) : false,
+      [s.textLabel]: !color && label && label.length > 3,
+    },
+    className
+  )
+
+  return (
+    <Button
+      role="option"
+      aria-selected={active}
+      aria-label={variant && label ? `${variant} ${label}` : 'Variant Swatch'}
+      className={swatchClassName}
+      {...(label && color && { title: label })}
+      style={color ? { backgroundColor: color } : {}}
+      {...props}
+    >
+      {color && active && (
+        <span>
+          <Check />
+        </span>
+      )}
+      {!color ? label : null}
+    </Button>
+  )
+}
+
+export default React.memo(Swatch)

components/ui/Button/Button.tsx

@@ -21,6 +21,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean
 }
 
+// eslint-disable-next-line react/display-name
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const {
     className,

components/ui/Collapse/Collapse.tsx

@@ -10,7 +10,7 @@ export interface CollapseProps {
   children: ReactNode
 }
 
-const Collapse: FC<CollapseProps> = React.memo(({ title, children }) => {
+const Collapse: FC<CollapseProps> = ({ title, children }) => {
   const [isActive, setActive] = useState(false)
   const [ref, { height: viewHeight }] = useMeasure()
 
@@ -41,6 +41,6 @@ const Collapse: FC<CollapseProps> = React.memo(({ title, children }) => {
       </a.div>
     </div>
   )
-})
+}
 
-export default Collapse
+export default React.memo(Collapse)

components/ui/Grid/Grid.module.css

@@ -1,53 +1,25 @@
 .root {
   @apply grid grid-cols-1 gap-0;
-
-  @screen lg {
-    @apply grid-cols-3 grid-rows-2;
-  }
-
-  & > * {
-    @apply row-span-1 bg-transparent box-border overflow-hidden;
-    height: 500px;
-    max-height: 800px;
-
-    @screen lg {
-      @apply col-span-1;
-      height: inherit;
-    }
-  }
+}
+.root > * {
+  @apply row-span-1 bg-transparent box-border overflow-hidden;
+  height: 500px;
+  max-height: 800px;
 }
 
-.default {
-  & > * {
-    @apply bg-transparent;
-  }
+.default > * {
+  @apply bg-transparent;
 }
 
 .layoutNormal {
   @apply gap-3;
 }
 
-@screen md {
-  .layoutNormal > * {
-    max-height: min-content !important;
-  }
-}
-
-@screen lg {
-  .layoutNormal > * {
-    max-height: 400px;
-  }
-}
-
 .layoutA {
   & > *:nth-child(6n + 1),
   & > *:nth-child(6n + 5) {
-    @apply row-span-2;
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
   }
 
   &.filled {
@@ -72,12 +44,8 @@
 .layoutB {
   & > *:nth-child(6n + 2),
   & > *:nth-child(6n + 4) {
-    @apply row-span-2;
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
   }
 
   &.filled {
@@ -102,12 +70,8 @@
 .layoutC {
   & > *:nth-child(12n + 1),
   & > *:nth-child(12n + 8) {
-    @apply row-span-2;
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
   }
 
   &.filled {
@@ -130,12 +94,8 @@
 .layoutD {
   & > *:nth-child(12n + 2),
   & > *:nth-child(12n + 7) {
-    @apply row-span-2;
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
   }
 
   &.filled {
@@ -152,3 +112,24 @@
     }
   }
 }
+
+@screen md {
+  .layoutNormal > * {
+    max-height: min-content !important;
+  }
+}
+
+@screen lg {
+  .root {
+    @apply grid-cols-3 grid-rows-2;
+  }
+
+  .root > * {
+    @apply col-span-1;
+    height: inherit;
+  }
+
+  .layoutNormal > * {
+    max-height: 400px;
+  }
+}