diff --git a/.gitignore b/.gitignore index 640afa9c9..bcbf6047a 100644 --- a/.gitignore +++ b/.gitignore @@ -32,6 +32,3 @@ yarn-error.log* # vercel .vercel - -# dev -framework diff --git a/README.md b/README.md index 540c8500a..935c433cf 100644 --- a/README.md +++ b/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
@@ -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.
-
-I have issues with BigCommerce data hooks -
-Report issue with Data Hooks here: https://github.com/bigcommerce/storefront-data-hooks -
- - - - ## Contribute Our commitment to Open Source can be found [here](https://vercel.com/oss). @@ -96,10 +86,14 @@ Our commitment to Open Source can be found [here](https://vercel.com/oss). * **Next.js Commerce** should have a completely data **agnostic** UI * **Aware of schema**: should ship with the right data schemas and types. -* All providers should return the right datatypes/schemas to blend correctly with Next.js Commerce. +* All providers should return the right data types and schemas to blend correctly with Next.js Commerce. +* `@framework` will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. _Note that the same applies for recipes using a CMS + an ecommerce provider._ + +There is a `framework` folder in the root folder that will contain multiple ecommerce providers. + +Additionally, we need to ensure feature parity (not all providers have e.g. wishlist) we will also have to build a feature API to disable/enable features in the UI. + +People actively working on this project: @okbel & @lfades. -Here are our efforts towards achieving these goals. https://github.com/vercel/commerce-framework -We plan on having some ecommerce providers in the repo, but that’s not the goal. Each provider should have its own standarized data hooks. -`@framework` will be the alias utilized and it will map to the ecommerce provider of preference. diff --git a/assets/chrome-bug.css b/assets/chrome-bug.css new file mode 100644 index 000000000..245ec8f09 --- /dev/null +++ b/assets/chrome-bug.css @@ -0,0 +1,12 @@ +/** + * Chrome has a bug with transitions on load since 2012! + * + * To prevent a "pop" of content, you have to disable all transitions until + * the page is done loading. + * + * https://lab.laukstein.com/bug/input + * https://twitter.com/timer150/status/1345217126680899584 + */ +body.loading * { + transition: none !important; +} diff --git a/codegen.json b/codegen.json new file mode 100644 index 000000000..1f14e88ac --- /dev/null +++ b/codegen.json @@ -0,0 +1,27 @@ +{ + "schema": { + "https://buybutton.store/graphql": { + "headers": { + "Authorization": "Bearer xzy" + } + } + }, + "documents": [ + { + "./framework/bigcommerce/api/**/*.ts": { + "noRequire": true + } + } + ], + "generates": { + "./framework/bigcommerce/schema.d.ts": { + "plugins": ["typescript", "typescript-operations"] + }, + "./framework/bigcommerce/schema.graphql": { + "plugins": ["schema-ast"] + } + }, + "hooks": { + "afterAllFileWrite": ["prettier --write"] + } +} diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx index 8aaa0998e..9102a53c6 100644 --- a/components/auth/LoginView.tsx +++ b/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' diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx index 65fa57833..c49637d47 100644 --- a/components/auth/SignUpView.tsx +++ b/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 {} diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 5dc5f9967..283f3fa40 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/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 = ({ diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index b35fdb18b..eb76c5da5 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/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' @@ -94,7 +94,7 @@ const CartSidebarView: FC = () => { My Cart