Icky 161 folder and env setup (#1)

* folder and env setup

* codegen.json headers removed

Co-authored-by: Chandradeepta <43542673+Chandradeepta@users.noreply.github.com>

.env.template

@@ -23,3 +23,8 @@ NEXT_PUBLIC_SALEOR_CHANNEL=
 
 NEXT_PUBLIC_VENDURE_SHOP_API_URL=
 NEXT_PUBLIC_VENDURE_LOCAL_URL=
+
+KIBO_API_TOKEN=
+KIBO_API_URL=
+KIBO_CART_COOKIE=
+KIBO_CUSTOMER_COOKIE=

README.md

@@ -153,3 +153,5 @@ After Email confirmation, Checkout should be manually enabled through BigCommerc
 <br>
 BigCommerce team has been notified and they plan to add more details about this subject.
 </details>
+
+Test change for forked kibocommerce

framework/commerce/config.js

@@ -2,87 +2,89 @@
  * This file is expected to be used in next.config.js only
  */
 
-const path = require('path')
-const fs = require('fs')
-const merge = require('deepmerge')
-const prettier = require('prettier')
-
-const PROVIDERS = [
-  'bigcommerce',
-  'saleor',
-  'shopify',
-  'swell',
-  'vendure',
-  'local',
-]
-
-function getProviderName() {
-  return (
-    process.env.COMMERCE_PROVIDER ||
-    (process.env.BIGCOMMERCE_STOREFRONT_API_URL
-      ? 'bigcommerce'
-      : process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
-      ? 'shopify'
-      : process.env.NEXT_PUBLIC_SWELL_STORE_ID
-      ? 'swell'
-      : 'local')
-  )
-}
-
-function withCommerceConfig(nextConfig = {}) {
-  const commerce = nextConfig.commerce || {}
-  const name = commerce.provider || getProviderName()
-
-  if (!name) {
-    throw new Error(
-      `The commerce provider is missing, please add a valid provider name or its environment variables`
-    )
-  }
-  if (!PROVIDERS.includes(name)) {
-    throw new Error(
-      `The commerce provider "${name}" can't be found, please use one of "${PROVIDERS.join(
-        ', '
-      )}"`
-    )
-  }
-
-  const commerceNextConfig = require(path.join('../', name, 'next.config'))
-  const config = merge(nextConfig, commerceNextConfig)
-
-  config.env = config.env || {}
-
-  Object.entries(config.commerce.features).forEach(([k, v]) => {
-    if (v) config.env[`COMMERCE_${k.toUpperCase()}_ENABLED`] = true
-  })
-
-  // Update paths in `tsconfig.json` to point to the selected provider
-  if (config.commerce.updateTSConfig !== false) {
-    const tsconfigPath = path.join(process.cwd(), 'tsconfig.json')
-    const tsconfig = require(tsconfigPath)
-
-    tsconfig.compilerOptions.paths['@framework'] = [`framework/${name}`]
-    tsconfig.compilerOptions.paths['@framework/*'] = [`framework/${name}/*`]
-
-    // When running for production it may be useful to exclude the other providers
-    // from TS checking
-    if (process.env.VERCEL) {
-      const exclude = tsconfig.exclude.filter(
-        (item) => !item.startsWith('framework/')
-      )
-
-      tsconfig.exclude = PROVIDERS.reduce((exclude, current) => {
-        if (current !== name) exclude.push(`framework/${current}`)
-        return exclude
-      }, exclude)
-    }
-
-    fs.writeFileSync(
-      tsconfigPath,
-      prettier.format(JSON.stringify(tsconfig), { parser: 'json' })
-    )
-  }
-
-  return config
-}
-
-module.exports = { withCommerceConfig, getProviderName }
+ const path = require('path')
+ const fs = require('fs')
+ const merge = require('deepmerge')
+ const prettier = require('prettier')
+ 
+ const PROVIDERS = [
+   'bigcommerce',
+   'saleor',
+   'shopify',
+   'swell',
+   'vendure',
+   'local',
+   'kibocommerce'
+ ]
+ 
+ function getProviderName() {
+   return (
+     process.env.COMMERCE_PROVIDER ||
+     (process.env.BIGCOMMERCE_STOREFRONT_API_URL
+       ? 'bigcommerce'
+       : process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
+       ? 'shopify'
+       : process.env.NEXT_PUBLIC_SWELL_STORE_ID
+       ? 'swell'
+       : 'local')
+   )
+ }
+ 
+ function withCommerceConfig(nextConfig = {}) {
+   const commerce = nextConfig.commerce || {}
+   const name = commerce.provider || getProviderName()
+ 
+   if (!name) {
+     throw new Error(
+       `The commerce provider is missing, please add a valid provider name or its environment variables`
+     )
+   }
+   if (!PROVIDERS.includes(name)) {
+     throw new Error(
+       `The commerce provider "${name}" can't be found, please use one of "${PROVIDERS.join(
+         ', '
+       )}"`
+     )
+   }
+ 
+   const commerceNextConfig = require(path.join('../', name, 'next.config'))
+   const config = merge(nextConfig, commerceNextConfig)
+ 
+   config.env = config.env || {}
+ 
+   Object.entries(config.commerce.features).forEach(([k, v]) => {
+     if (v) config.env[`COMMERCE_${k.toUpperCase()}_ENABLED`] = true
+   })
+ 
+   // Update paths in `tsconfig.json` to point to the selected provider
+   if (config.commerce.updateTSConfig !== false) {
+     const tsconfigPath = path.join(process.cwd(), 'tsconfig.json')
+     const tsconfig = require(tsconfigPath)
+ 
+     tsconfig.compilerOptions.paths['@framework'] = [`framework/${name}`]
+     tsconfig.compilerOptions.paths['@framework/*'] = [`framework/${name}/*`]
+ 
+     // When running for production it may be useful to exclude the other providers
+     // from TS checking
+     if (process.env.VERCEL) {
+       const exclude = tsconfig.exclude.filter(
+         (item) => !item.startsWith('framework/')
+       )
+ 
+       tsconfig.exclude = PROVIDERS.reduce((exclude, current) => {
+         if (current !== name) exclude.push(`framework/${current}`)
+         return exclude
+       }, exclude)
+     }
+ 
+     fs.writeFileSync(
+       tsconfigPath,
+       prettier.format(JSON.stringify(tsconfig), { parser: 'json' })
+     )
+   }
+ 
+   return config
+ }
+ 
+ module.exports = { withCommerceConfig, getProviderName }
+ 

framework/kibocommerce/.env.template

@@ -0,0 +1 @@
+COMMERCE_PROVIDER=kibocommerce

framework/kibocommerce/README.md

@@ -0,0 +1 @@
+# Next.js Local Provider

framework/kibocommerce/api/endpoints/cart/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/kibocommerce/api/endpoints/catalog/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/kibocommerce/api/endpoints/catalog/products.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/kibocommerce/api/endpoints/checkout/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/kibocommerce/api/endpoints/customer/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/kibocommerce/api/endpoints/login/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/kibocommerce/api/endpoints/logout/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/kibocommerce/api/endpoints/signup/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/kibocommerce/api/endpoints/wishlist/index.tsx

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/kibocommerce/api/index.ts

@@ -0,0 +1,44 @@
+import type { CommerceAPI, CommerceAPIConfig } from '@commerce/api'
+import { getCommerceApi as commerceApi } from '@commerce/api'
+import createFetcher from './utils/fetch-local'
+
+import getAllPages from './operations/get-all-pages'
+import getPage from './operations/get-page'
+import getSiteInfo from './operations/get-site-info'
+import getCustomerWishlist from './operations/get-customer-wishlist'
+import getAllProductPaths from './operations/get-all-product-paths'
+import getAllProducts from './operations/get-all-products'
+import getProduct from './operations/get-product'
+
+export interface KiboCommerceConfig extends CommerceAPIConfig {}
+const config: KiboCommerceConfig = {
+  commerceUrl: process.env.KIBO_API_URL || '',
+  apiToken: process.env.KIBO_API_TOKEN || '',
+  cartCookie: process.env.KIBO_CART_COOKIE || '',
+  customerCookie: process.env.KIBO_CUSTOMER_COOKIE || '',
+  cartCookieMaxAge: 2592000,
+  fetch: createFetcher(() => getCommerceApi().getConfig()),
+}
+
+const operations = {
+  getAllPages,
+  getPage,
+  getSiteInfo,
+  getCustomerWishlist,
+  getAllProductPaths,
+  getAllProducts,
+  getProduct,
+}
+
+export const provider = { config, operations }
+
+export type KiboCommerceProvider = typeof provider
+export type KiboCommerceAPI<
+  P extends KiboCommerceProvider = KiboCommerceProvider
+> = CommerceAPI<P | any>
+
+export function getCommerceApi<P extends KiboCommerceProvider>(
+  customProvider: P = provider as any
+): KiboCommerceAPI<P> {
+  return commerceApi(customProvider as any)
+}

framework/kibocommerce/api/operations/get-all-pages.ts

@@ -0,0 +1,19 @@
+export type Page = { url: string }
+export type GetAllPagesResult = { pages: Page[] }
+import type { KiboCommerceConfig } from '../index'
+
+export default function getAllPagesOperation() {
+  function getAllPages({
+    config,
+    preview,
+  }: {
+    url?: string
+    config?: Partial<KiboCommerceConfig>
+    preview?: boolean
+  }): Promise<GetAllPagesResult> {
+    return Promise.resolve({
+      pages: [],
+    })
+  }
+  return getAllPages
+}

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

@@ -0,0 +1,15 @@
+import data from '../../data.json'
+
+export type GetAllProductPathsResult = {
+  products: Array<{ path: string }>
+}
+
+export default function getAllProductPathsOperation() {
+  function getAllProductPaths(): Promise<GetAllProductPathsResult> {
+    return Promise.resolve({
+      products: data.products.map(({ path }) => ({ path })),
+    })
+  }
+
+  return getAllProductPaths
+}

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

@@ -0,0 +1,25 @@
+import { Product } from '@commerce/types/product'
+import { GetAllProductsOperation } from '@commerce/types/product'
+import type { OperationContext } from '@commerce/api/operations'
+import type { KiboCommerceConfig } from '../index'
+import data from '../../data.json'
+
+export default function getAllProductsOperation({
+  commerce,
+}: OperationContext<any>) {
+  async function getAllProducts<T extends GetAllProductsOperation>({
+    query = '',
+    variables,
+    config,
+  }: {
+    query?: string
+    variables?: T['variables']
+    config?: Partial<KiboCommerceConfig>
+    preview?: boolean
+  } = {}): Promise<{ products: Product[] | any[] }> {
+    return {
+      products: data.products,
+    }
+  }
+  return getAllProducts
+}

framework/kibocommerce/api/operations/get-customer-wishlist.ts

@@ -0,0 +1,6 @@
+export default function getCustomerWishlistOperation() {
+  function getCustomerWishlist(): any {
+    return { wishlist: {} }
+  }
+  return getCustomerWishlist
+}

framework/kibocommerce/api/operations/get-page.ts

@@ -0,0 +1,13 @@
+export type Page = any
+export type GetPageResult = { page?: Page }
+
+export type PageVariables = {
+  id: number
+}
+
+export default function getPageOperation() {
+  function getPage(): Promise<GetPageResult> {
+    return Promise.resolve({})
+  }
+  return getPage
+}

framework/kibocommerce/api/operations/get-product.ts

@@ -0,0 +1,26 @@
+import type { KiboCommerceConfig } from '../index'
+import { Product } from '@commerce/types/product'
+import { GetProductOperation } from '@commerce/types/product'
+import data from '../../data.json'
+import type { OperationContext } from '@commerce/api/operations'
+
+export default function getProductOperation({
+  commerce,
+}: OperationContext<any>) {
+  async function getProduct<T extends GetProductOperation>({
+    query = '',
+    variables,
+    config,
+  }: {
+    query?: string
+    variables?: T['variables']
+    config?: Partial<KiboCommerceConfig>
+    preview?: boolean
+  } = {}): Promise<Product | {} | any> {
+    return {
+      product: data.products.find(({ slug }) => slug === variables!.slug),
+    }
+  }
+
+  return getProduct
+}

framework/kibocommerce/api/operations/get-site-info.ts

@@ -0,0 +1,43 @@
+import { OperationContext } from '@commerce/api/operations'
+import { Category } from '@commerce/types/site'
+import { KiboCommerceConfig } from '../index'
+
+export type GetSiteInfoResult<
+  T extends { categories: any[]; brands: any[] } = {
+    categories: Category[]
+    brands: any[]
+  }
+> = T
+
+export default function getSiteInfoOperation({}: OperationContext<any>) {
+  function getSiteInfo({
+    query,
+    variables,
+    config: cfg,
+  }: {
+    query?: string
+    variables?: any
+    config?: Partial<KiboCommerceConfig>
+    preview?: boolean
+  } = {}): Promise<GetSiteInfoResult> {
+    return Promise.resolve({
+      categories: [
+        {
+          id: 'new-arrivals',
+          name: 'New Arrivals',
+          slug: 'new-arrivals',
+          path: '/new-arrivals',
+        },
+        {
+          id: 'featured',
+          name: 'Featured',
+          slug: 'featured',
+          path: '/featured',
+        },
+      ],
+      brands: [],
+    })
+  }
+
+  return getSiteInfo
+}

framework/kibocommerce/api/operations/index.ts

@@ -0,0 +1,6 @@
+export { default as getPage } from './get-page'
+export { default as getSiteInfo } from './get-site-info'
+export { default as getAllPages } from './get-all-pages'
+export { default as getProduct } from './get-product'
+export { default as getAllProducts } from './get-all-products'
+export { default as getAllProductPaths } from './get-all-product-paths'

framework/kibocommerce/api/utils/fetch-local.ts

@@ -0,0 +1,34 @@
+import { FetcherError } from '@commerce/utils/errors'
+import type { GraphQLFetcher } from '@commerce/api'
+import type { KiboCommerceConfig } from '../index'
+import fetch from './fetch'
+
+const fetchGraphqlApi: (getConfig: () => KiboCommerceConfig) => GraphQLFetcher =
+  (getConfig) =>
+  async (query: string, { variables, preview } = {}, fetchOptions) => {
+    const config = getConfig()
+    const res = await fetch(config.commerceUrl, {
+      ...fetchOptions,
+      method: 'POST',
+      headers: {
+        ...fetchOptions?.headers,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query,
+        variables,
+      }),
+    })
+
+    const json = await res.json()
+    if (json.errors) {
+      throw new FetcherError({
+        errors: json.errors ?? [{ message: 'Failed to fetch for API' }],
+        status: res.status,
+      })
+    }
+
+    return { data: json.data, res }
+  }
+
+export default fetchGraphqlApi

