Merge branch 'main' into spree-framework-poc

.env.template

@@ -1,4 +1,4 @@
-# Available providers: bigcommerce, shopify, swell
+# Available providers: local, bigcommerce, shopify, swell, saleor, spree
 COMMERCE_PROVIDER=
 
 BIGCOMMERCE_STOREFRONT_API_URL=

components/common/UserNav/UserNav.tsx

@@ -7,6 +7,7 @@ import useCustomer from '@framework/customer/use-customer'
 import { Avatar } from '@components/common'
 import { Heart, Bag } from '@components/icons'
 import { useUI } from '@components/ui/context'
+import Button from '@components/ui/Button'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'
 
@@ -26,9 +27,11 @@ const UserNav: FC<Props> = ({ className }) => {
     <nav className={cn(s.root, className)}>
       <ul className={s.list}>
         {process.env.COMMERCE_CART_ENABLED && (
-          <li className={s.item} onClick={toggleSidebar}>
-            <Bag />
-            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+          <li className={s.item}>
+            <Button className={s.item} variant="naked" onClick={toggleSidebar} aria-label="Cart">
+              <Bag />
+              {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+            </Button>
           </li>
         )}
         {process.env.COMMERCE_WISHLIST_ENABLED && (

components/ui/Button/Button.module.css

@@ -35,6 +35,15 @@
   @apply border-accent-9 bg-accent-9 text-accent-0;
 }
 
+.naked {
+  @apply bg-transparent font-semibold border-none shadow-none outline-none py-0 px-0;
+}
+
+.naked:hover,
+.naked:focus {
+  @apply bg-transparent border-none;
+}
+
 .disabled,
 .disabled:hover {
   @apply text-accent-4 border-accent-2 bg-accent-1 cursor-not-allowed;

components/ui/Button/Button.tsx

@@ -12,7 +12,7 @@ import { LoadingDots } from '@components/ui'
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
-  variant?: 'flat' | 'slim' | 'ghost'
+  variant?: 'flat' | 'slim' | 'ghost' | 'naked'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
@@ -41,6 +41,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     {
       [s.ghost]: variant === 'ghost',
       [s.slim]: variant === 'slim',
+      [s.naked]: variant === 'naked',
       [s.loading]: loading,
       [s.disabled]: disabled,
     },

components/ui/Sidebar/Sidebar.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply fixed inset-0 h-full z-50 box-border;
+  @apply fixed inset-0 h-full z-50 box-border outline-none;
 }
 
 .sidebar {

components/ui/Sidebar/Sidebar.tsx

@@ -13,28 +13,44 @@ interface SidebarProps {
 }
 
 const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
-  const ref = useRef() as React.MutableRefObject<HTMLDivElement>
+  const sidebarRef = useRef() as React.MutableRefObject<HTMLDivElement>
+  const contentRef = useRef() as React.MutableRefObject<HTMLDivElement>
+
+  const onKeyDownSidebar = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.code === 'Escape') {
+      onClose()
+    }
+  }
 
   useEffect(() => {
-    const sidebar = ref.current
+    if (sidebarRef.current) {
+      sidebarRef.current.focus()
+    }
 
-    if (sidebar) {
-      disableBodyScroll(sidebar, { reserveScrollBarGap: true })
+    const contentElement = contentRef.current
+  
+    if (contentElement) {
+      disableBodyScroll(contentElement, { reserveScrollBarGap: true })
     }
 
     return () => {
-      if (sidebar) enableBodyScroll(sidebar)
+      if (contentElement) enableBodyScroll(contentElement)
       clearAllBodyScrollLocks()
     }
   }, [])
 
   return (
-    <div className={cn(s.root)}>
+    <div
+      className={cn(s.root)}
+      ref={sidebarRef}
+      onKeyDown={onKeyDownSidebar}
+      tabIndex={1}
+    >
       <div className="absolute inset-0 overflow-hidden">
         <div className={s.backdrop} onClick={onClose} />
         <section className="absolute inset-y-0 right-0 max-w-full flex outline-none pl-10">
           <div className="h-full w-full md:w-screen md:max-w-md">
-            <div className={s.sidebar} ref={ref}>
+            <div className={s.sidebar} ref={contentRef}>
               {children}
             </div>
           </div>

framework/bigcommerce/index.tsx

@@ -1,36 +1,9 @@
-import type { ReactNode } from 'react'
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-import { bigcommerceProvider } from './provider'
-import type { BigcommerceProvider } from './provider'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
+import { bigcommerceProvider, BigcommerceProvider } from './provider'
 
 export { bigcommerceProvider }
 export type { BigcommerceProvider }
 
-export const bigcommerceConfig: CommerceConfig = {
-  locale: 'en-us',
-  cartCookie: 'bc_cartId',
-}
-
-export type BigcommerceConfig = Partial<CommerceConfig>
-
-export type BigcommerceProps = {
-  children?: ReactNode
-  locale: string
-} & BigcommerceConfig
-
-export function CommerceProvider({ children, ...config }: BigcommerceProps) {
-  return (
-    <CoreCommerceProvider
-      provider={bigcommerceProvider}
-      config={{ ...bigcommerceConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
+export const CommerceProvider = getCommerceProvider(bigcommerceProvider)
 
 export const useCommerce = () => useCoreCommerce<BigcommerceProvider>()

framework/commerce/config.js

@@ -8,13 +8,13 @@ const merge = require('deepmerge')
 const prettier = require('prettier')
 
 const PROVIDERS = [
+  'local',
   'bigcommerce',
   'saleor',
   'shopify',
   'spree',
   'swell',
   'vendure',
-  'local'
 ]
 
 function getProviderName() {

framework/commerce/index.tsx

@@ -47,51 +47,60 @@ export type Provider = CommerceConfig & {
   }
 }
 
-export type CommerceProps<P extends Provider> = {
-  children?: ReactNode
-  provider: P
-  config: CommerceConfig
-}
-
-export type CommerceConfig = Omit<
-  CommerceContextValue<any>,
-  'providerRef' | 'fetcherRef'
->
-
-export type CommerceContextValue<P extends Provider> = {
-  providerRef: MutableRefObject<P>
-  fetcherRef: MutableRefObject<Fetcher>
+export type CommerceConfig = {
   locale: string
   cartCookie: string
 }
 
-export function CommerceProvider<P extends Provider>({
+export type CommerceContextValue<P extends Provider> = {
+  providerRef: MutableRefObject<P>
+  fetcherRef: MutableRefObject<Fetcher>
+} & CommerceConfig
+
+export type CommerceProps<P extends Provider> = {
+  children?: ReactNode
+  provider: P
+}
+
+/**
+ * These are the properties every provider should allow when implementing
+ * the core commerce provider
+ */
+export type CommerceProviderProps = {
+  children?: ReactNode
+} & Partial<CommerceConfig>
+
+export function CoreCommerceProvider<P extends Provider>({
   provider,
   children,
-  config,
 }: CommerceProps<P>) {
-  if (!config) {
-    throw new Error('CommerceProvider requires a valid config object')
-  }
-
   const providerRef = useRef(provider)
   // TODO: Remove the fetcherRef
   const fetcherRef = useRef(provider.fetcher)
-  // Because the config is an object, if the parent re-renders this provider
-  // will re-render every consumer unless we memoize the config
+  // If the parent re-renders this provider will re-render every
+  // consumer unless we memoize the config
+  const { locale, cartCookie } = providerRef.current
   const cfg = useMemo(
-    () => ({
-      providerRef,
-      fetcherRef,
-      locale: config.locale,
-      cartCookie: config.cartCookie,
-    }),
-    [config.locale, config.cartCookie]
+    () => ({ providerRef, fetcherRef, locale, cartCookie }),
+    [locale, cartCookie]
   )
 
   return <Commerce.Provider value={cfg}>{children}</Commerce.Provider>
 }
 
+export function getCommerceProvider<P extends Provider>(provider: P) {
+  return function CommerceProvider({
+    children,
+    ...props
+  }: CommerceProviderProps) {
+    return (
+      <CoreCommerceProvider provider={{ ...provider, ...props }}>
+        {children}
+      </CoreCommerceProvider>
+    )
+  }
+}
+
 export function useCommerce<P extends Provider>() {
   return useContext(Commerce) as CommerceContextValue<P>
 }

framework/local/index.tsx

@@ -1,32 +1,9 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-import { localProvider } from './provider'
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
+import { localProvider, LocalProvider } from './provider'
 
-export const localConfig: CommerceConfig = {
-  locale: 'en-us',
-  cartCookie: 'session',
-}
+export { localProvider }
+export type { LocalProvider }
 
-export function CommerceProvider({
-  children,
-  ...config
-}: {
-  children?: ReactNode
-  locale: string
-} & Partial<CommerceConfig>) {
-  return (
-    <CoreCommerceProvider
-      provider={localProvider}
-      config={{ ...localConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
+export const CommerceProvider = getCommerceProvider(localProvider)
 
-export const useCommerce = () => useCoreCommerce()
+export const useCommerce = () => useCoreCommerce<LocalProvider>()

framework/local/provider.ts

@@ -9,7 +9,6 @@ import { handler as useLogin } from './auth/use-login'
 import { handler as useLogout } from './auth/use-logout'
 import { handler as useSignup } from './auth/use-signup'
 
-export type Provider = typeof localProvider
 export const localProvider = {
   locale: 'en-us',
   cartCookie: 'session',
@@ -19,3 +18,5 @@ export const localProvider = {
   products: { useSearch },
   auth: { useLogin, useLogout, useSignup },
 }
+
+export type LocalProvider = typeof localProvider

framework/saleor/api/index.ts

@@ -1,5 +1,5 @@
-import type { CommerceAPIConfig } from '@commerce/api'
-
+import { CommerceAPI, CommerceAPIConfig, getCommerceApi as commerceApi } from '@commerce/api'
+import * as operations from './operations'
 import * as Const from '../const'
 
 if (!Const.API_URL) {
@@ -27,23 +27,12 @@ const config: SaleorConfig = {
   storeChannel: Const.API_CHANNEL,
 }
 
-import {
-  CommerceAPI,
-  getCommerceApi as commerceApi,
-} from '@commerce/api'
-
-import * as operations from './operations'
-
-export interface ShopifyConfig extends CommerceAPIConfig {}
-
 export const provider = { config, operations }
 
 export type Provider = typeof provider
 
 export type SaleorAPI<P extends Provider = Provider> = CommerceAPI<P>
 
-export function getCommerceApi<P extends Provider>(
-  customProvider: P = provider as any
-): SaleorAPI<P> {
+export function getCommerceApi<P extends Provider>(customProvider: P = provider as any): SaleorAPI<P> {
   return commerceApi(customProvider)
 }

framework/saleor/api/operations/get-all-product-paths.ts

@@ -1,10 +1,6 @@
 import type { OperationContext } from '@commerce/api/operations'
-import {
-  GetAllProductPathsQuery,
-  GetAllProductPathsQueryVariables,
-  ProductCountableEdge,
-} from '../../schema'
-import type { ShopifyConfig, Provider, SaleorConfig } from '..'
+import { ProductCountableEdge } from '../../schema'
+import type { Provider, SaleorConfig } from '..'
 
 import { getAllProductsPathsQuery } from '../../utils/queries'
 import fetchAllProducts from '../utils/fetch-all-products'
@@ -13,10 +9,7 @@ export type GetAllProductPathsResult = {
   products: Array<{ path: string }>
 }
 
-export default function getAllProductPathsOperation({
-  commerce,
-}: OperationContext<Provider>) {
-
+export default function getAllProductPathsOperation({ commerce }: OperationContext<Provider>) {
   async function getAllProductPaths({
     query,
     config,
@@ -24,7 +17,7 @@ export default function getAllProductPathsOperation({
   }: {
     query?: string
     config?: SaleorConfig
-    variables?: any 
+    variables?: any
   } = {}): Promise<GetAllProductPathsResult> {
     config = commerce.getConfig(config)
 
@@ -39,7 +32,6 @@ export default function getAllProductPathsOperation({
         path: `/${slug}`,
       })),
     }
-
   }
 
   return getAllProductPaths

framework/saleor/index.tsx

@@ -1,32 +1,9 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-
-import { CommerceConfig, CommerceProvider as CoreCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
-
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
 import { saleorProvider, SaleorProvider } from './provider'
-import * as Const from './const'
 
 export { saleorProvider }
 export type { SaleorProvider }
 
-export const saleorConfig: CommerceConfig = {
-  locale: 'en-us',
-  cartCookie: Const.CHECKOUT_ID_COOKIE,
-}
+export const CommerceProvider = getCommerceProvider(saleorProvider)
 
-export type SaleorConfig = Partial<CommerceConfig>
-
-export type SaleorProps = {
-  children?: ReactNode
-  locale: string
-} & SaleorConfig
-
-export function CommerceProvider({ children, ...config }: SaleorProps) {
-  return (
-    <CoreCommerceProvider provider={saleorProvider} config={{ ...saleorConfig, ...config }}>
-      {children}
-    </CoreCommerceProvider>
-  )
-}
-
-export const useCommerce = () => useCoreCommerce()
+export const useCommerce = () => useCoreCommerce<SaleorProvider>()

framework/saleor/provider.ts

@@ -1,3 +1,4 @@
+import { CHECKOUT_ID_COOKIE } from './const'
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
 import { handler as useUpdateItem } from './cart/use-update-item'
@@ -14,8 +15,7 @@ import fetcher from './fetcher'
 
 export const saleorProvider = {
   locale: 'en-us',
-  cartCookie: '',
-  cartCookieToken: '',
+  cartCookie: CHECKOUT_ID_COOKIE,
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
   customer: { useCustomer },

framework/shopify/index.tsx

@@ -1,40 +1,9 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-
-import { shopifyProvider } from './provider'
-import type { ShopifyProvider } from './provider'
-import { SHOPIFY_CHECKOUT_ID_COOKIE } from './const'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
+import { shopifyProvider, ShopifyProvider } from './provider'
 
 export { shopifyProvider }
 export type { ShopifyProvider }
 
-export const shopifyConfig: CommerceConfig = {
-  locale: 'en-us',
-  cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
-}
-
-export type ShopifyConfig = Partial<CommerceConfig>
-
-export type ShopifyProps = {
-  children?: ReactNode
-  locale: string
-} & ShopifyConfig
-
-export function CommerceProvider({ children, ...config }: ShopifyProps) {
-  return (
-    <CoreCommerceProvider
-      provider={shopifyProvider}
-      config={{ ...shopifyConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
+export const CommerceProvider = getCommerceProvider(shopifyProvider)
 
 export const useCommerce = () => useCoreCommerce<ShopifyProvider>()

framework/spree/.env.template

@@ -2,7 +2,7 @@
 
 COMMERCE_PROVIDER=spree
 
-{# - public (available in the web browser) #}
+{# - NEXT_PUBLIC_* are exposed to the web browser and the server #}
 NEXT_PUBLIC_SPREE_API_HOST=http://localhost:4000
 NEXT_PUBLIC_SPREE_DEFAULT_LOCALE=en-us
 NEXT_PUBLIC_SPREE_CART_COOKIE_NAME=spree_cart_token

framework/spree/index.tsx

@@ -1,37 +1,11 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
+import { spreeProvider } from './provider'
+import type { SpreeProvider } from './provider'
 
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
+export { spreeProvider }
+export type { SpreeProvider }
 
-import { provider } from './provider'
-import type { Provider } from './provider'
-import { requireConfigValue } from './isomorphic-config'
+export const CommerceProvider =
+  getCommerceProvider<SpreeProvider>(spreeProvider)
 
-export type SpreeProps = {
-  children: ReactNode
-  locale: string
-}
-
-export const spreeCommerceConfigDefaults: CommerceConfig = {
-  locale: requireConfigValue('defaultLocale') as string,
-  cartCookie: requireConfigValue('cartCookieName') as string,
-}
-
-export type SpreeConfig = CommerceConfig
-
-export function CommerceProvider({ children, ...restProps }: SpreeProps) {
-  return (
-    <CoreCommerceProvider<Provider>
-      provider={provider}
-      config={{ ...spreeCommerceConfigDefaults, ...restProps }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
-
-export const useCommerce = () => useCoreCommerce<Provider>()
+export const useCommerce = () => useCoreCommerce<SpreeProvider>()

framework/spree/provider.ts

@@ -1,6 +1,4 @@
-import type { Provider } from '@commerce'
 import fetcher from './fetcher'
-
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
 import { handler as useUpdateItem } from './cart/use-update-item'
@@ -10,10 +8,11 @@ import { handler as useSearch } from './product/use-search'
 import { handler as useLogin } from './auth/use-login'
 import { handler as useLogout } from './auth/use-logout'
 import { handler as useSignup } from './auth/use-signup'
+import { requireConfigValue } from './isomorphic-config'
 
-const provider = {
-  locale: '', // Not an optional key in TypeScript, but already set in config. So, just make it an empty string.
-  cartCookie: '', // Not an optional key in TypeScript, but already set in config. So, just make it an empty string.
+const spreeProvider = {
+  locale: requireConfigValue('defaultLocale') as string,
+  cartCookie: requireConfigValue('cartCookieName') as string,
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
   customer: { useCustomer },
@@ -21,6 +20,6 @@ const provider = {
   auth: { useLogin, useLogout, useSignup },
 }
 
-export { provider }
+export { spreeProvider }
 
-export type { Provider }
+export type SpreeProvider = typeof spreeProvider

framework/swell/api/utils/fetch-swell-api.ts

@@ -1,7 +1,7 @@
-import { swellConfig } from '../..'
+import swell from '../../swell'
 
 const fetchApi = async (query: string, method: string, variables: [] = []) => {
-  const { swell } = swellConfig
   return swell[query][method](...variables)
 }
+
 export default fetchApi

framework/swell/const.ts

@@ -4,8 +4,6 @@ export const SWELL_CHECKOUT_URL_COOKIE = 'swell_checkoutUrl'
 
 export const SWELL_CUSTOMER_TOKEN_COOKIE = 'swell_customerToken'
 
-export const STORE_DOMAIN = process.env.NEXT_PUBLIC_SWELL_STORE_DOMAIN
-
 export const SWELL_COOKIE_EXPIRE = 30
 
 export const SWELL_STORE_ID = process.env.NEXT_PUBLIC_SWELL_STORE_ID

framework/swell/fetcher.ts

@@ -1,11 +1,9 @@
 import { Fetcher } from '@commerce/utils/types'
-import { handleFetchResponse } from './utils'
-import { swellConfig } from './index'
 import { CommerceError } from '@commerce/utils/errors'
+import { handleFetchResponse } from './utils'
+import swell from './swell'
 
 const fetcher: Fetcher = async ({ method = 'get', variables, query }) => {
-  const { swell } = swellConfig
-
   async function callSwell() {
     if (Array.isArray(variables)) {
       const arg1 = variables[0]

framework/swell/index.tsx

@@ -1,47 +1,9 @@
-import * as React from 'react'
-import swell from 'swell-js'
-import { ReactNode } from 'react'
-
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
 import { swellProvider, SwellProvider } from './provider'
-import {
-  SWELL_CHECKOUT_ID_COOKIE,
-  SWELL_STORE_ID,
-  SWELL_PUBLIC_KEY,
-} from './const'
-swell.init(SWELL_STORE_ID, SWELL_PUBLIC_KEY)
 
 export { swellProvider }
 export type { SwellProvider }
 
-export const swellConfig: any = {
-  locale: 'en-us',
-  cartCookie: SWELL_CHECKOUT_ID_COOKIE,
-  swell,
-}
+export const CommerceProvider = getCommerceProvider(swellProvider)
 
-export type SwellConfig = Partial<CommerceConfig>
-
-export type SwellProps = {
-  children?: ReactNode
-  locale: string
-} & SwellConfig
-
-export function CommerceProvider({ children, ...config }: SwellProps) {
-  return (
-    <CoreCommerceProvider
-      // TODO: Fix this type
-      provider={swellProvider as any}
-      config={{ ...swellConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
-
-export const useCommerce = () => useCoreCommerce()
+export const useCommerce = () => useCoreCommerce<SwellProvider>()

framework/swell/provider.ts

@@ -1,6 +1,5 @@
 import { Provider } from '@commerce'
-
-import { SWELL_CHECKOUT_URL_COOKIE, STORE_DOMAIN } from './const'
+import { SWELL_CHECKOUT_ID_COOKIE } from './const'
 
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
@@ -15,11 +14,12 @@ import { handler as useLogout } from './auth/use-logout'
 import { handler as useSignup } from './auth/use-signup'
 
 import fetcher from './fetcher'
+import swell from './swell'
 
-export const swellProvider: Provider = {
+export const swellProvider: Provider & { swell: any } = {
   locale: 'en-us',
-  cartCookie: SWELL_CHECKOUT_URL_COOKIE,
-  // storeDomain: STORE_DOMAIN,
+  cartCookie: SWELL_CHECKOUT_ID_COOKIE,
+  swell,
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
   customer: { useCustomer },

framework/swell/swell.ts

@@ -0,0 +1,6 @@
+import swell from 'swell-js'
+import { SWELL_STORE_ID, SWELL_PUBLIC_KEY } from './const'
+
+swell.init(SWELL_STORE_ID, SWELL_PUBLIC_KEY)
+
+export default swell

framework/vendure/index.tsx

@@ -1,33 +1,9 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-import { vendureProvider } from './provider'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
+import { vendureProvider, VendureProvider } from './provider'
 
-export const vendureConfig: CommerceConfig = {
-  locale: 'en-us',
-  cartCookie: 'session',
-}
+export { vendureProvider }
+export type { VendureProvider }
 
-export type VendureConfig = Partial<CommerceConfig>
-
-export type VendureProps = {
-  children?: ReactNode
-  locale: string
-} & VendureConfig
-
-export function CommerceProvider({ children, ...config }: VendureProps) {
-  return (
-    <CoreCommerceProvider
-      provider={vendureProvider}
-      config={{ ...vendureConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
+export const CommerceProvider = getCommerceProvider(vendureProvider)
 
 export const useCommerce = () => useCoreCommerce()

framework/vendure/provider.ts

@@ -1,4 +1,3 @@
-import { Provider } from '@commerce'
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
 import { handler as useUpdateItem } from './cart/use-update-item'
@@ -10,7 +9,7 @@ import { handler as useLogout } from './auth/use-logout'
 import { handler as useSignup } from './auth/use-signup'
 import { fetcher } from './fetcher'
 
-export const vendureProvider: Provider = {
+export const vendureProvider = {
   locale: 'en-us',
   cartCookie: 'session',
   fetcher,
@@ -19,3 +18,5 @@ export const vendureProvider: Provider = {
   products: { useSearch },
   auth: { useLogin, useLogout, useSignup },
 }
+
+export type VendureProvider = typeof vendureProvider