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

framework/bigcommerce/auth/use-login.tsx

@@ -27,15 +27,15 @@ export const handler: MutationHook<LoginHook> = {
   useHook:
     ({ fetch }) =>
     () => {
-      const { revalidate } = useCustomer()
+      const { mutate } = useCustomer()
 
       return useCallback(
         async function login(input) {
           const data = await fetch({ input })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate]
+        [fetch, mutate]
       )
     },
 }

framework/bigcommerce/auth/use-signup.tsx

@@ -32,15 +32,15 @@ export const handler: MutationHook<SignupHook> = {
   useHook:
     ({ fetch }) =>
     () => {
-      const { revalidate } = useCustomer()
+      const { mutate } = useCustomer()
 
       return useCallback(
         async function signup(input) {
           const data = await fetch({ input })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate]
+        [fetch, mutate]
       )
     },
 }

framework/bigcommerce/wishlist/use-add-item.tsx

@@ -17,7 +17,7 @@ export const handler: MutationHook<AddItemHook> = {
     ({ fetch }) =>
     () => {
       const { data: customer } = useCustomer()
-      const { revalidate } = useWishlist()
+      const { mutate } = useWishlist()
 
       return useCallback(
         async function addItem(item) {
@@ -30,10 +30,10 @@ export const handler: MutationHook<AddItemHook> = {
 
           // TODO: add validations before doing the fetch
           const data = await fetch({ input: { item } })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate, customer]
+        [fetch, mutate, customer]
       )
     },
 }

framework/bigcommerce/wishlist/use-remove-item.tsx

@@ -19,7 +19,7 @@ export const handler: MutationHook<RemoveItemHook> = {
     ({ fetch }) =>
     ({ wishlist } = {}) => {
       const { data: customer } = useCustomer()
-      const { revalidate } = useWishlist(wishlist)
+      const { mutate } = useWishlist(wishlist)
 
       return useCallback(
         async function removeItem(input) {
@@ -31,10 +31,10 @@ export const handler: MutationHook<RemoveItemHook> = {
           }
 
           const data = await fetch({ input: { itemId: String(input.id) } })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate, customer]
+        [fetch, mutate, customer]
       )
     },
 }

framework/commerce/utils/types.ts

@@ -1,4 +1,4 @@
-import type { ConfigInterface } from 'swr'
+import type { SWRConfiguration } from 'swr'
 import type { CommerceError } from './errors'
 import type { ResponseState } from './use-data'
 
@@ -10,10 +10,9 @@ export type Override<T, K> = Omit<T, keyof K> & K
 /**
  * Returns the properties in T with the properties in type K changed from optional to required
  */
-export type PickRequired<T, K extends keyof T> = Omit<T, K> &
-  {
-    [P in K]-?: NonNullable<T[P]>
-  }
+export type PickRequired<T, K extends keyof T> = Omit<T, K> & {
+  [P in K]-?: NonNullable<T[P]>
+}
 
 /**
  * Core fetcher added by CommerceProvider
@@ -141,7 +140,7 @@ export type MutationHookContext<H extends MutationSchemaBase> = {
     : (context: { input: H['fetcherInput'] }) => H['data'] | Promise<H['data']>
 }
 
-export type SwrOptions<Data, Input = null, Result = any> = ConfigInterface<
+export type SwrOptions<Data, Input = null, Result = any> = SWRConfiguration<
   Data,
   CommerceError,
   HookFetcher<Data, Input, Result>

framework/commercejs/api/operations/get-all-products.ts

@@ -18,7 +18,7 @@ export default function getAllProductsOperation({
     })
 
     const productsFormatted =
-      data?.map((product) => normalizeProduct(product)) || []
+      data?.map((product: any) => normalizeProduct(product)) || []
 
     return {
       products: productsFormatted,

framework/commercejs/api/utils/sdk-fetch.ts

@@ -12,8 +12,10 @@ export default async function sdkFetch<
 >(
   resource: Resource,
   method: Method,
-  ...variables: Parameters<Commerce[Resource][Method]>
-): Promise<ReturnType<Commerce[Resource][Method]>> {
+  ...variables: Parameters<Commerce[Resource][Method] | any>
+): Promise<ReturnType<Commerce[Resource][Method] | any>> {
+  //@ts-ignore
+  // Provider TODO: Fix types here.
   const data = await commerce[resource][method](...variables)
   return data
 }

framework/kibocommerce/auth/use-login.tsx

@@ -11,13 +11,12 @@ export default useLogin as UseLogin<typeof handler>
 export const handler: MutationHook<LoginHook> = {
   fetchOptions: {
     url: '/api/login',
-    method: 'POST'
+    method: 'POST',
   },
   async fetcher({ input: { email, password }, options, fetch }) {
     if (!(email && password)) {
       throw new CommerceError({
-        message:
-          'An email and password are required to login',
+        message: 'An email and password are required to login',
       })
     }
 
@@ -26,17 +25,19 @@ export const handler: MutationHook<LoginHook> = {
       body: { email, password },
     })
   },
-  useHook: ({ fetch }) => () => {
-    const { revalidate } = useCustomer()
-    const {revalidate: revalidateCart} = useCart()
-    return useCallback(
-      async function login(input) {
-        const data = await fetch({ input })
-        await revalidate()
-        await revalidateCart()
-        return data
-      },
-      [fetch, revalidate, revalidateCart]
-    )
-  },
+  useHook:
+    ({ fetch }) =>
+    () => {
+      const { mutate } = useCustomer()
+      const { mutate: mutateCart } = useCart()
+      return useCallback(
+        async function login(input) {
+          const data = await fetch({ input })
+          await mutate()
+          await mutateCart()
+          return data
+        },
+        [fetch, mutate, mutateCart]
+      )
+    },
 }

framework/kibocommerce/auth/use-signup.tsx

@@ -29,16 +29,18 @@ export const handler: MutationHook<SignupHook> = {
       body: { firstName, lastName, email, password },
     })
   },
-  useHook: ({ fetch }) => () => {
-    const { revalidate } = useCustomer()
+  useHook:
+    ({ fetch }) =>
+    () => {
+      const { mutate } = useCustomer()
 
-    return useCallback(
-      async function signup(input) {
-        const data = await fetch({ input })
-        await revalidate()
-        return data
-      },
-      [fetch, revalidate]
-    )
-  },
+      return useCallback(
+        async function signup(input) {
+          const data = await fetch({ input })
+          await mutate()
+          return data
+        },
+        [fetch, mutate]
+      )
+    },
 }

framework/kibocommerce/wishlist/use-add-item.tsx

@@ -13,24 +13,26 @@ export const handler: MutationHook<AddItemHook> = {
     url: '/api/wishlist',
     method: 'POST',
   },
-  useHook: ({ fetch }) => () => {
-    const { data: customer } = useCustomer()
-    const { revalidate } = useWishlist()
+  useHook:
+    ({ fetch }) =>
+    () => {
+      const { data: customer } = useCustomer()
+      const { mutate } = useWishlist()
 
-    return useCallback(
-      async function addItem(item) {
-        if (!customer) {
-          // A signed customer is required in order to have a wishlist
-          throw new CommerceError({
-            message: 'Signed customer not found',
-          })
-        }
-        // TODO: add validations before doing the fetch
-        const data = await fetch({ input: { item } })
-        await revalidate()
-        return data
-      },
-      [fetch, revalidate, customer]
-    )
-  },
+      return useCallback(
+        async function addItem(item) {
+          if (!customer) {
+            // A signed customer is required in order to have a wishlist
+            throw new CommerceError({
+              message: 'Signed customer not found',
+            })
+          }
+          // TODO: add validations before doing the fetch
+          const data = await fetch({ input: { item } })
+          await mutate()
+          return data
+        },
+        [fetch, mutate, customer]
+      )
+    },
 }

framework/kibocommerce/wishlist/use-remove-item.tsx

@@ -15,24 +15,26 @@ export const handler: MutationHook<RemoveItemHook> = {
     url: '/api/wishlist',
     method: 'DELETE',
   },
-  useHook: ({ fetch }) => ({ wishlist } = {}) => {
-    const { data: customer } = useCustomer()
-    const { revalidate } = useWishlist(wishlist)
+  useHook:
+    ({ fetch }) =>
+    ({ wishlist } = {}) => {
+      const { data: customer } = useCustomer()
+      const { mutate } = useWishlist(wishlist)
 
-    return useCallback(
-      async function removeItem(input) {
-        if (!customer) {
-          // A signed customer is required in order to have a wishlist
-          throw new CommerceError({
-            message: 'Signed customer not found',
-          })
-        }
+      return useCallback(
+        async function removeItem(input) {
+          if (!customer) {
+            // A signed customer is required in order to have a wishlist
+            throw new CommerceError({
+              message: 'Signed customer not found',
+            })
+          }
 
-        const data = await fetch({ input: { itemId: String(input.id) } })
-        await revalidate()
-        return data
-      },
-      [fetch, revalidate, customer]
-    )
-  },
+          const data = await fetch({ input: { itemId: String(input.id) } })
+          await mutate()
+          return data
+        },
+        [fetch, mutate, customer]
+      )
+    },
 }

framework/saleor/auth/use-login.tsx

@@ -49,15 +49,15 @@ export const handler: MutationHook<LoginHook> = {
   useHook:
     ({ fetch }) =>
     () => {
-      const { revalidate } = useCustomer()
+      const { mutate } = useCustomer()
 
       return useCallback(
         async function login(input) {
           const data = await fetch({ input })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate]
+        [fetch, mutate]
       )
     },
 }

framework/saleor/auth/use-signup.tsx

@@ -42,15 +42,15 @@ export const handler: MutationHook<SignupHook> = {
   useHook:
     ({ fetch }) =>
     () => {
-      const { revalidate } = useCustomer()
+      const { mutate } = useCustomer()
 
       return useCallback(
         async function signup(input) {
           const data = await fetch({ input })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate]
+        [fetch, mutate]
       )
     },
 }

framework/shopify/auth/use-login.tsx

@@ -49,15 +49,15 @@ export const handler: MutationHook<LoginHook> = {
   useHook:
     ({ fetch }) =>
     () => {
-      const { revalidate } = useCustomer()
+      const { mutate } = useCustomer()
 
       return useCallback(
         async function login(input) {
           const data = await fetch({ input })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate]
+        [fetch, mutate]
       )
     },
 }

framework/shopify/auth/use-signup.tsx

@@ -53,15 +53,15 @@ export const handler: MutationHook<SignupHook> = {
   useHook:
     ({ fetch }) =>
     () => {
-      const { revalidate } = useCustomer()
+      const { mutate } = useCustomer()
 
       return useCallback(
         async function signup(input) {
           const data = await fetch({ input })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate]
+        [fetch, mutate]
       )
     },
 }

framework/spree/auth/use-login.tsx

@@ -60,25 +60,26 @@ export const handler: MutationHook<LoginHook> = {
     }
   },
   useHook: ({ fetch }) => {
-    const useWrappedHook: ReturnType<MutationHook<LoginHook>['useHook']> =
-      () => {
-        const customer = useCustomer()
-        const cart = useCart()
-        const wishlist = useWishlist()
+    const useWrappedHook: ReturnType<
+      MutationHook<LoginHook>['useHook']
+    > = () => {
+      const customer = useCustomer()
+      const cart = useCart()
+      const wishlist = useWishlist()
 
-        return useCallback(
-          async function login(input) {
-            const data = await fetch({ input })
+      return useCallback(
+        async function login(input) {
+          const data = await fetch({ input })
 
-            await customer.revalidate()
-            await cart.revalidate()
-            await wishlist.revalidate()
+          await customer.mutate()
+          await cart.mutate()
+          await wishlist.mutate()
 
-            return data
-          },
-          [customer, cart, wishlist]
-        )
-      }
+          return data
+        },
+        [customer, cart, wishlist]
+      )
+    }
 
     return useWrappedHook
   },

framework/spree/auth/use-signup.tsx

@@ -70,25 +70,26 @@ export const handler: MutationHook<SignupHook> = {
     return null
   },
   useHook: ({ fetch }) => {
-    const useWrappedHook: ReturnType<MutationHook<SignupHook>['useHook']> =
-      () => {
-        const customer = useCustomer()
-        const cart = useCart()
-        const wishlist = useWishlist()
+    const useWrappedHook: ReturnType<
+      MutationHook<SignupHook>['useHook']
+    > = () => {
+      const customer = useCustomer()
+      const cart = useCart()
+      const wishlist = useWishlist()
 
-        return useCallback(
-          async (input) => {
-            const data = await fetch({ input })
+      return useCallback(
+        async (input) => {
+          const data = await fetch({ input })
 
-            await customer.revalidate()
-            await cart.revalidate()
-            await wishlist.revalidate()
+          await customer.mutate()
+          await cart.mutate()
+          await wishlist.mutate()
 
-            return data
-          },
-          [customer, cart, wishlist]
-        )
-      }
+          return data
+        },
+        [customer, cart, wishlist]
+      )
+    }
 
     return useWrappedHook
   },

framework/spree/wishlist/use-add-item.tsx

@@ -55,32 +55,33 @@ export const handler: MutationHook<ExplicitWishlistAddItemHook> = {
     return null
   },
   useHook: ({ fetch }) => {
-    const useWrappedHook: ReturnType<MutationHook<AddItemHook>['useHook']> =
-      () => {
-        const wishlist = useWishlist()
+    const useWrappedHook: ReturnType<
+      MutationHook<AddItemHook>['useHook']
+    > = () => {
+      const wishlist = useWishlist()
 
-        return useCallback(
-          async (item) => {
-            if (!wishlist.data) {
-              return null
-            }
+      return useCallback(
+        async (item) => {
+          if (!wishlist.data) {
+            return null
+          }
 
-            const data = await fetch({
-              input: {
-                item: {
-                  ...item,
-                  wishlistToken: wishlist.data.token,
-                },
+          const data = await fetch({
+            input: {
+              item: {
+                ...item,
+                wishlistToken: wishlist.data.token,
               },
-            })
+            },
+          })
 
-            await wishlist.revalidate()
+          await wishlist.mutate()
 
-            return data
-          },
-          [wishlist]
-        )
-      }
+          return data
+        },
+        [wishlist]
+      )
+    }
 
     return useWrappedHook
   },

framework/spree/wishlist/use-remove-item.tsx

@@ -62,7 +62,7 @@ export const handler: MutationHook<ExplicitWishlistRemoveItemHook> = {
             },
           })
 
-          await wishlist.revalidate()
+          await wishlist.mutate()
 
           return data
         },

framework/swell/auth/use-login.tsx

@@ -62,15 +62,15 @@ export const handler: MutationHook<LoginHook> = {
   useHook:
     ({ fetch }) =>
     () => {
-      const { revalidate } = useCustomer()
+      const { mutate } = useCustomer()
 
       return useCallback(
         async function login(input) {
           const data = await fetch({ input })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate]
+        [fetch, mutate]
       )
     },
 }

framework/swell/auth/use-signup.tsx

@@ -47,15 +47,15 @@ export const handler: MutationHook<SignupHook> = {
   useHook:
     ({ fetch }) =>
     () => {
-      const { revalidate } = useCustomer()
+      const { mutate } = useCustomer()
 
       return useCallback(
         async function signup(input) {
           const data = await fetch({ input })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate]
+        [fetch, mutate]
       )
     },
 }

framework/vendure/auth/use-login.tsx

@@ -39,15 +39,15 @@ export const handler: MutationHook<LoginHook> = {
   useHook:
     ({ fetch }) =>
     () => {
-      const { revalidate } = useCustomer()
+      const { mutate } = useCustomer()
 
       return useCallback(
         async function login(input) {
           const data = await fetch({ input })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate]
+        [fetch, mutate]
       )
     },
 }

framework/vendure/auth/use-signup.tsx

@@ -57,15 +57,15 @@ export const handler: MutationHook<SignupHook> = {
   useHook:
     ({ fetch }) =>
     () => {
-      const { revalidate } = useCustomer()
+      const { mutate } = useCustomer()
 
       return useCallback(
         async function signup(input) {
           const data = await fetch({ input })
-          await revalidate()
+          await mutate()
           return data
         },
-        [fetch, revalidate]
+        [fetch, mutate]
       )
     },
 }

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

package.json

@@ -22,63 +22,62 @@
   },
   "dependencies": {
     "@chec/commerce.js": "^2.8.0",
-    "@react-spring/web": "^9.2.1",
-    "@spree/storefront-api-v2-sdk": "^5.0.1",
+    "@react-spring/web": "^9.4.1",
+    "@spree/storefront-api-v2-sdk": "^5.1.1",
     "@vercel/fetch": "^6.1.1",
-    "autoprefixer": "^10.2.6",
-    "body-scroll-lock": "^3.1.5",
+    "autoprefixer": "^10.4.2",
+    "body-scroll-lock": "^4.0.0-beta.0",
     "classnames": "^2.3.1",
     "cookie": "^0.4.1",
     "email-validator": "^2.0.4",
     "immutability-helper": "^3.1.1",
-    "js-cookie": "^2.2.1",
-    "keen-slider": "^6.3.2",
+    "js-cookie": "^3.0.1",
+    "keen-slider": "^6.6.3",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
-    "next": "^12.0.3",
-    "next-seo": "^4.26.0",
-    "next-themes": "^0.0.14",
-    "postcss": "^8.3.5",
-    "postcss-nesting": "^8.0.1",
+    "next": "^12.0.8",
+    "next-seo": "^4.28.1",
+    "next-themes": "^0.0.15",
+    "postcss": "^8.4.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-fast-marquee": "^1.1.4",
+    "react-fast-marquee": "^1.3.1",
     "react-merge-refs": "^1.1.0",
-    "react-use-measure": "^2.0.4",
-    "stripe": "^8.176.0",
+    "react-use-measure": "^2.1.1",
+    "stripe": "^8.196.0",
     "swell-js": "^4.0.0-next.0",
-    "swr": "^0.5.6",
-    "tabbable": "^5.2.0",
-    "tailwindcss": "^2.2.2",
-    "uuidv4": "^6.2.10"
+    "swr": "^1.1.2",
+    "tabbable": "^5.2.1",
+    "tailwindcss": "^3.0.13",
+    "uuidv4": "^6.2.12"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.21.5",
     "@graphql-codegen/schema-ast": "^1.18.3",
     "@graphql-codegen/typescript": "^1.22.2",
     "@graphql-codegen/typescript-operations": "^1.18.1",
-    "@next/bundle-analyzer": "^10.2.3",
-    "@types/body-scroll-lock": "^2.6.1",
+    "@next/bundle-analyzer": "^12.0.8",
+    "@types/body-scroll-lock": "^3.1.0",
     "@types/chec__commerce.js": "^2.8.4",
-    "@types/cookie": "^0.4.0",
-    "@types/js-cookie": "^2.2.6",
+    "@types/cookie": "^0.4.1",
+    "@types/js-cookie": "^3.0.1",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.random": "^3.2.6",
     "@types/lodash.throttle": "^4.1.6",
-    "@types/node": "^15.12.4",
-    "@types/react": "^17.0.8",
+    "@types/node": "^17.0.8",
+    "@types/react": "^17.0.38",
     "deepmerge": "^4.2.2",
-    "eslint": "^7.31.0",
-    "eslint-config-next": "^11.0.1",
+    "eslint": "^8.6.0",
+    "eslint-config-next": "^12.0.8",
     "eslint-config-prettier": "^8.3.0",
     "graphql": "^15.5.1",
-    "husky": "^6.0.0",
-    "lint-staged": "^11.0.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.1.7",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.3.0",
-    "typescript": "4.3.4"
+    "postcss-preset-env": "^7.2.3",
+    "prettier": "^2.5.1",
+    "typescript": "4.5.4"
   },
   "husky": {
     "hooks": {

pages/index.tsx

@@ -48,7 +48,7 @@ export default function Home({
             imgProps={{
               width: i === 0 ? 1080 : 540,
               height: i === 0 ? 1080 : 540,
-              priority: true
+              priority: true,
             }}
           />
         ))}

postcss.config.js

@@ -1,7 +1,8 @@
 module.exports = {
   plugins: [
+    'tailwindcss/nesting',
     'tailwindcss',
-    'postcss-nesting',
+    'autoprefixer',
     'postcss-flexbugs-fixes',
     [
       'postcss-preset-env',

tailwind.config.js

@@ -1,19 +1,9 @@
 module.exports = {
-  future: {
-    purgeLayersByDefault: true,
-    applyComplexClasses: true,
-  },
-  purge: {
-    content: [
-      './pages/**/*.{js,ts,jsx,tsx}',
-      './components/**/*.{js,ts,jsx,tsx}',
-    ],
-    options: {
-      safelist: {
-        standard: ['outline-none'],
-      },
-    },
-  },
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  safelist: ['outline-none'],
   theme: {
     extend: {
       maxWidth: {

tsconfig.json

@@ -15,6 +15,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "useUnknownInCatchVariables": false,
     "paths": {
       "@lib/*": ["lib/*"],
       "@utils/*": ["utils/*"],
@@ -23,8 +24,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["framework/commerce"],
       "@commerce/*": ["framework/commerce/*"],
-      "@framework": ["framework/local"],
-      "@framework/*": ["framework/local/*"]
+      "@framework": ["framework/shopify"],
+      "@framework/*": ["framework/shopify/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
@@ -39,6 +40,6 @@
     "./framework/spree",
     "./framework/ordercloud",
     "./framework/kibocommerce",
-     "./framework/commercejs"
+    "./framework/commercejs"
   ]
 }