framework/kibocommerce/api/utils/fetch.ts

@@ -0,0 +1,3 @@
+import zeitFetch from '@vercel/fetch'
+
+export default zeitFetch()

framework/kibocommerce/auth/index.ts

@@ -0,0 +1,3 @@
+export { default as useLogin } from './use-login'
+export { default as useLogout } from './use-logout'
+export { default as useSignup } from './use-signup'

framework/kibocommerce/auth/use-login.tsx

@@ -0,0 +1,16 @@
+import { MutationHook } from '@commerce/utils/types'
+import useLogin, { UseLogin } from '@commerce/auth/use-login'
+
+export default useLogin as UseLogin<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher() {
+    return null
+  },
+  useHook: () => () => {
+    return async function () {}
+  },
+}

framework/kibocommerce/auth/use-logout.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@commerce/utils/types'
+import useLogout, { UseLogout } from '@commerce/auth/use-logout'
+
+export default useLogout as UseLogout<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher() {
+    return null
+  },
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => {},
+}

framework/kibocommerce/auth/use-signup.tsx

@@ -0,0 +1,19 @@
+import { useCallback } from 'react'
+import useCustomer from '../customer/use-customer'
+import { MutationHook } from '@commerce/utils/types'
+import useSignup, { UseSignup } from '@commerce/auth/use-signup'
+
+export default useSignup as UseSignup<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher() {
+    return null
+  },
+  useHook:
+    ({ fetch }) =>
+    () =>
+    () => {},
+}

