Updated imports and deps

README.md

@@ -31,7 +31,6 @@ Next.js Commerce integrates out-of-the-box with BigCommerce. We plan to support
 
 If you wish to work on a new cms/headless ecommerce provider, please check this repo https://github.com/vercel/commerce-framework and open a PR with your functions and utilities under the standard mentioned in the README.
 
-
 ## Troubleshoot
 
 <details>
@@ -69,15 +68,6 @@ After Email confirmation, Checkout should be manually enabled through BigCommerc
 BigCommerce team has been notified and they plan to add more detailed about this subject.
 </details>
 
-<details>
-<summary>I have issues with BigCommerce data hooks</summary>
-<br>
-Report issue with Data Hooks here: https://github.com/bigcommerce/storefront-data-hooks
-</details>
-
-
-
-
 ## Contribute
 
 Our commitment to Open Source can be found [here](https://vercel.com/oss).

components/auth/LoginView.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import { Logo, Button, Input } from '@components/ui'
-import useLogin from '@bigcommerce/storefront-data-hooks/use-login'
+import useLogin from '@framework/use-login'
 import { useUI } from '@components/ui/context'
 import { validate } from 'email-validator'
 

components/auth/SignUpView.tsx

@@ -3,7 +3,7 @@ import { validate } from 'email-validator'
 import { Info } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import { Logo, Button, Input } from '@components/ui'
-import useSignup from '@bigcommerce/storefront-data-hooks/use-signup'
+import useSignup from '@framework/use-signup'
 
 interface Props {}
 

components/cart/CartItem/CartItem.tsx

@@ -3,9 +3,9 @@ import cn from 'classnames'
 import Image from 'next/image'
 import Link from 'next/link'
 import { Trash, Plus, Minus } from '@components/icons'
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
-import useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'
-import useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'
+import usePrice from '@framework/use-price'
+import useUpdateItem from '@framework/cart/use-update-item'
+import useRemoveItem from '@framework/cart/use-remove-item'
 import s from './CartItem.module.css'
 
 const CartItem = ({

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -4,8 +4,8 @@ import { UserNav } from '@components/common'
 import { Button } from '@components/ui'
 import { Bag, Cross, Check } from '@components/icons'
 import { useUI } from '@components/ui/context'
-import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/use-price'
 import CartItem from '../CartItem'
 import s from './CartSidebarView.module.css'
 

components/common/Footer/Footer.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import type { Page } from '@framework/api/operations/get-all-pages'
 import getSlug from '@lib/get-slug'
 import { Github, Vercel } from '@components/icons'
 import { Logo, Container } from '@components/ui'
@@ -101,8 +101,16 @@ const Footer: FC<Props> = ({ className, pages }) => {
           </div>
           <div className="flex items-center text-primary">
             <span className="text-primary">Crafted by</span>
-            <a href="https://vercel.com" aria-label="Vercel.com Link" target="_blank" className="text-primary">
-              <Vercel className="inline-block h-6 ml-4 text-primary" alt="Vercel.com Logo" />
+            <a
+              href="https://vercel.com"
+              aria-label="Vercel.com Link"
+              target="_blank"
+              className="text-primary"
+            >
+              <Vercel
+                className="inline-block h-6 ml-4 text-primary"
+                alt="Vercel.com Logo"
+              />
             </a>
           </div>
         </div>

components/common/Layout/Layout.tsx

@@ -9,8 +9,8 @@ import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
 import { CartSidebarView } from '@components/cart'
 
-import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
-import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import { CommerceProvider } from '@framework'
+import type { Page } from '@framework/api/operations/get-all-pages'
 
 const Loading = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">

components/common/UserNav/DropdownMenu.tsx

@@ -15,7 +15,7 @@ import {
   clearAllBodyScrollLocks,
 } from 'body-scroll-lock'
 
-import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
+import useLogout from '@framework/use-logout'
 
 interface DropdownMenuProps {
   open?: boolean

components/common/UserNav/UserNav.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react'
 import Link from 'next/link'
 import cn from 'classnames'
-import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
-import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
+import useCart from '@framework/cart/use-cart'
+import useCustomer from '@framework/use-customer'
 import { Heart, Bag } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'

components/product/ProductCard/ProductCard.tsx

@@ -5,8 +5,8 @@ import type { FC } from 'react'
 import s from './ProductCard.module.css'
 import WishlistButton from '@components/wishlist/WishlistButton'
 
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
-import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
+import usePrice from '@framework/use-price'
+import type { ProductNode } from '@framework/api/operations/get-all-products'
 
 interface Props {
   className?: string

components/product/ProductView/ProductView.tsx

@@ -8,9 +8,9 @@ import { useUI } from '@components/ui/context'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container, Text } from '@components/ui'
 
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
-import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
-import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
+import usePrice from '@framework/use-price'
+import useAddItem from '@framework/cart/use-add-item'
+import type { ProductNode } from '@framework/api/operations/get-product'
 import {
   getCurrentVariant,
   getProductOptions,

components/product/helpers.ts

@@ -1,4 +1,4 @@
-import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
+import type { ProductNode } from '@framework/api/operations/get-product'
 
 export type SelectedOptions = {
   size: string | null

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -1,10 +1,10 @@
 import React, { FC, useState } from 'react'
 import cn from 'classnames'
-import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
-import useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'
-import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
-import useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'
-import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
+import type { ProductNode } from '@framework/api/operations/get-all-products'
+import useAddItem from '@framework/wishlist/use-add-item'
+import useRemoveItem from '@framework/wishlist/use-remove-item'
+import useWishlist from '@framework/wishlist/use-wishlist'
+import useCustomer from '@framework/use-customer'
 import { Heart } from '@components/icons'
 import { useUI } from '@components/ui/context'
 

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -2,10 +2,10 @@ import { FC, useState } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
 import Image from 'next/image'
-import type { WishlistItem } from '@bigcommerce/storefront-data-hooks/api/wishlist'
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
-import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
-import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
+import type { WishlistItem } from '@framework/api/wishlist'
+import usePrice from '@framework/use-price'
+import useRemoveItem from '@framework/wishlist/use-remove-item'
+import useAddItem from '@framework/cart/use-add-item'
 import { useUI } from '@components/ui/context'
 import { Button, Text } from '@components/ui'
 import { Trash } from '@components/icons'

package.json

@@ -6,7 +6,9 @@
     "build": "next build",
     "start": "next start",
     "analyze": "BUNDLE_ANALYZE=both yarn build",
-    "find:unused": "next-unused"
+    "find:unused": "next-unused",
+    "generate": "graphql-codegen",
+    "generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js"
   },
   "prettier": {
     "semi": false,
@@ -42,7 +44,6 @@
     ]
   },
   "dependencies": {
-    "@bigcommerce/storefront-data-hooks": "^1.0.2",
     "@reach/portal": "^0.11.2",
     "@tailwindcss/ui": "^0.6.2",
     "@vercel/fetch": "^6.1.0",

pages/[...pages].tsx

@@ -7,9 +7,9 @@ import getSlug from '@lib/get-slug'
 import { missingLocaleInPages } from '@lib/usage-warns'
 import { Layout } from '@components/common'
 import { Text } from '@components/ui'
-import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
-import getPage from '@bigcommerce/storefront-data-hooks/api/operations/get-page'
-import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import { getConfig } from '@framework/api'
+import getPage from '@framework/api/operations/get-page'
+import getAllPages from '@framework/api/operations/get-all-pages'
 import { defatultPageProps } from '@lib/defaults'
 
 export async function getStaticProps({

pages/api/bigcommerce/cart.ts

@@ -1,3 +1,3 @@
-import cartApi from '@bigcommerce/storefront-data-hooks/api/cart'
+import cartApi from '@framework/api/cart'
 
 export default cartApi()

pages/api/bigcommerce/catalog/products.ts

@@ -1,3 +1,3 @@
-import catalogProductsApi from '@bigcommerce/storefront-data-hooks/api/catalog/products'
+import catalogProductsApi from '@framework/api/catalog/products'
 
 export default catalogProductsApi()

pages/api/bigcommerce/checkout.ts

@@ -1,3 +1,3 @@
-import checkoutApi from '@bigcommerce/storefront-data-hooks/api/checkout'
+import checkoutApi from '@framework/api/checkout'
 
 export default checkoutApi()

pages/api/bigcommerce/customers/index.ts

@@ -1,3 +1,3 @@
-import customersApi from '@bigcommerce/storefront-data-hooks/api/customers'
+import customersApi from '@framework/api/customers'
 
 export default customersApi()

pages/api/bigcommerce/customers/login.ts

@@ -1,3 +1,3 @@
-import loginApi from '@bigcommerce/storefront-data-hooks/api/customers/login'
+import loginApi from '@framework/api/customers/login'
 
 export default loginApi()

pages/api/bigcommerce/customers/logout.ts

@@ -1,3 +1,3 @@
-import logoutApi from '@bigcommerce/storefront-data-hooks/api/customers/logout'
+import logoutApi from '@framework/api/customers/logout'
 
 export default logoutApi()

pages/api/bigcommerce/customers/signup.ts

@@ -1,3 +1,3 @@
-import signupApi from '@bigcommerce/storefront-data-hooks/api/customers/signup'
+import signupApi from '@framework/api/customers/signup'
 
 export default signupApi()

pages/api/bigcommerce/wishlist.ts

@@ -1,3 +1,3 @@
-import wishlistApi from '@bigcommerce/storefront-data-hooks/api/wishlist'
+import wishlistApi from '@framework/api/wishlist'
 
 export default wishlistApi()

pages/blog.tsx

@@ -1,6 +1,6 @@
 import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
-import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import { getConfig } from '@framework/api'
+import getAllPages from '@framework/api/operations/get-all-pages'
 import { Layout } from '@components/common'
 import { Container } from '@components/ui'
 

pages/cart.tsx

@@ -1,8 +1,8 @@
 import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
-import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
-import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
+import { getConfig } from '@framework/api'
+import getAllPages from '@framework/api/operations/get-all-pages'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/use-price'
 import { Layout } from '@components/common'
 import { Button } from '@components/ui'
 import { Bag, Cross, Check } from '@components/icons'

pages/index.tsx

@@ -5,10 +5,10 @@ import { Grid, Marquee, Hero } from '@components/ui'
 import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
 import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 
-import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
-import getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
-import getSiteInfo from '@bigcommerce/storefront-data-hooks/api/operations/get-site-info'
-import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import { getConfig } from '@framework/api'
+import getAllProducts from '@framework/api/operations/get-all-products'
+import getSiteInfo from '@framework/api/operations/get-site-info'
+import getAllPages from '@framework/api/operations/get-all-pages'
 
 export async function getStaticProps({
   preview,

pages/orders.tsx

@@ -1,6 +1,6 @@
 import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
-import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import { getConfig } from '@framework/api'
+import getAllPages from '@framework/api/operations/get-all-pages'
 import { Layout } from '@components/common'
 import { Container, Text } from '@components/ui'
 import { Bag } from '@components/icons'

pages/product/[slug].tsx

@@ -9,10 +9,10 @@ import { ProductView } from '@components/product'
 
 // Data
 
-import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
-import getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
-import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
-import getAllProductPaths from '@bigcommerce/storefront-data-hooks/api/operations/get-all-product-paths'
+import { getConfig } from '@framework/api'
+import getProduct from '@framework/api/operations/get-product'
+import getAllPages from '@framework/api/operations/get-all-pages'
+import getAllProductPaths from '@framework/api/operations/get-all-product-paths'
 
 export async function getStaticProps({
   params,

pages/profile.tsx

@@ -1,7 +1,7 @@
 import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
-import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
-import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
+import { getConfig } from '@framework/api'
+import getAllPages from '@framework/api/operations/get-all-pages'
+import useCustomer from '@framework/use-customer'
 import { Layout } from '@components/common'
 import { Container, Text } from '@components/ui'
 

pages/search.tsx

@@ -3,10 +3,10 @@ import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import Link from 'next/link'
 import { useState } from 'react'
 import { useRouter } from 'next/router'
-import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
-import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
-import getSiteInfo from '@bigcommerce/storefront-data-hooks/api/operations/get-site-info'
-import useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'
+import { getConfig } from '@framework/api'
+import getAllPages from '@framework/api/operations/get-all-pages'
+import getSiteInfo from '@framework/api/operations/get-site-info'
+import useSearch from '@framework/products/use-search'
 import { Layout } from '@components/common'
 import { ProductCard } from '@components/product'
 import { Container, Grid, Skeleton } from '@components/ui'

pages/wishlist.tsx

@@ -1,7 +1,7 @@
 import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
-import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
-import useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'
+import { getConfig } from '@framework/api'
+import getAllPages from '@framework/api/operations/get-all-pages'
+import useWishlist from '@framework/wishlist/use-wishlist'
 import { Layout } from '@components/common'
 import { Heart } from '@components/icons'
 import { Text, Container } from '@components/ui'

tsconfig.json

@@ -21,7 +21,9 @@
       "@components/*": ["components/*"],
       "@utils/*": ["utils/*"],
       "@commerce/*": ["framework/commerce/*"],
-      "@framework/*": ["framework/bigcommerce/*"]
+      "@commerce": ["framework/commerce"],
+      "@framework/*": ["framework/bigcommerce/*"],
+      "@framework": ["framework/bigcommerce"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],