{"_id":"@chungwu/bigcommerce-storefront-data-hooks","_rev":"2-a25ec15bcab81751858cc06b425ab6ad","name":"@chungwu/bigcommerce-storefront-data-hooks","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.2":{"name":"@chungwu/bigcommerce-storefront-data-hooks","version":"1.0.2","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","prepublish":"npm run build","generate":"graphql-codegen","generate:definitions":"node src/scripts/generate-definitions.js"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"@vercel/fetch":"6.1.0","cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^1.19.0","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/node":"^14.14.3","@types/react":"^16.9.53","graphql":"^15.4.0","next":"^9.5.5","prettier":"^2.1.2","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"gitHead":"55b596003b936f78e880124aa288840e94138882","description":"Table of Contents =================","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"@chungwu/bigcommerce-storefront-data-hooks@1.0.2","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-DwbOXPWVxLImKRP47aDV/hHMEieaD8SLZ8zzeL5D8fC/kacZ/Y0KmZAITVjvstQ5/u/DAJ4qyxAAgWspkXb3Zg==","shasum":"3c06564165f8dc4c3d9c8f81ea5b23d1dbe75596","tarball":"https://registry.npmjs.org/@chungwu/bigcommerce-storefront-data-hooks/-/bigcommerce-storefront-data-hooks-1.0.2.tgz","fileCount":171,"unpackedSize":499186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrYRJCRA9TVsSAnZWagAA4EMQAJ83qV/gcGIPFFJ7RBex\n9UpsT2tcAZRfIl9acmIJEWg1GbG40033cYINDZ+VR6eFMfvh5cH5GscWFbQY\nOUlkjKCfxUf1baGsmt6qUzM7JIq5nM4X8YnoERMynrT1VCv1Y6YTLggJE2cl\nCakbDhKzd7fSP5D/XA54f7exSp/kke8feh8tAzfiV61LdUsAeTLxSjiwOnBq\nIrGKOcaq4VXU/o0ywBJnC1lp0UTaMudf0kAaQ0COyfInR2Y8VNc7A/1KL/mE\nYpKpwY7CNcs55+R89Rv0v0742K78wxuR8cy1qmL9pUtb30A53pvUEGErSqXh\n53nrqI6ZiPotiBU/998AGbEvNbBy5qhJuPbCUV+oaJzkypAftJH1/Ty8OPkM\nenVrIxo3k6jg2IN+ORNaUgH7Zo/sldvObPTP2YakMQcl+s+6YGnf2V9J4GLh\nh/dTMzPROFm7l32yYKnT0/G2sdQBS71lfKSXQf1Z39Q4nBI3i3ibboEwImMt\n7B4GblrPd5kQ8KrSpHs8xRwHfKifXWxNiE9hYV1SQG5r5P+0rFnAqShLWO27\nVx4jxfnvBDjpZFOIK5SAVQeT2aXIwNXrAfwpmnQRxGaL9Wl3a0Otp/+rfUPn\nbp/AhwbPW6upOiA04Faw6bD4bmp3ri0TfVrbaQWvHWfYlwyT6EeKcKPTpb+Y\nFtdv\r\n=pKbI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtsWRWL0Gn7h8nL/JCrpecmdxIV7U9t0v58H1KMbXwUwIgRyWZzg8P6JUPU7SxtBioEG3QJ15Ufu3sp9QNvhG4PPY="}]},"_npmUser":{"name":"chungwu","email":"chungwu@gmail.com"},"directories":{},"maintainers":[{"name":"chungwu","email":"chungwu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bigcommerce-storefront-data-hooks_1.0.2_1605207113170_0.10372537730271225"},"_hasShrinkwrap":false},"1.0.3":{"name":"@chungwu/bigcommerce-storefront-data-hooks","version":"1.0.3","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"license":"MIT","scripts":{"clean":"rimraf *.js *.d.ts api cart commerce products scripts wishlist","build":"npm run clean && tsc && cp src/schema.d.ts schema.d.ts","prepublish":"npm run build","generate":"graphql-codegen","generate:definitions":"node src/scripts/generate-definitions.js"},"prettier":{"semi":false,"singleQuote":true},"dependencies":{"cookie":"0.4.1","js-cookie":"2.2.1","lodash.debounce":"4.0.8","swr":"0.3.6"},"devDependencies":{"@graphql-codegen/cli":"^1.19.0","@graphql-codegen/schema-ast":"^1.17.8","@graphql-codegen/typescript":"^1.17.11","@graphql-codegen/typescript-operations":"^1.17.8","@manifoldco/swagger-to-ts":"^2.1.0","@types/cookie":"^0.4.0","@types/js-cookie":"^2.2.6","@types/lodash.debounce":"^4.0.6","@types/node":"^14.14.3","@types/react":"^16.9.53","graphql":"^15.4.0","next":"^9.5.5","prettier":"^2.1.2","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":">=17"},"gitHead":"092d2fc709d311c78f640cdc3b8d4b98cc851a89","description":"Table of Contents =================","bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","_id":"@chungwu/bigcommerce-storefront-data-hooks@1.0.3","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-b0PX/NIYLi9X5WERzZoHXIrr7p90428VK+DYc0Jx0HMUdHxmelrISxLRqaf/1fOWyXTTFOAGUjCX/sdvtuouIw==","shasum":"cc47b1d4227e391097b35b8845bcbc2761179c8d","tarball":"https://registry.npmjs.org/@chungwu/bigcommerce-storefront-data-hooks/-/bigcommerce-storefront-data-hooks-1.0.3.tgz","fileCount":171,"unpackedSize":498683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrcm2CRA9TVsSAnZWagAAJrEP/RKczMew+dx3IXUlTTkp\nLiRZ/Be3KIE1SmdjTK8gcFZygAXmoy4wjsOJJ9R4l4gHSo5bSesW5MccRlNW\nMiut7PIKFLcdbMVTyUyRuX6ix1RJUlpdH/GdsZSdmO+cOrKXzKPnH1ftCz5u\ngXaHFQviQWokiGf8T1kHNxN+ufQyYqhoCj5mpV8fDW7R5o9tD7VenHw+glV0\nqBgGTBOE1h9mF90/qQMV6SEXmZJh8+HM2QI0f0pvLKREUZIfMoIE/OwGT+fI\nmJi+ewP+tg1EUe7Rbgk78PMSrl+xKj9ahzhtJS6u1AMYDblAU7eC6m5j/RFU\nMoNFyjdG9p1M0SuetkfPnR3rgL5ttjSm48RAMTfq4pJZQinthcVjLyq+zAp3\nADN8YkyYXdEwHqkMiwxCc42k9c/7u2RWWYAqS39JkIO41IlJ21FAmlODuvr+\nXOwZp8p885jB5TQ8wd1aS9ktaD2vD1+eWfq36e9MtqmvKrfI3vPU8I/UQJwc\nkqLZ82hHBaXr1HuEgWRPou1obaDUjwM9xXEkHbN36eVq0krBK11HeXMLvN7G\nGFbVoBwOHZy7uNIrRdJvwdv+/LpFabFYLnj7wE88eef5xJsPVSXY6qUVN2fc\n36FXU+5bm6iqaAJI4mhwRS+7nS/sMVkN2qz+VkdH7sQxnpkbt/7Baj//zU9W\nIaeD\r\n=ULsg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo+veusb6a0c6IT2sGrf9vFgcKckM1XD/DbwCyOFXqbAIgBU6E3lGdE1lJ6m5eug0KcOz5bKdKVauyWanDC871J48="}]},"_npmUser":{"name":"chungwu","email":"chungwu@gmail.com"},"directories":{},"maintainers":[{"name":"chungwu","email":"chungwu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bigcommerce-storefront-data-hooks_1.0.3_1605224885572_0.9556715901481192"},"_hasShrinkwrap":false}},"time":{"created":"2020-11-12T18:51:53.128Z","1.0.2":"2020-11-12T18:51:53.400Z","modified":"2022-04-04T22:56:56.219Z","1.0.3":"2020-11-12T23:48:05.766Z"},"maintainers":[{"name":"chungwu","email":"chungwu@gmail.com"}],"description":"Table of Contents =================","homepage":"https://github.com/bigcommerce/storefront-data-hooks#readme","repository":{"type":"git","url":"git+ssh://git@github.com/bigcommerce/storefront-data-hooks.git"},"bugs":{"url":"https://github.com/bigcommerce/storefront-data-hooks/issues"},"license":"MIT","readme":"\nTable of Contents\n=================\n\n   * [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)\n      * [Installation](#installation)\n      * [General Usage](#general-usage)\n         * [CommerceProvider](#commerceprovider)\n         * [useLogin hook](#uselogin-hook)\n         * [useLogout](#uselogout)\n         * [useCustomer](#usecustomer)\n         * [useSignup](#usesignup)\n         * [usePrice](#useprice)\n      * [Cart Hooks](#cart-hooks)\n         * [useCart](#usecart)\n         * [useAddItem](#useadditem)\n         * [useUpdateItem](#useupdateitem)\n         * [useRemoveItem](#useremoveitem)\n      * [Wishlist Hooks](#wishlist-hooks)\n      * [Product Hooks and API](#product-hooks-and-api)\n         * [useSearch](#usesearch)\n         * [getAllProducts](#getallproducts)\n         * [getProduct](#getproduct)\n      * [More](#more)\n\n# BigCommerce Storefront Data Hooks\n\n> This project is under active development, new features and updates will be continuously added over time\n\nUI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:\n\n- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions\n- Code splitted data fetching methods for initial data population and static generation of content\n- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications\n\n## Installation\n\nTo install:\n\n```\nyarn add storefront-data-hooks\n```\n\nAfter install, the first thing you do is: <b>set your environment variables</b> in `.env.local`\n\n```sh\nBIGCOMMERCE_STOREFRONT_API_URL=<>\nBIGCOMMERCE_STOREFRONT_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_URL=<>\nBIGCOMMERCE_STORE_API_TOKEN=<>\nBIGCOMMERCE_STORE_API_CLIENT_ID=<>\n```\n\n## General Usage\n\n### CommerceProvider\n\nThis component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.\n\n```\n...\nimport { CommerceProvider } from '@bigcommerce/storefront-data-hooks'\n\nconst App = ({ locale = 'en-US', children }) => {\n  return (<CommerceProvider locale={locale}>\n    {children}\n  </CommerceProvider>);\n};\n...\n```\n\n### useLogin hook\n\nHook for bigcommerce user login functionality, returns `login` function to handle user login.\n\n```\n...\nimport useLogin from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst LoginView = () => {\n  const login = useLogin()\n\n  const handleLogin = async () => {\n    await login({\n      email,\n      password,\n    })\n  }\n\n  return (\n    <form onSubmit={handleLogin}>\n      {children}\n    </form>\n  );\n}\n...\n```\n\n### useLogout\n\nHook to logout user.\n\n```\n...\nimport useLogout from '@bigcommerce/storefront-data-hooks/use-logout'\n\nconst LogoutLink = () => {\n  const logout = useLogout()\n  return (\n    <a onClick={() => logout()}>\n      Logout\n    </a>\n  )\n}\n```\n\n### useCustomer\n\nHook for getting logged in customer data, and fetching customer info.\n\n```\n...\nimport useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'\n...\n\nconst Profile = () => {\n  const { data } = useCustomer();\n\n  if (!data) {\n    return null\n  }\n\n  return (\n    <div>Hello, {data.firstName}</div>\n  );\n}\n```\n\n### useSignup\n\nHook for bigcommerce user signup, returns `signup` function to handle user signups.\n\n```\n...\nimport useSignup from '@bigcommerce/storefront-data-hooks/use-login'\n\nconst SignupView = () => {\n  const signup = useSignup()\n\n  const handleSignup = async () => {\n    await signup({\n      email,\n      firstName,\n      lastName,\n      password,\n    })\n  }\n\n  return (\n    <form onSubmit={handleSignup}>\n      {children}\n    </form>\n  );\n}\n...\n```\n\n### usePrice\n\nHelper hook to format price according to commerce locale, and return discount if available.\n\n```\nimport usePrice from '@bigcommerce/storefront-data-hooks/use-price'\n...\n  const { price, discount, basePrice } = usePrice(\n    data && {\n      amount: data.cart_amount,\n      currencyCode: data.currency.code,\n    }\n  )\n...\n```\n\n## Cart Hooks\n\n### useCart\n\nReturns the current cart data for use\n\n```\n...\nimport useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'\n\nconst countItem = (count: number, item: any) => count + item.quantity\nconst countItems = (count: number, items: any[]) =>\n  items.reduce(countItem, count)\n\nconst CartNumber = () => {\n  const { data } = useCart()\n  const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)\n\n  return itemsCount > 0 && <span>{itemsCount}</span>\n}\n```\n\n### useAddItem\n\n```\n...\nimport useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'\n\nconst AddToCartButton = ({ productId, variantId }) => {\n  const addItem = useAddItem()\n\n  const addToCart = async () => {\n    await addItem({\n      productId,\n      variantId,\n    })\n  }\n\n  return <button onClick={addToCart}>Add To Cart</button>\n}\n...\n```\n\n### useUpdateItem\n\n```\n...\nimport useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'\n\nconst CartItem = ({ item }) => {\n  const [quantity, setQuantity] = useState(item.quantity)\n  const updateItem = useUpdateItem(item)\n  const updateQuantity = async (e) => {\n    const val = e.target.value\n    await updateItem({ quantity: val })\n  }\n\n  return <input\n    type=\"number\"\n    max={99}\n    min={0}\n    value={quantity}\n    onChange={updateQuantity}\n  />\n}\n...\n```\n\n### useRemoveItem\n\nProvided with a cartItemId, will remove an item from the cart:\n\n```\n...\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'\n\nconst RemoveButton = ({ item }) => {\n  const removeItem = useRemoveItem()\n  const handleRemove = async () => {\n    await removeItem({ id: item.id })\n  }\n\n  return <button onClick={handleRemove}>Remove</button>\n}\n...\n```\n\n## Wishlist Hooks\n\nWishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.\n\n```\nimport useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'\nimport useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'\nimport useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'\n\nconst WishlistButton = ({\n  productId,\n  variant,\n}) => {\n  const addItem = useAddItem()\n  const removeItem = useRemoveItem()\n  const { data } = useWishlist()\n  const { data: customer } = useCustomer()\n  const itemInWishlist = data?.items?.find(\n    (item) =>\n      item.product_id === productId &&\n      item.variant_id === variant?.node.entityId\n  )\n\n  const handleWishlistChange = async (e: any) => {\n    e.preventDefault()\n\n    if (!customer) {\n      return\n    }\n\n    if (itemInWishlist) {\n      await removeItem({ id: itemInWishlist.id! })\n    } else {\n      await addItem({\n        productId,\n        variantId: variant?.node.entityId!,\n      })\n    }\n  }\n\n  return (\n    <button onClick={handleWishlistChange}>\n      <Heart fill={itemInWishlist ? 'var(--pink)' : 'none'} />\n    </button>\n  )\n}\n```\n\n## Product Hooks and API\n\n### useSearch\n\n`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string.\n\n```\n...\nimport useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'\n\n\nconst SearchPage = ({ searchString, category, brand, sortStr }) => {\n  const { data } = useSearch({\n    search: searchString || '',\n    categoryId: category?.entityId,\n    brandId: brand?.entityId,\n    sort: sortStr || '',\n  })\n\n  return (<Grid layout=\"normal\">\n    {data.products.map(({ node }) => (\n\t  <ProductCard key={node.path} product={node} />\n    ))}\n  </Grid>)\n}\n```\n\n### getAllProducts\n\nAPI function to retrieve a product list.\n\n```\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'\n\nconst { products } = await getAllProducts({\n  variables: { field: 'featuredProducts', first: 6 },\n  config,\n  preview,\n})\n```\n\n### getProduct\n\nAPI product to retrieve a single product when provided with the product\nslug string.\n\n```\nimport { getConfig } from '@bigcommerce/storefront-data-hooks/api'\nimport getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'\n\nconst { product } = await getProduct({\n  variables: { slug },\n  config,\n  preview,\n})\n```\n\n## More\n\nFeel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))\n","readmeFilename":"README.md"}