framework/kibocommerce/cart/index.ts

@@ -0,0 +1,4 @@
+export { default as useCart } from './use-cart'
+export { default as useAddItem } from './use-add-item'
+export { default as useRemoveItem } from './use-remove-item'
+export { default as useUpdateItem } from './use-update-item'

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

@@ -0,0 +1,17 @@
+import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () => {
+      return async function addItem() {
+        return {}
+      }
+    },
+}

framework/kibocommerce/cart/use-cart.tsx

@@ -0,0 +1,42 @@
+import { useMemo } from 'react'
+import { SWRHook } from '@commerce/utils/types'
+import useCart, { UseCart } from '@commerce/cart/use-cart'
+
+export default useCart as UseCart<typeof handler>
+
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher() {
+    return {
+      id: '',
+      createdAt: '',
+      currency: { code: '' },
+      taxesIncluded: '',
+      lineItems: [],
+      lineItemsSubtotalPrice: '',
+      subtotalPrice: 0,
+      totalPrice: 0,
+    }
+  },
+  useHook:
+    ({ useData }) =>
+    (input) => {
+      return useMemo(
+        () =>
+          Object.create(
+            {},
+            {
+              isEmpty: {
+                get() {
+                  return true
+                },
+                enumerable: true,
+              },
+            }
+          ),
+        []
+      )
+    },
+}

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

@@ -0,0 +1,18 @@
+import { MutationHook } from '@commerce/utils/types'
+import useRemoveItem, { UseRemoveItem } from '@commerce/cart/use-remove-item'
+
+export default useRemoveItem as UseRemoveItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () => {
+      return async function removeItem(input) {
+        return {}
+      }
+    },
+}

framework/kibocommerce/cart/use-update-item.tsx

@@ -0,0 +1,18 @@
+import { MutationHook } from '@commerce/utils/types'
+import useUpdateItem, { UseUpdateItem } from '@commerce/cart/use-update-item'
+
+export default useUpdateItem as UseUpdateItem<any>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () => {
+      return async function addItem() {
+        return {}
+      }
+    },
+}

framework/kibocommerce/codegen.json

@@ -0,0 +1,23 @@
+{
+    "schema": {
+      "https://t17194-s21127.dev10.kubedev.kibo-dev.com/graphql": {}
+    },
+    
+    "generates": {
+      "./framework/kibocommerce/schema.d.ts": {
+        "plugins": ["typescript", "typescript-operations"],
+        "config": {
+          "scalars": {
+            "ID": "string"
+          }
+        }
+      },
+      "./framework/kibocommerce/schema.graphql": {
+        "plugins": ["schema-ast"]
+      }
+    },
+    "hooks": {
+      "afterAllFileWrite": ["prettier --write"]
+    }
+  }
+  

framework/kibocommerce/commerce.config.json

@@ -0,0 +1,9 @@
+{
+  "provider": "kibocommerce",
+  "features": {
+    "wishlist": false,
+    "cart": false,
+    "search": false,
+    "customerAuth": false
+  }
+}

framework/kibocommerce/customer/index.ts

@@ -0,0 +1 @@
+export { default as useCustomer } from './use-customer'

framework/kibocommerce/customer/use-customer.tsx

@@ -0,0 +1,15 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCustomer, { UseCustomer } from '@commerce/customer/use-customer'
+
+export default useCustomer as UseCustomer<typeof handler>
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook: () => () => {
+    return async function addItem() {
+      return {}
+    }
+  },
+}

framework/kibocommerce/data.json

@@ -0,0 +1,235 @@
+{
+  "products": [
+    {
+      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjA=",
+      "name": "New Short Sleeve T-Shirt",
+      "vendor": "Next.js",
+      "path": "/new-short-sleeve-t-shirt",
+      "slug": "new-short-sleeve-t-shirt",
+      "price": { "value": 25, "currencyCode": "USD" },
+      "descriptionHtml": "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
+      "images": [
+        {
+          "url": "/assets/drop-shirt-0.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/drop-shirt-1.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/drop-shirt-2.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        }
+      ],
+      "variants": [
+        {
+          "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjAss=",
+          "options": [
+            {
+              "__typename": "MultipleChoiceOption",
+              "id": "asd",
+              "displayName": "Size",
+              "values": [
+                {
+                  "label": "XL"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "options": [
+        {
+          "id": "option-color",
+          "displayName": "Color",
+          "values": [
+            {
+              "label": "color",
+              "hexColors": ["#222"]
+            }
+          ]
+        },
+        {
+          "id": "option-size",
+          "displayName": "Size",
+          "values": [
+            {
+              "label": "S"
+            },
+            {
+              "label": "M"
+            },
+            {
+              "label": "L"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9ksdWN0LzU0NDczMjUwMjQ0MjA=",
+      "name": "Lightweight Jacket",
+      "vendor": "Next.js",
+      "path": "/lightweight-jacket",
+      "slug": "lightweight-jacket",
+      "price": { "value": 249.99, "currencyCode": "USD" },
+      "descriptionHtml": "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
+      "images": [
+        {
+          "url": "/assets/lightweight-jacket-0.png",
+          "altText": "Lightweight Jacket",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/lightweight-jacket-1.png",
+          "altText": "Lightweight Jacket",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/lightweight-jacket-2.png",
+          "altText": "Lightweight Jacket",
+          "width": 1000,
+          "height": 1000
+        }
+      ],
+      "variants": [
+        {
+          "id": "Z2lkOid8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjAss=",
+          "options": [
+            {
+              "__typename": "MultipleChoiceOption",
+              "id": "asd",
+              "displayName": "Size",
+              "values": [
+                {
+                  "label": "XL"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "options": [
+        {
+          "id": "option-color",
+          "displayName": "Color",
+          "values": [
+            {
+              "label": "color",
+              "hexColors": ["#222"]
+            }
+          ]
+        },
+        {
+          "id": "option-size",
+          "displayName": "Size",
+          "values": [
+            {
+              "label": "S"
+            },
+            {
+              "label": "M"
+            },
+            {
+              "label": "L"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Z2lkOis8vc2hvcGlmsddeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjA=",
+      "name": "Shirt",
+      "vendor": "Next.js",
+      "path": "/shirt",
+      "slug": "shirt",
+      "price": { "value": 25, "currencyCode": "USD" },
+      "descriptionHtml": "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
+      "images": [
+        {
+          "url": "/assets/t-shirt-0.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/t-shirt-1.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/t-shirt-2.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/t-shirt-3.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/t-shirt-4.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        }
+      ],
+      "variants": [
+        {
+          "id": "Z2lkOi8vc2hvcGlmeS9Qcms9kdWN0LzU0NDczMjUwMjQ0MjAss=",
+          "options": [
+            {
+              "__typename": "MultipleChoiceOption",
+              "id": "asd",
+              "displayName": "Size",
+              "values": [
+                {
+                  "label": "XL"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "options": [
+        {
+          "id": "option-color",
+          "displayName": "Color",
+          "values": [
+            {
+              "label": "color",
+              "hexColors": ["#222"]
+            }
+          ]
+        },
+        {
+          "id": "option-size",
+          "displayName": "Size",
+          "values": [
+            {
+              "label": "S"
+            },
+            {
+              "label": "M"
+            },
+            {
+              "label": "L"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

framework/kibocommerce/fetcher.ts

@@ -0,0 +1,41 @@
+import { FetcherError } from '@commerce/utils/errors'
+import type { Fetcher } from '@commerce/utils/types'
+
+async function getText(res: Response) {
+  try {
+    return (await res.text()) || res.statusText
+  } catch (error) {
+    return res.statusText
+  }
+}
+
+async function getError(res: Response) {
+  if (res.headers.get('Content-Type')?.includes('application/json')) {
+    const data = await res.json()
+    return new FetcherError({ errors: data.errors, status: res.status })
+  }
+  return new FetcherError({ message: await getText(res), status: res.status })
+}
+
+const fetcher: Fetcher = async ({
+  url,
+  method = 'GET',
+  variables,
+  body: bodyObj,
+}) => {
+  const hasBody = Boolean(variables || bodyObj)
+  const body = hasBody
+    ? JSON.stringify(variables ? { variables } : bodyObj)
+    : undefined
+  const headers = hasBody ? { 'Content-Type': 'application/json' } : undefined
+  const res = await fetch(url!, { method, body, headers })
+
+  if (res.ok) {
+    const { data } = await res.json()
+    return data
+  }
+
+  throw await getError(res)
+}
+
+export default fetcher

framework/kibocommerce/index.tsx

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

framework/kibocommerce/next.config.js

@@ -0,0 +1,8 @@
+const commerce = require('./commerce.config.json')
+
+module.exports = {
+  commerce,
+  images: {
+    domains: ['localhost'],
+  },
+}

framework/kibocommerce/product/index.ts

@@ -0,0 +1,2 @@
+export { default as usePrice } from './use-price'
+export { default as useSearch } from './use-search'

framework/kibocommerce/product/use-price.tsx

@@ -0,0 +1,2 @@
+export * from '@commerce/product/use-price'
+export { default } from '@commerce/product/use-price'

framework/kibocommerce/product/use-search.tsx

@@ -0,0 +1,17 @@
+import { SWRHook } from '@commerce/utils/types'
+import useSearch, { UseSearch } from '@commerce/product/use-search'
+export default useSearch as UseSearch<typeof handler>
+
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook: () => () => {
+    return {
+      data: {
+        products: [],
+      },
+    }
+  },
+}

framework/kibocommerce/provider.ts

@@ -0,0 +1,22 @@
+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'
+import { handler as useRemoveItem } from './cart/use-remove-item'
+import { handler as useCustomer } from './customer/use-customer'
+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'
+
+export const kiboCommerceProvider = {
+  locale: 'en-us',
+  cartCookie: 'bc_cartId',
+  fetcher,
+  cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
+  customer: { useCustomer },
+  products: { useSearch },
+  auth: { useLogin, useLogout, useSignup },
+}
+
+export type KibocommerceProvider = typeof kiboCommerceProvider

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

@@ -0,0 +1,13 @@
+import { useCallback } from 'react'
+
+export function emptyHook() {
+  const useEmptyHook = async (options = {}) => {
+    return useCallback(async function () {
+      return Promise.resolve()
+    }, [])
+  }
+
+  return useEmptyHook
+}
+
+export default emptyHook

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

@@ -0,0 +1,17 @@
+import { useCallback } from 'react'
+
+type Options = {
+  includeProducts?: boolean
+}
+
+export function emptyHook(options?: Options) {
+  const useEmptyHook = async ({ id }: { id: string | number }) => {
+    return useCallback(async function () {
+      return Promise.resolve()
+    }, [])
+  }
+
+  return useEmptyHook
+}
+
+export default emptyHook

framework/kibocommerce/wishlist/use-wishlist.tsx

@@ -0,0 +1,43 @@
+import { HookFetcher } from '@commerce/utils/types'
+import type { Product } from '@commerce/types/product'
+
+const defaultOpts = {}
+
+export type Wishlist = {
+  items: [
+    {
+      product_id: number
+      variant_id: number
+      id: number
+      product: Product
+    }
+  ]
+}
+
+export interface UseWishlistOptions {
+  includeProducts?: boolean
+}
+
+export interface UseWishlistInput extends UseWishlistOptions {
+  customerId?: number
+}
+
+export const fetcher: HookFetcher<Wishlist | null, UseWishlistInput> = () => {
+  return null
+}
+
+export function extendHook(
+  customFetcher: typeof fetcher,
+  // swrOptions?: SwrOptions<Wishlist | null, UseWishlistInput>
+  swrOptions?: any
+) {
+  const useWishlist = ({ includeProducts }: UseWishlistOptions = {}) => {
+    return { data: null }
+  }
+
+  useWishlist.extend = extendHook
+
+  return useWishlist
+}
+
+export default extendHook(fetcher)

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -2,7 +2,7 @@
   "name": "nextjs-commerce",
   "version": "1.0.0",
   "scripts": {
-    "dev": "NODE_OPTIONS='--inspect' next dev",
+    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "start": "next start",
     "analyze": "BUNDLE_ANALYZE=both yarn build",
@@ -12,7 +12,8 @@
     "generate": "graphql-codegen",
     "generate:shopify": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config framework/shopify/codegen.json",
     "generate:vendure": "graphql-codegen --config framework/vendure/codegen.json",
-    "generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js"
+    "generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js",
+    "generate:kibocommerce": "graphql-codegen --config framework/kibocommerce/codegen.json"
   },
   "sideEffects": false,
   "license": "MIT",
@@ -26,6 +27,7 @@
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.3.1",
     "cookie": "^0.4.1",
+    "dotenv": "^10.0.0",
     "email-validator": "^2.0.4",
     "immutability-helper": "^3.1.1",
     "js-cookie": "^2.2.1",
@@ -63,6 +65,7 @@
     "@types/lodash.throttle": "^4.1.6",
     "@types/node": "^15.12.4",
     "@types/react": "^17.0.8",
+    "cross-env": "^7.0.3",
     "deepmerge": "^4.2.2",
     "eslint": "^7.31.0",
     "eslint-config-next": "^11.0.1",

tsconfig.json

@@ -23,8 +23,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["framework/commerce"],
       "@commerce/*": ["framework/commerce/*"],
-      "@framework": ["framework/local"],
-      "@framework/*": ["framework/local/*"]
+      "@framework": ["framework/kibocommerce"],
+      "@framework/*": ["framework/kibocommerce/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],