{"_id":"unsafe-bc-react-components","_rev":"85-466ea53821788d25be45a315efcf2873","name":"unsafe-bc-react-components","dist-tags":{"beta":"0.0.8-beta.0","latest":"0.0.7"},"versions":{"0.0.1-beta.0":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.0","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-flatpickr":"^3.10.0","react-responsive-carousel":"^3.2.18","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"gitHead":"613a7cced17422f1924ec378f411a29ecb1e6ead","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-XkIpG5AgNBwRp47Qq/niyCrK0FyL9hgI2jV0m4oPThjslZJMbO3PldpJCWAVnnzN1/VWKXegQ8LYCJ8/ofuxBQ==","shasum":"8110e1e0a59cfa22fbabba2f51cdfd80b262ac90","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.0.tgz","fileCount":114,"unpackedSize":7656178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk9+QCRA9TVsSAnZWagAAEa0QAKCEHwWsdj/kLsIzFVHJ\nQ4V1kZwLPzzvuejf9hySzQKVaD+dVvLoHS+3LYDVxji2DSpEe1WMcTROUd1/\ncxTr1KMNwcAGGgiHybnwbcugNnMtfGMVlDlcnhOC29ROzwRHJPFfjB5cOgf4\nNyQLGOMNarzeIyLkkS2CpjeuaYXdipbT/S4XylROzEXCu4jh2s8NbPXNEnP7\nKDcEmTWWFlTd4Dx7YY/gI/FK9bURnT3oSG359A8PD50ilisSSZZqPmWBnqpN\n59eEsdDJxb3zDrqtShfMUieJP/GPgb7Pg03o4cddQ7nKFwdvwNVGiShP6QVY\nWJ2PC1l8LXH18yf9nethuXjm+EBLU0LHsEz6BCurvsNiEvVbhHrvimaByyXA\n1Qts7qdbWseNqrQlNRSP0IZungkjnAQxeLcn2CybE/1PWOTzEj6vQT4pmSWv\nmIhqN+zAZP5zBV/4X4yuidWRA1Z1ohqzTsq5h3kx3ZpCEAEdvxGxMY16g+5H\nYSpwDvLIDPwei+VpfuLpc8w6FEcLwI2tbIopprwzP6gAYzv5Osg13nEKZpC1\nupwSXdq0SRSCZjVePUJxcPPMwH/UubakwTVILAr08jr5qoTf+5QDv5b9Y6vB\nG/5yFVf1ZOcPREXHDDYeyfZxZ+pbWubqdpIh+1Ddn/JSiWf+cWxLd3AEmGu4\nVw8Q\r\n=ktlV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRkjKiLtf2wEHBZy3Ho0D8G+dXrr3Xj7fqNdD86hP6PQIhAI5pHBMBZhQgiqPIEXKRNpgzIPBpmdHulKntKt/R6NKD"}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.0_1620303760159_0.42443066332753854"},"_hasShrinkwrap":false},"0.0.1-beta.1":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.1","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-flatpickr":"^3.10.0","react-responsive-carousel":"^3.2.18","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"gitHead":"45f094220535d2962f179a0698effb452d59ac89","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### ShippingAddresses\nGiven a list of addresses to display, the `ShippingAddresses` component\niterates over the list, displays them using passed in\n`AddressComponent` prop, which defaults to the `AddressCard` component\ndescribed below, and provides them with any passed in styles.  `styles`\nobject can contain styles for individual addresses (see below) and\n`addresses` for styling container.\n\n**Props:**\n```\naddresses: AddressType[]\nAddressComponent: any\nstyles: any\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nstyles: any\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order, and a list\nof the products pertaining to the order.\n\n**Props:**\n```\norder: Order\nproducts: OrderProduct[]\nonOrderAction?: (action: string, order: Order, product?: OrderProduct) => void\nproductComponent?: React.FunctionComponent\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-6HmEXiuURdlkgTgYS63RAqLb04lVijFCAPzWMsrN8+wVpE8d9QB7Y/BskkSboxPyRc/vxKrKptRSCMkbw6MGRA==","shasum":"7e133d0236fb06e95396ee05e6f1a0da3ad30093","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.1.tgz","fileCount":114,"unpackedSize":8075874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCrYCRA9TVsSAnZWagAA3nEQAJOleGVWwMf9/jLSCYUu\nbuE/0D4/NZddJiC54Typ//ZbxLTM385Kt3xidG/TkHn8f7rUnqUUE0m412Nh\nqZUNLmsk31gF7RQCuIUm//thV3Ueu8obTKT1oWIPP4axcALytIkj4cs/Cbgu\npO3ih9G+/RGdxbHq6Dz/I9Z7yadFch7b7laR1JUef5RHZM5vHMDiRgiVyJqu\n5G9vhVEvrFx+52xyuDeqFXBmadqbreS40+8SMjHzpUCcZAX6/fngq0Q56Vyg\nGztzkKSnZIHiscwsQXCCmNcvKE/CWAklBswO3EWKKXguUN12/LpcfcI7CaL8\niR60/LNTmf/TuIor4ggaUimzvZutECL1/UoUsWucQDe43oyrSgOcbhscAGjj\nB4i5/HPQX+Drz2PTvPowJLz62mcmdbSkIemfYRMCUKKxS2KNGkskOxWzyI9j\nPzOf6v2f7yOOgC5Hzr6C4KM2RlWmpGka0RVUbYyBPbkyUAnaJWyNRAdo5neu\nZbmNCV95WaoC+tGCwtVCq0ys63vDHKdXIPkMomGLszYMfkwsXooU3eR9uajS\n+0HEcVcK+66rQQO14xua7fRLQ79plvMVZFoVFpWDL7tezBqyTSoi1L5wz7eO\nRtpMvA5xf/1y+9Ozfya1Z4daguRl9mECPCDWnWNRPa3id5xO4PPJB47bEpbY\n3fyS\r\n=PgW8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHKy2OY6qsfzEWFEDtJ/ehXqT31jQ0V02JvX1/B5zyeqAiEAgeeY9Z6nuk43jK069dkUsWd+fzQtGI0BGENc6A+CnuY="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.1_1620323031369_0.5992848843878649"},"_hasShrinkwrap":false},"0.0.1-beta.2":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.2","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","react-responsive-carousel":"^3.2.18","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### ShippingAddresses\nGiven a list of addresses to display, the `ShippingAddresses` component\niterates over the list, displays them using passed in\n`AddressComponent` prop, which defaults to the `AddressCard` component\ndescribed below, and provides them with any passed in styles.  `styles`\nobject can contain styles for individual addresses (see below) and\n`addresses` for styling container.\n\n**Props:**\n```\naddresses: AddressType[]\nAddressComponent: any\nstyles: any\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nstyles: any\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order, and a list\nof the products pertaining to the order.\n\n**Props:**\n```\norder: Order\nproducts: OrderProduct[]\nonOrderAction?: (action: string, order: Order, product?: OrderProduct) => void\nproductComponent?: React.FunctionComponent\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"45f094220535d2962f179a0698effb452d59ac89","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-glhAnMRB1i7uXpsFX8uE8z6ONDdJ4EmG9mQgupv0IoGPyHDBgFAQ4UyNJhFFhLnSXvJkWU9Efl38ZEJvVFK76w==","shasum":"d54a6324c8b7f95ac19a95b594f63ead4d934755","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.2.tgz","fileCount":117,"unpackedSize":7919132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmPf2CRA9TVsSAnZWagAA67QP+wcp6JnsIJC9HHjdnKGo\ng6IqqTz+jHRmQZuwhKDPbdy+3nTXcCcpeNbMgIJ34jQFUj6c6lIMnkbF9Oy9\nsqT4kn1f5yO/qR0F3CSJLZ35Juc9yMX9x9fXCT6hG/tep3Z1vDt2ApHIZmUF\n0FHTyeZ5C22oJCqtOfRxZgvSQMI4UQS8rEANZr9pgXJbfzHPjaxsm2adWFBg\nPs4zJkuHpbv59DcTZa06TvnHsTsssdIeyKKth1efL3XoUAilXyR4DtrJRotQ\nYGewQq084Fr/xrQaLOuOVCKYqBt0/P2z5zC0UVgdtBBhc/mzA9HDadbzSAP6\nDMRRLo6xWbQCOuXT/oED2eK80cTu/u/DvjTc1FAG/GHQuhjbSzykdPL38YVx\naIbLMbBJApbOZ5cZtaMYrrT8VR5w65A+DPdybjVA/vhDKMZoZJE/fslChYpY\nQa77UguGj+buA9xOfO1/IKT3OW/hbn5YV4rmFK0v4b+1lf0XsB+VGcvZyNgT\nnHfpwPF9/ZCal+NPtdmiKMrZqjGe2+r9P+67wH1SFPRXg5p6RRzKNnd8xMe2\nhnjZRMOHG44DUT0zRLFmIdNnrufDcAphcB3impYmVWdJt5QNWwPHohOLIMaH\nDsKQ7LG+9NvQlmICfqJDM+ekRLMb/tOFXnZzad3azU7PXDbKg1VxQ8KaBAvR\nj+z0\r\n=+Khs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHoy/YZjgreV5LjSIZ6QiMH6sBYTS7zXN8NkUypsKyt+AiB2jmRwRi1V+9dZHKwQSzF83UI0O0KDdvHAGAzuXcXAuA=="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.2_1620637685622_0.6166317393836951"},"_hasShrinkwrap":false},"0.0.1-beta.3":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.3","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","react-responsive-carousel":"^3.2.18","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### ShippingAddresses\nGiven a list of addresses to display, the `ShippingAddresses` component\niterates over the list, displays them using passed in\n`AddressComponent` prop, which defaults to the `AddressCard` component\ndescribed below, and provides them with any passed in styles.  `styles`\nobject can contain styles for individual addresses (see below) and\n`addresses` for styling container.\n\n**Props:**\n```\naddresses: AddressType[]\nAddressComponent: any\nstyles: any\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nstyles: any\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order, and a list\nof the products pertaining to the order.\n\n**Props:**\n```\norder: Order\nproducts: OrderProduct[]\nonOrderAction?: (action: string, order: Order, product?: OrderProduct) => void\nproductComponent?: React.FunctionComponent\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"45f094220535d2962f179a0698effb452d59ac89","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.3","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-MSqwaBIwlCfuPkKpq1lYLhzzKQOmtEVi2JIKllVYUNtfJ8VYFF3ke1XCVZZ5R79Le9DYuEsjzwB4HYB10/PIlg==","shasum":"bb929b438d5175e5e1ca49decb07af414cb08408","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.3.tgz","fileCount":117,"unpackedSize":7930425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmPnNCRA9TVsSAnZWagAAj4QP/RYhsH72UInICAsnxRTx\nov2agfvNRtov2etPtvo1BttRF1U5x7ijnULAckmQV1EuWITdVpGJ0djXNS4l\nQqn9KNl5vo3zg5XerBarMN8p6OnFMdbc/ad+wJOcfmGmDi4qziazG4gBqgC1\n7VmcKe/B2jAQrLJ9pja1IaaF6j3M3fVZdd4Ihfkl4rAB2KKJ1SgJDbd/sosC\nsldzUcQHEGmsKRzuGzzsXlfvNNIBOie2YE+bV2U4kfXF8jl4FrEtYtKyrrE5\nwMOMcAq3FS0E6tMGGXX/gVEFNE5hHt2l/V5CUlkMwBaIc7Hoxi1nSFHn/Ae9\ntipr53xOK/WnelV+RNrVLIQT2UCc32QXUo5LcsWUyHhCC3hXudoIWbFRz4JZ\nOrlct8Gdro7Ata0jXd5E0QIK3Err7usTZnqaKGwrxTpoE0U2/M5H0PyqL15g\nMAnE7E6NIfbF/H+1UK1Z0VTkjejwpz+rpibGeQ2FGJPpIcxeyALytl5JTaxJ\nJ0ajH5yBpillPW0U7SrHinXHdzExF5G3BQZP6bJX4qQNA1xOxkGt3XsELPJa\nVulzUN1lX1rPP70ToWKG4qgnVanVH5iyyNKDRkiBRpwn3VO5/noWm5usY0h+\nBjiCGK0bMxdBYVq4MqQc1MNLkbpwPPfgtBvg7AbrlXuYqpsL/XNsbGbavZ3n\nhoid\r\n=SgJV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgezXHHEC6PuYdOPTa9MbvEkpZP5ultV5QUQjJPgabWQIhAIV+x6/UERl1ykiz+7EAKkbgglXoXPqDad8AQieq0gJl"}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.3_1620638157353_0.11647471749897376"},"_hasShrinkwrap":false},"0.0.1-beta.4":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.4","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"gitHead":"d80d8d29fcfe4eba8d3203c902bb3a0ab77e8336","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### ShippingAddresses\nGiven a list of addresses to display, the `ShippingAddresses` component\niterates over the list, displays them using passed in\n`AddressComponent` prop, which defaults to the `AddressCard` component\ndescribed below, and provides them with any passed in styles.  `styles`\nobject can contain styles for individual addresses (see below) and\n`addresses` for styling container.\n\n**Props:**\n```\naddresses: AddressType[]\nAddressComponent: any\nstyles: any\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nstyles: any\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.4","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-rk0uhkBj0GO0oDdunT4H9Uw2BrhL5rgkonzo7Xp5zsX+HdbPgdf7yexi5rNnfp+YwokCdu1xOB2mOsZun4/L5w==","shasum":"6290ad4959274af5e3243a8386e0cd75e56ce97d","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.4.tgz","fileCount":120,"unpackedSize":7955416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmn2OCRA9TVsSAnZWagAAMzIP/1PaZZKjHwBzpUGAGYsb\nNJxB+FHFP4szgXgaPBnAVaqZarXC1K5Ec9K/gpFFkWJ/LffZFd+1W96aqLJd\n/Dl4maCsrPH/Tn4v8Cx0JvfcSTo+x5iToJGd/P86qS44sZf/cfMGnpK4bN9h\nvvjTSXWrf1yDDqvvQ7Q+zlm6lijxLiLVVjW6JDESNFv1e1mOUkMwglQzilMw\npC2rF2q99bJImc/E4+PNt1GE1+m3NfA6TtbIA9e3uI4pP8k+npi/nT7PyCbY\nGrzhtDMUdr6JT+GlUzkRc9E/wk9+IwNGcU1grK5xU7fCJ2jvLbOV2meAAmpi\nxCgTMXZmsxXh+/BitFcJT449rZ2V0Y+gIfCRNe6tfblO8QeEglTeBsLIDd9O\ndQmSXHbCoNkZXIGUwcM58Ff3/8PRNXBLxrJkJdJ8a4FDDADPfTHUEkoArIIj\nrcqluC4+1IV5Q+IBuG4jx0K3OEbixsKONpERU7zgyUDsGAN6cekezCw/f/em\nvMKmRFyg86SKXCh9XT0IYcTVQ0XTsRsFIoggmjTvux2cg1TASa27ERVG8nOS\nvizhwfdGeYcVZDgz4U1cofTp83V7mW3KmMkWUxXXPSjV80ugZKdkpSCrWt9w\n3jpQSAqjzsPIKzLSB49n/9q+LILeMPjDjxyhcuYd9gCvHBe/58ZdE0++URW5\nZwdd\r\n=Vvz9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZBSFipzDF8rHJz3nrBC5tqlp6EW4mNTh3xBqbaD7RQwIgD2OOFHHIT3p6Pp8FJksRYyeEKrp5q3OoROizRD7za5Y="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.4_1620737421366_0.12308426008605755"},"_hasShrinkwrap":false},"0.0.1-beta.5":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.5","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### ShippingAddresses\nGiven a list of addresses to display, the `ShippingAddresses` component\niterates over the list, displays them using passed in\n`AddressComponent` prop, which defaults to the `AddressCard` component\ndescribed below, and provides them with any passed in styles.  `styles`\nobject can contain styles for individual addresses (see below) and\n`addresses` for styling container.\n\n**Props:**\n```\naddresses: AddressType[]\nAddressComponent: any\nstyles: any\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nstyles: any\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"d80d8d29fcfe4eba8d3203c902bb3a0ab77e8336","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-ert6UGES7TvaoRj/aw3vwwR4a3MtYX7/rTZVR559zEzxEzOKIXKUv6+L6lzUIttyjFBqtOfEzpXnHjt+cSKkLA==","shasum":"91c5735f521be256fd53ef16eb9d517afc516397","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.5.tgz","fileCount":120,"unpackedSize":7955504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmn8QCRA9TVsSAnZWagAABY4P+wUqmV0S+YYCcMwQYKlY\noEd9XeeCvx0C8AYClPmj+HXtI4fOiUhevUDFxn9+ViTD8N1ixJgG1oYDE3uW\nTw+JTmCHXpAaQ33toCVClUQq924J7a0QTJ1I4ERvvEw9Fr+UecYyoGnQVDoR\nRzP2I9rn5HvhPloRjcy/kyAdc5ORyQ4x5E3vEXv446omvDp99iWzs8I7flx1\nvF0RP56PTPhX8bFpwqwR+2lSoYqtnfl9iWpZfPtgrkPryGxC49GbKZ8X2wty\nyA2MItInt4ny+oaOArnX2vy1VKAnWYUxIX8WIQfobXAX0Ct+ZciJkiOiH1hh\nMMw8B9PRny2uNG3TpB9bIOkda8T4bR7jvoLyxRGbWGBix4JMrhDQ/PGj0qik\nuILY6VuGx8ZSJbvWwnzCwfhBakCAnk5fYWbNGt3PhGmuOOTMRF3UJZrsbChI\n1CzFOeB2ap89iJITgUPpl5KcIUHS9EsUXW/c7fTx3D2ra6+C1dfdM8eUDSn6\n6p194xV9KZAQ1rvh7HadCqDTLzxwMjPE0lYsfWipP/ToZaqV7rBOvPg167fd\n1u+GgXfestplI/i4EBZcO0Q2oNaW6E2SCMYKZCBuPg0m3rxWnCN23f/Z45fh\nAbpM+Oaq/yhjU93R4S9KOQNze97/IUk7vNXz4pMA63Ri3306j3dBgtw5E3ys\nAT4D\r\n=P2Pu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjXBPKwuRySQSlgr+hMeexc2gaWisFW7twBPAhyLaE0QIhAIAg98S0fWI9VMToSWLzDeMvpmazgoN37tDA0sphLMlr"}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.5_1620737807996_0.7249132937731553"},"_hasShrinkwrap":false},"0.0.1-beta.6":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.6","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### ShippingAddresses\nGiven a list of addresses to display, the `ShippingAddresses` component\niterates over the list, displays them using passed in\n`AddressComponent` prop, which defaults to the `AddressCard` component\ndescribed below, and provides them with any passed in styles.  `styles`\nobject can contain styles for individual addresses (see below) and\n`addresses` for styling container.\n\n**Props:**\n```\naddresses: AddressType[]\nAddressComponent: any\nstyles: any\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nstyles: any\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"3a0403a28d3c049f161fd518062e534f186dc56f","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.6","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-wL2Wk/Mm3mKcm2fbilS7mppI5yS4iK3A7SX36PFvVpgoQNxkV+snVwtGc/khIYJr7IuyIVUkK5b465/8MFszZA==","shasum":"7b5c9c58959b41c48dfc7ee87214211b09661771","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.6.tgz","fileCount":120,"unpackedSize":7955530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmoBcCRA9TVsSAnZWagAA+scP/0KfV6KR/4Zjy3/tcSxH\n6bYaNmGhGPjXBPTX7BwMlqyO+3YxQ1oXz2j6e2xygvoRYDZgkxGYtsp3rOiZ\nOZozsGvDl25/JumNXpmUSgDGF3sR253Mu7UxJQn2S46270kkBfCQc7Vs/WZl\nw77T363dwgB/3RQ99AzLqvfNF8dU6fr6apbPcHRak8SiEnS4RUHYlxgcoogn\n64qUVEeXJDbt0XcEeSZ1p7/AaIMnFy6wjSx7DIWILE3TAmRE1zQExIvRvNg8\nyq9zIun3JDrbmIRAOo053DqdSmTbc5E6xUxse5gsKOPilthuV9VPF6/gTOj3\nLRtt1HH6yfWitRLmkIGQjzkLeZUWZVdnZb+34LjOnOGOXNAwmWCqIAotky+N\neHNuvFpOljP3sWevlW8X4vam6nppbAzj/GIvf23FFWla/G9a+C1K0vTtfuKT\n8VR7iVXXG5gPY7qz2fc901OYVGPcWHBXXqMPbe4zZxAuqkDfTreKk6SDjINx\npwdRBfgm9brUtvtcuytwsAz9t58nD2W1LhmmN2+3TQam+yVzu0gsJivDhIP7\n2u5xNyrfFjqzDTtOTf4+bxo1Jobx7DYMebbWGzXVAtJcWGcYqtLkbxpK0rO/\nQXft/VLbMfO78YyK5riA90h2WRn6UCFQIqVaX7rZlwdH+V17JLNeWg1SKs2n\n3wtm\r\n=gwCy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjqWoZPHdZiPV8znqxrKhDs/KpiUyvsR0XtUJrCN6b3QIgIMWSWZlxxBONOP+xZ4DZxJt0zndzsUDRFPZZYkRiLK8="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.6_1620738140482_0.04313784163468437"},"_hasShrinkwrap":false},"0.0.1-beta.7":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.7","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"gitHead":"3a0403a28d3c049f161fd518062e534f186dc56f","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### ShippingAddresses\nGiven a list of addresses to display, the `ShippingAddresses` component\niterates over the list, displays them using passed in\n`AddressComponent` prop, which defaults to the `AddressCard` component\ndescribed below, and provides them with any passed in styles.  `styles`\nobject can contain styles for individual addresses (see below) and\n`addresses` for styling container.\n\n**Props:**\n```\naddresses: AddressType[]\nAddressComponent: any\nstyles: any\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nstyles: any\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.7","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-/B1fCOnZvSo8bUe0aGL8n+W+Cpj6eYYvoNTN5NFfsCg3NrSC38iVazcuPE3Oyk5y3yYWzYHMmXh9uBjwa/QAyg==","shasum":"7094f54f3a779b322546d74cabd185af2768ef73","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.7.tgz","fileCount":120,"unpackedSize":7955852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmoNqCRA9TVsSAnZWagAA9gcP/iR0RsPKTgaIAieCmKqf\nd3OfYr2Cule59nm2nHW/MXiwNWekpJEOwEIIhWTGr0WM+2jl81GwCLCl/6wi\nA4tdBTwGxLDU9ys2LE+DpUdLwXKMREB9kVF+ErS3AiWrg94DtoecbT0dh8ck\ncWAuOYiBpphRpdXfgoNm8QLEKvggmlxxNj+/GQW1g/a8mIneRMRLPXXfhVq2\nlGtdi7yx1p/qRMAIUW0kDxBCwhHqE9z0tgAJo6nzBFbjmzgzspxFaN/pDYRo\nzSIEmyhpg01OTOn1I+S6vbgoi+P/Tl3Dxy7ZFWkMBvPnOLE76nTPGSUL69TJ\n5vBzkyNVWh56mVrcC/vsxs5NbFT+1ObY5cd378c4kKz+y1OcwbCa+DuB+rcU\nNCj4MI7PrPPFmgYM9AWRCKU0J44meeGZaWptSF4ek+PPqtU3yDuOFULvYGf/\nUvgJrrvhQA/qmCbN8jPCaZFzjFmRikhBkKaWu7hmfZU21qIngN+aw8DVVTe5\nR3upZ2MNAxBLBKZMt70CWKJd3K5DzwVempGDThOxNpgeQQioFRCvTtlFuekn\n5QTY16JFrx0jxadAAe+w19mczuiJ6RWcgeEm5eEk8jc0h6FZQyvIe0mAJvO6\n2ag9grUum2djtXpldsAk7kV6NooDjgxodDliKcH4r/ViNUxyo3iQxI5oPiXM\n+YhP\r\n=75kJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQrnTkQmgYWIGAjJCIoK7vQNQj+goj7v9e2N8l/ahiLgIgH55Xk9j2AnIM6gOVcmJDT/D2CgOah97BbjojaVihOBo="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.7_1620738921530_0.28001497090707805"},"_hasShrinkwrap":false},"0.0.1-beta.8":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.8","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### ShippingAddresses\nGiven a list of addresses to display, the `ShippingAddresses` component\niterates over the list, displays them using passed in\n`AddressComponent` prop, which defaults to the `AddressCard` component\ndescribed below, and provides them with any passed in styles.  `styles`\nobject can contain styles for individual addresses (see below) and\n`addresses` for styling container.\n\n**Props:**\n```\naddresses: AddressType[]\nAddressComponent: any\nstyles: any\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nstyles: any\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"451028582ee4c6cf6948abf3ebd640edaab7b85d","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.8","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-a76HjQX8HxHbV3K0Ev+mTgkb5KBue+StXlk841oQwqo50eE0kyUtnn4H/3vTlc2MP3J8406tOahtZpfSQUbG4w==","shasum":"11d94f7cf5ecadad6ca1dfe96629b4d0b6cbe24c","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.8.tgz","fileCount":127,"unpackedSize":7989893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnTecCRA9TVsSAnZWagAAjV8P/0LYeA+gum/pZydNIDW3\nQNuoNRy6sMMeVofpMTWIodVudGdfzPrzr3uIjZfodG3BYsp//DyPzUyf4YWR\nwDZs09RUEIvLgzsDEQKX/HLwD7VAsLK+7V0aDeaAaZWmdeizJwh+aw9XlVHY\nJvKwJLBNlMjTPEILs8WKCgT3it5uZMvNNe27uapL/QWB0tpuUhb2eQnT7vEZ\nkpLMMZYD1/J8KC49MqLu6nwZBhjhGtBZIY0C8WUanXKpju7Fp4Fzp1x87ENU\nsJ7oNhIH0Smjnfu7T++UX7Vmm00bOTohnNhhuKyjBg9IKxM1la0yFTECpprS\n0aOixuX/syFyB334yXTGXzOYo/5aKKFY+/JtJAMJb9L0OzPGTsLwjLpx9H/S\n60gGF6oPbcLu6o23yCI2m+PCxK2FjZfRD0aO+4Fv8SYv5XxCEvduOTC3XVEp\n2io+NwIfm6gu9ymTaOyVSd0ehFmjXROLbyqOwVGn0BmX7hMxSWM6KD0U5sX/\nbNFb31yaQdvCwAumU4ybelcczeq1h3XQaJ+dX2OqZFNOJ621KJKOsNDcP2au\nbFuiKAQk2RSZgeCO2XnvjZdRHpUhUUSdvtlEumHX2pWtImDeQxYootTI5cZ6\n9oRyA0He+BmsfXtzS3Li/QLTPJ1Os3hlf8uIKTuaHdldWpO2m7KKlTqfYTeA\ndIV1\r\n=sKUe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID15mUipSoWwajhAsunghVpRd/wi0h0+YO3yNKjdm50tAiBez89PNsHxTTZ04BtiBCv0cZTy4NtdbWhdX4UFiR5FJg=="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.8_1620916123383_0.3687830341353535"},"_hasShrinkwrap":false},"0.0.1-beta.10":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.10","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### ShippingAddresses\nGiven a list of addresses to display, the `ShippingAddresses` component\niterates over the list, displays them using passed in\n`AddressComponent` prop, which defaults to the `AddressCard` component\ndescribed below, and provides them with any passed in styles.  `styles`\nobject can contain styles for individual addresses (see below) and\n`addresses` for styling container.\n\n**Props:**\n```\naddresses: AddressType[]\nAddressComponent: any\nstyles: any\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nstyles: any\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"451028582ee4c6cf6948abf3ebd640edaab7b85d","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.10","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-6u8FkkTH3yf3dO8RwyaC1bXUPIya561iwZ263kx7KaE54enSr7cXpTDMT5Ka50cbj88Us08TUfCpnkdFgGSDUA==","shasum":"a1e7336065ddcce08f2db2facb34dac19b9a7bdb","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.10.tgz","fileCount":127,"unpackedSize":7990251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWFZCRA9TVsSAnZWagAAzWoP/joVwiCek5R1Ecasy7vF\nAq4jIm2LAVJIyfzPP7cwepYkO9/JcpL7tXyOXgxc9f+5t8l80DqedU2PEEJ7\nSQWLCkqmBhtBVNEFbnMNpUo5qpyj8+4y44NYHXeOlDQvI5IN1f6eOGM4F/W6\nRrNtkaJCgPes0sIQykjgbEeAv6PBqVyPE0XbpoM/5aAkQ4roDr8xcPwHysRZ\n6miY5DIs3O+uVi/OYch76KOAJNr5VPKUlAIGtDEgboYp7pVC8VC9oNnYjSCX\nF4JwmQRn0PKCwv+rGo8Q9KcMr8+4h2A+FfnQ0wHUQAm5lkCmnfUVL1JnsNYh\nQ4sgbn7rUbKWic4PdPvEKk/loGngGkZwiw6O88bVkvDRbVwmgfONS7Y3dWkz\nEYUHZ7EC5B7wbq22qg+V1eY1CnxIx8Kz0QEALC0zC1WgN/xM5sR8mcBRaDm2\n/1knvzZXHIbAzvk/15Z0981Dg3NMYSbXfUfK4wOvilQ6zFfZ9ZvDRoVn4Qgm\nrUqGyabYa7ygeZHU/CXRgSJmDdx6AFdg+af1Ax+S5KV3QSciw5Wylp2fJZpC\nhslBMClIwWR0qoCXVY0Zr6F+I1QQ8j5t4/78N7xIECbXhLUIT9gJ3toXzBc+\nnqUwyYg+D3hf03dOhZWHhsVwUVN0Q8qZliHUDnzvpMxW4lJtFV7Wfcna8gyV\nSyQ1\r\n=p8mZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlXVrLCElgk5cY9N8nq0jSmgnVr2HvRUBravQrrTZnpQIgZEWBxFEeO2u0Ntw/g7gWQSY2bv2jxoIMHqDEJsoLf7c="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.10_1620926809218_0.1992363670974071"},"_hasShrinkwrap":false},"0.0.1-beta.11":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.11","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### ShippingAddresses\nGiven a list of addresses to display, the `ShippingAddresses` component\niterates over the list, displays them using passed in\n`AddressComponent` prop, which defaults to the `AddressCard` component\ndescribed below, and provides them with any passed in styles.  `styles`\nobject can contain styles for individual addresses (see below) and\n`addresses` for styling container.\n\n**Props:**\n```\naddresses: AddressType[]\nAddressComponent: any\nstyles: any\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nstyles: any\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"451028582ee4c6cf6948abf3ebd640edaab7b85d","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.11","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-xkcIAkR5PHKXWznBYv/Otj4bFnu0Xm4KFUlm4AYNk/RFA9COwdCrvYVFLvZ+NPSJazCxqy/PIMv50HVSnXYwdg==","shasum":"3e96fd6718aa57be31f78714c0814da0cfcfdb4c","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.11.tgz","fileCount":127,"unpackedSize":7990530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWLfCRA9TVsSAnZWagAAVUYP/3lcjv11fBJwX4OXw0Cv\nBbv5cEB8QdKqa4HQ1kcU6XN1GVo6TMbSydAHKtkFl9vRuVc9n4QIZVh4v9fA\nBIl8ibUmMxku/TVjy1R5pA3IHGWWAAVtY0zrSFs3CIU29dw0haSzunyg2OS7\nKKtZfzENCdexk64rnkd/yg9wt5B5jPke161HKgK7FzPQPU8oSbtmYdlu146h\nofwyGbtW7D0FY1QGbP47z8754XiUaRmghpekVTcnbhBo/9yQj8jiF86BOnnd\nuqvRmp0pOqKLhyWbRwSnnzKBZK7OSuVvAPo4gaiEH/gOvGIpkpEkbnAI1ycm\nSyjXpU/DIoDBPw8mpG4IFPe52Fyn0BizxT+BHu1bD5NCIVsvmJTNpGSDdL+i\nyMwK4Op9U0Nzc1KRZ+zf2FcACOmKMRvXxZReWZXlWCZoHmwprbEGZ2RVZa05\nolRqDDk3TpNugfoE0oQ0MLCiOUH0P7iGvZvQJestL1o/sdcOqebnwfNnw08M\np9Gl+aZunSG78SKsG3CcPfqLniAfiL5DZu/JoEogoQcko6e/BYl8+iahx1RI\nG75X+luVQ+DQuUMA72B7koSgt63B7LxeI9yZJiRFI0Z/ZJ83Df0O5LWyz6SX\nprWQ5zXXXdDzG8JOxFhu7ucxZcvB3WMLZeV/QV5AN3xsKYv9kzAyAWtmEiSQ\nv77+\r\n=sgka\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGA2MtTT4bckx5muTm6R8X1BsRQLGFJRN2VTA4jtfT1AiAhtwhQnDk3HBMEd+RzOndfNZ8Qt58H+GiaP2FZP25p+Q=="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.11_1620927198784_0.5233665834244694"},"_hasShrinkwrap":false},"0.0.1-beta.12":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.12","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### ShippingAddresses\nGiven a list of addresses to display, the `ShippingAddresses` component\niterates over the list, displays them using passed in\n`AddressComponent` prop, which defaults to the `AddressCard` component\ndescribed below, and provides them with any passed in styles.  `styles`\nobject can contain styles for individual addresses (see below) and\n`addresses` for styling container.\n\n**Props:**\n```\naddresses: AddressType[]\nAddressComponent: any\nstyles: any\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nstyles: any\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"451028582ee4c6cf6948abf3ebd640edaab7b85d","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.12","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-+iCJYCb0HXu2HfU89OvbjTQuD6/xr9OKseqC1XK+hxPbyMgkmp9uYRYRx9uCQyg93QkCyrB76SOLaXJTDscpDw==","shasum":"da29cbdd55c1911bd581f66e81f510a6448eccf4","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.12.tgz","fileCount":127,"unpackedSize":7990720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWanCRA9TVsSAnZWagAAXqQQAJO+TEMB5bRJ28Myfs6D\n0gdh0C/dlZoqeqIhAPbbn0Ibdft7UqcwZdou2XPrOP2O/RCr95wMhVZKgtbW\nSUcsFHLX10oHrJbA6M4Rmn6S2Z3Fh64GL91Xl6Y41vW/qN6x5bUzF45ocQyS\nj9Y+zwXQmo4znNb0l804qatFSgsLO/1/w5htqywjdKNi8WvHIJtMVfaCo3WL\nSHt4mwpHV+NGlfuKnkNGtpP2cdb6e3CxYiagmK07AxByFot3sploDxKsSK0J\nEAqh75iqyY6AGwCDQvWF4fiH7pLrPw1o+jt34T4I9a5YWF15nyb1RJZI+0F/\nfBm2C9tdAk8bI2VE8QbjrfsaQaTbNtX98+rPqqoxs5ujQyxRmGrL9/60UFbu\nnvkoBgsxHIAu/M4hRIZshXP5C8tDBCFgB3n2+ClpCEL1MYyixXWO+7Vkvrfk\nz9otfdFYYD+iHOpdg9I/gF8dvGkNhwS57tkpOoB7O1HYF4yvvA+eYLnIYoyI\nLK2fru4KFdPRRcqNZOWM+9L7v1p6WDeceOLg0abOQrixsS6Zp6Upt5VWWnRe\nitgwekqL9MxOoe7lRTqDZALww2W6bqHFBjNKhZAySVn/zqyMVHPGT8VQ0qls\nBSdhVrkgJouEOOUfwakRxWGl7rNTffM/qwbqrqSy2PBdzkcdv5G4NEXSjafy\nh/Fw\r\n=aVIo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3x4tAMXS72LL6RmO8S+ngRi8uBPqHR78RoX3BadWRUAiALf8YQ30Nra04nTbRRg/A3UQjSjvaaq8CZA2ErqL+bHg=="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.12_1620928166575_0.38608789616616734"},"_hasShrinkwrap":false},"0.0.1-beta.13":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.13","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"5bb4fe64ffdc70df223326a9f6376f34dd42d461","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.13","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-ulnrAieXCYz+7N+tkHShxmZx7mm3cTTpsCm8qa41cGNM3BIcojKGi4aflK4maQb1yevndrCZO7Y0GAw3ecWthA==","shasum":"24ea949cba7d2c6159714e669f92fd290b73cd53","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.13.tgz","fileCount":130,"unpackedSize":8025437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnkVNCRA9TVsSAnZWagAAlPMP/jNIyXkr7kp6q0Orv2aw\nUunYQnXsw8aCJCwRAxCttLpzAxtcv/5Uqyc57JtrSxz0gP4IZFNTbB+ONRP1\nuz77Jl/9qGlNDlfUJoPn/4WBcqJP7nyJK+4eY0t9ZYZKVzerCVu8KkTTCQma\n3V0pXFoMv0lbKx1/FYcTmPQzuXdlCxjdq8WMS4jSLv6LWg0vhasfJKRcYrcD\nY8E8aV2GY69SjvN0u4ZQsQErUXTVen0zs7oOglQSbHTXYAtQuNSPZZehubxT\nukYRqBRjQjAx32HZAL4I5Xssc570Q77Ix9i5l2BV77U7ZaY6AOy1hk0RpBZB\nlK0izhIcyqwozl6Ttb/fBqwe/2CIkBTOPL02zEvehSR+9EbPomuP1YbdrVgO\nB23gkNoH+bfWpqtEsXgpAtZlEVjg998md+L/E2m+AlKCFmjl7R274myBprKP\nxarUT9P3HDGFwzorq/hJfYrJrUyBFqd5MJNQQrl54U0c8jv1eBsQnWTmcg/q\nG/Mt11iPNJ/sH0Auo9AstZOcjiL4dC55Wfh/rnpkHhf4v/Q6IqFsw3nLBsem\nE3witlTiG1IxEez2c+kKQoGfNhm3QWlzST6CFtAWgMZgntYleNGLUi/Mjw2y\nOPH0xAC+HgHmauETHLKJcN9KgX6q8xV1pVIvcW9VUBSBpzUXQ8vcPvNzP+Lc\nAa2L\r\n=tzIG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF03Bxhbi2T7WYH0fuBAlaIZ2cH427Wj3wQMB9vRixwHAiAGhrauX4Mr1QgTZ3pVcLKUN8CZytCuobllh+bDawtvlA=="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.13_1620985165183_0.3828714185295068"},"_hasShrinkwrap":false},"0.0.1-beta.14":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.14","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"gitHead":"5bb4fe64ffdc70df223326a9f6376f34dd42d461","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.14","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-/j7/yMRAHehO73cHWHapTqSlXoYXfYEFTSts20zjUfqqmZajakOZ6NkoyILC4nc1f2ILH0nZUL5dBANYtbPLBA==","shasum":"49b9eb6d5422400250ff071c61d95ae509b1f71a","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.14.tgz","fileCount":130,"unpackedSize":8025620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnktmCRA9TVsSAnZWagAAElQP/j1H+ZMEo/JSi6bQIp+9\nJPFtmM98GPO+K7PeusJWYpAyGSa/AXZv9fkcu7PbQkjjoeW1SfFut5JPdLRK\nwpVb5gQ+VRe0OWIJnkFm5MF8IwPzb2KidL6iNWadpJSfbbc1v/07AkDe63Bu\np+Y9B1Jht2dsZLHgyhO1l/rUrOTkMt8/AoBUpNRMZDZHVYdaR1aCK5lWMkuQ\nUdfTgY7vCxHevGjtwNn6COHtoQTLR8RCMuug759tpnDAZb1o8Q9YNYoKpQL7\ntpX3HC60lbwgaO5HrrOVSHf0s9XQF9Rywn8zTayzhWUPAGjSACU7FtxOZnAu\nLDQtpOaSPsWSn6ZUUOXINCxAr84P711CBVQXhaTc9HxEDzfiyNE6lSJBgWMI\nd7Nndod8G00EY6S+HsPoxAA7vOxIGhp16+vR13m3kUkr9InnCm14uQSsy9St\nTtIkeLQ7J133JK9a+BUYIYlqaiFyJy5W3G+CeuOqZDXHtOOIm1Vw3QDr7i8a\ncochOlNFx+hLEzFAbNOXyKnqz/PK25nicYMtLS4gih8IThtxaWfyBsHcfcMz\n88rHIFneMN3qxTHsv6+2rscZ+/966Lw/2AK+dlVKx8USA7YwLWPNJvb6Ekwo\nClnLacWZaLqULYGiIfsMYqokwIcUZ73hBw52v6jkC/ujbFlOLOSzTyfRosA9\nAJhu\r\n=S8up\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHathYhVJ2KXsDjEAQxJZzfC7RTDP9ivbB0T6GSwh2k9AiAT4t7oPwT/zF3LYpVoj5kRQBkCIxw8XfzGTRS0XXbvcA=="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.14_1620986726004_0.7309510954176124"},"_hasShrinkwrap":false},"0.0.1-beta.15":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.15","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"7acfe899860d6f5395f2b5a6b49fb9de4778f409","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.15","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-ueKQ1p3uTw5V7mQq562iUzszNU/M3RJf7BusgUMqoeWR5qiyXWtmT+PJJN43QGJZCzrME5SdgUVzUqfnDqvYjA==","shasum":"0d60d10dd1bc855f3d2417d4e3b314767504cb3d","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.15.tgz","fileCount":132,"unpackedSize":8033862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnk2eCRA9TVsSAnZWagAA0B4P/1L9aO+E/yNgImFMXYDO\nV6Kg8wU3P90IYAZRLftInpcPfKY2IX3MfLTVbF2pmAwBAOf+yykXxL0oySSi\nwUNHaxiEaasgI3U6eLjA2BhmzlehM+iLK/7fkQCKxAcRWTSb89KbtL/rIwRi\nWw7vk15rK8izc2RPcFwRAJH40GHS5zFJ2vM/7uCGDEHEFzUxL5QO9CKEBo93\ne6jcw66VIzIumYnkU6cRujj7PjWJ2IHwMYidggQ0G6m/M2/5J1d6aHzQaRx2\nRi2iZf704a/jpyJRfMD9PM679H5FilgH/mIqjfX6WXT5yEmCWFae3Jfh1Zpq\nyD207YrLVUUMXDcas70voqJ7uWQp67IXqUgEQMBE9r6e4qY9XiIVcrtIpHJx\n7sbHGlkpTMOW3cNHYF9EiR2oK9IFVUXBD0oFMxXbEMA/1Z8+PKdF3ZzKEIlV\nzE4kE/H3aR5JwdLhF2mrblv77EFC6gcG21yxq1DIG215TAoqK6YQTlm9AryL\nfioQ3SdNgaxPUpy194Pui/Ec1wNpBFMINwP2jWiLj19ApoJ+JJuQuI9OUE3g\noxXX7nT0wTr+F4wgZlXjiYBZWmW1Y9cre/Q2LcXjFWXW11fYbPnO3CKqy7dU\nQDUlFs8DV43YlUHcWQiO7Ytd5HHyJJDsxgOPh9k30L+hkJZn0rwnUOPW8xRS\nL3/C\r\n=Rp3p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHaOSW9Tg+mHwodCYpzG+GlxggzPgvAoQVRX2GvaYk7RAiB69PiGNVSPz5WrzE6AXsoBbzig7L7eUYXN6agV3E004Q=="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.15_1620987293754_0.29034478371569783"},"_hasShrinkwrap":false},"0.0.1-beta.16":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.16","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"gitHead":"7acfe899860d6f5395f2b5a6b49fb9de4778f409","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.16","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-sw1UCJT9E4cde1WLoa1wh03mk2ewQ37qmzP51fV7gaUgViDAu4CIRZ62AR4b4OpmrM1HfXXCYmiWCQ4QXuRfkQ==","shasum":"5759c8cbd2ede4f02f81f41affb2727465c52e1d","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.16.tgz","fileCount":132,"unpackedSize":8034125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnlK8CRA9TVsSAnZWagAAL6AQAJiktK5ThNGNLrqO9gOj\nITgGlIGJZcm1ofq8kFg8S9h01B3alm5neWaOIWZ42WnpwgtlpeK/QPmJnC4Y\nPSCESRSRm8G+HacF4Q650JPmRvxJDDq/aUePC99uHLKpeGoUbrzVNy7Sscs+\ndQ3itj1rixHF/Eg8w/yNryLsCL9hu+RaUWyLh8Ywk51lid9KozDQX6w/NpLl\ng9HMeqLNyHWp9gG0Ntf6zXjN0WSKuu6Pwcf+SNatRtmzzK5CaK4wr954Zb8j\nAO5776lsW/G59gCARiqgPpBVtxE0+/Z1qg7hUG/Dx5YRmYYZomvYJSdCebzW\ntJHRH/g0LghRAG0QyBlmmQYqLd141U84+95FCqA02HghjpraJjYEM9ehDnVG\nVZZeqqG+RrToqEhpRqJHEHxr2atJp6Ja8m6JVT+Ol6ANVl30lEfU2bCNMwrP\ngAHagON5BxTBK1TtsAWN9KVGhyiRPbnPXrxp9y718Qzgu3bXJLu0yiEmGhVj\nwcsWr3EBsGwKnhhoDnEhADYQGYh10Z/S8lz5cYJ0QmjctmTacLPng+2zEyUq\nFh8+q0zTtOWs7y1s60+D3v7+bfWdEXXBFrp18ZFp8GvMGLhcw6EDsHPlDHq/\nhzu3k2UEZgaxlpJhaU9QpyDDkcy6g5dH5200TGRsjL14aIK6OR9SMri8okNZ\nhQDg\r\n=WXki\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAtJgIOeoD6Zar1ZtI6rP8T+7QoU1HCICuQM0sXxkHovAiEA7EuUmGZvNyMdkfhqMXQ4jz6BaANQFAx+UuadGK8Q6wg="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.16_1620988603683_0.8915416485356229"},"_hasShrinkwrap":false},"0.0.1-beta.17":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.17","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"7acfe899860d6f5395f2b5a6b49fb9de4778f409","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.17","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-knHcNF59BOKy9UNuatFrfvSrHrg2iEJh5caNmRvJFxpKQ9zS3kl+CzntIq9AtnLPVbsjTtQRij3suJnuCg30pA==","shasum":"53f233fd67c8b62620d06e25393b0917d4f82043","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.17.tgz","fileCount":132,"unpackedSize":8034378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnl0yCRA9TVsSAnZWagAAEVcP/1eo2cE21xeSawencdsQ\nUUB0sHlEOJ6f70Lbwk8yCT77Dc35tMNygHTwV/1WfHaZu2dOOL5q23H5OfpD\ncy4nSXj9mBuocQ62mJ3e2ds3Rd09fY6DvWgvgqOIhJ7W0TFyGpII3/BkYGzu\ne5/GcvfdYN54lVE0LIoqzTrQFQnbjtjLY1/pq4zZwipKc3JeW+USpTyb8wCk\n4VNcvQEJ8DjHTSylNv8RtLlWerS5/6XdUI69j0Q5J5ZUGfLbZDYbxRQCuENe\nUDkCSwsmqbrNUXrA33YGoFXm2n0tnhH0p0BIEtkt0vlwdvSSpHz+KN2vn/AI\nWn34LNEDzO0pwtZ1iHOT4DwLnBPtAXZv8ueTXFEq2dxCco4b7bIB7ZW5hp4n\n4gcjBVo2GW9AfhqySt7oGO1gB5rQuehW/OIzNxyBDU7ywlhgo9M5WaFQUwVI\nHr7oWGegesbq8KBgA8DOVIQELpDVa/JjTUtuT1thSTlbKsrqD9kNM5oyZoD/\n0o2VQxC6xDzNZAqA9U6JNCAwrpNLr230CdGAfqlxSh0yua4Xe2UC1XiQUkIz\nXUMXo27lKnsa16+0bPdlERAxohyya16b03m1eF3C0h7DkT8aMFOLlFDNOLwT\n8agcRCKESNtR4YlNeGHE1CPaowVYhO5DL7haTgFaDWbOZH2+Lad03u6yXBCN\ni90D\r\n=b6f5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBtFilhRNuCpg8uc+gWX1RzDMt9Z0Dm0NpUXs+y5Fz7JAiA0hDXuHBndTkjqWdwmUtlG0Wx2byR1ygmiHxgy3HCkWg=="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.17_1620991281784_0.08224969926772951"},"_hasShrinkwrap":false},"0.0.1-beta.18":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.18","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"gitHead":"7acfe899860d6f5395f2b5a6b49fb9de4778f409","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.18","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-oTq/ZoG+ofiL0b4SD2qyF9pIZu5+OX3PaxSQwzLGtqeUb4z3WpRW0w9BmJcRzcL4fiI9Z7wXAYDEzNYqQsi1ng==","shasum":"49788f6a183dba26ca408849d8e96397e685b205","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.18.tgz","fileCount":132,"unpackedSize":8034869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnl7ECRA9TVsSAnZWagAA9ScP/A+iWIMIBJ7yUr9p8cmK\nMLfzGDTF4FgpI2Cq9DgJPYPfLnHE7f/MSmX2aVp/LOqSEFG8rqut3b4hDEzY\n3mn/COuay4Gtvak9Bx4XUNEBWQD2d+yn1SA9+HaePQVgNifOuI5hkipdmdfS\nvMIBOEHMCi+xipww7qWl7YEfamXhHgxbImUwtWpKgkBPhl00eheBU6Fkd8g0\nLye2miyVJuql0PH4ybRuNFyi8bkNkMsYj89cYgA9RWM0LTeoFJVN1AvbaFpD\nJXB6vbmlHuDXTpaXFv7X4xxISrnkoar0K/+5R8EkAYO0Op+jcJPFFOH2Fdkz\nsh0955sme0iMXFkuOmsSCK0YjmAZvOG18YqbIbMU3sTJTLQzI9FGsTN2WSQ+\n37ojEiIWOYe3Z4CpCd0rPeVQKepVRDnUQ9/Vnmq7jfgS41uQBre0hbSLL1fI\nu6DacxDGr/VMCdEEB863qNwJy+jgyuX+wAjIpX4qImeNlS/DOzFWlPTRYz5N\neqkOB0QaYCYaWOmkItCaNuRtt+xHcaFiMXwgaBsfSeeBnglQXRiV8rYRGIpz\nzKy0Z4BGrqCP7NjyBVLmxgaxWxLLd8gGVVGwYDOP7bBvWiFm8fdUO/Pe07xX\n5VbeR9DXGxR6przoNZes01TFpJ+5PyHfQAX4Vlqb8qPOMUifNy4wOP27B59j\njoER\r\n=eyvQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlWFVHWCg00fVSW372eptcWY1hSQEqludTBY5529ttSAiEAq5Oxh00ysGoLBwOTdhoNUw5iKWc7IVGdybfkBPCuOx0="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.18_1620991683499_0.8829861635649097"},"_hasShrinkwrap":false},"0.0.1-beta.19":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.19","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"7acfe899860d6f5395f2b5a6b49fb9de4778f409","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.19","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-819GOJb+3IpXw8M0W6DRh7GvG2jk6lh1+iRA+lrbStikXl7vN4fJQ6QrdxVK9irMykT7orGhTORgQRQaYqeTTg==","shasum":"ad38d7eaf8176a99f06d762ec18848b8f33cde38","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.19.tgz","fileCount":132,"unpackedSize":8039160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo7gACRA9TVsSAnZWagAAMpYQAIdKzW34LlhUAjcRBZi5\nZ3R2BF9ynrHMmsq5oZ2M8cgb/VWIcJysNjorhyOZubjoDSQWAiXPW9+/2Rn+\n/oEvo/jGb/clem+sQ19nf3rm3z3iN/XscmoGoQMaAYfBB6mx4de1QzNUGp8g\nwQEP63vcrcd95gRqW0aNAwE5FXWDC+L/DWMxMLE6L6TNaolBvhihkofsUAWF\nQBQAZzNmm4P8sOC4Z6VQTawp8uhS1TucQ+7jD41ASE9ofcpfbXXqiQ09GyGG\nJ/EkLujLih5k0OgtCX/Y9LiGxEOTGzwsROtaFk+X6izmo5+7M4YLIYhzQa29\n1499O4Q+Ge9M9H/Sli0+/CTmPWy/YeBNp9YrBwC/HSTekmlQ90C/ZPG7QoNF\n/jJ1WIoJ214cGE4FB/rVeDSlUhCanstSEMM7ICEjaG4tCOBSYlkTgg5QZbpV\n7hjOHABqli1NfZCzMzMo4qOEsxNnbt1TIDD46B54DnI7/Areh1raIIBHcJQ5\nbow656giPYM/AFolWR2PUwjeSBpLwjnijpo0Jt1nr6NkaIY96gnSmPdgVF8N\n7BHt/yqUkiVnCHF3lXXRFlA1jBxetnYciSExd8jfyd7Xw4v501QyeOrM+MDB\nv/1mhbTctRw0MSL1kS44CZsOduUt0+OM4PigN1aHJX2msTHjidWQSu05j13P\nL7no\r\n=RmAW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC456/DnTtl/DqUfzxx5ibvKNXwk+DQ5tfgEZbsN6SjUAIgCYAJLk6M2kbcG6CLPkkDfysaWkGWH/rVcJHVaq1RyPo="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.19_1621342208171_0.2929665873402707"},"_hasShrinkwrap":false},"0.0.1-beta.20":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.20","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"gitHead":"7acfe899860d6f5395f2b5a6b49fb9de4778f409","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.20","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-+h9DwgR1jqKeKRhaGL1OEGCd1Gyo0fu7lEOlRMdHzxzbe9Na5RU2Gh1skaBok1Nw7YmGpN2SQO0SrmSB691gRg==","shasum":"2b3f44a453e47d62ab1150f8b3c2844c802f021c","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.20.tgz","fileCount":132,"unpackedSize":8039440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo7zoCRA9TVsSAnZWagAA6NUP/iCcJt7DYyeZiuqITDgf\nyf2UxJLuadlgaZqYVtFO6Hq1hRkzYPi06xXZjpGV6evbirZTMoN6WH3KOEpg\n/l6xknkNE502Tyoi6jNTORCv5VvLJEUBYmMhVAoumllRbPNGbc+h+k8EklUW\nu3FRX5ga+u8TfECpZxRGYNIKqeOQNGA8CLOfsTHE7sel4Ux8CflC2pjmTqKC\nR/iT5A6FMxPhIVK2DzQAv4gKjTyI0IZRfGifi8mxEa+GbwqBS3LcAiJ0uS+q\nZ3TxcVONcYRI0UYnPu93dA3tclWIu95kAC2PrLXshYMYgsUxpNFWrsqCxA4h\n8gVbwgbXdtDSmpcIvVW+mP8zdY80BSJzfNeXuYcfOw5i94r0+9eLUQKu/kOh\nlDvjjST/Lfa7J1ymWur9zk+GsH84MYnvH/sk/rtsleQGMhsHafiO48fuy9cE\nAJQqrOKeuM+4qBmDZSFofLXJgVoo+LzO0txxfog64PBSQfONf+9CVox2y0De\nP4Frc6Z3DhteW2Dx28LKm6uirvvFge+pdIDFLEQnDjSjdsbGoRCk63ExB/A8\nGq9P3HR+Ig65i6FklH8kzOXS+AYHu4BgT/tJjuX6MhxjrnknmPjVWR0aF9GC\nBumQwlp4BNIFLd7slHuXdwTmpgCAmgvvIV3J81/a5+bnXsqFsI2xcVz3L/x7\nTQ/Y\r\n=kx3S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH14v8zJwMvEHYHtFcM9u/S3n+RfpvofibmDDqvFouT0AiEAtmyMBLFGhanFc7NKMzMS98Auk2D9LVa36sq34Vl6BuM="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.20_1621343463829_0.5300762090575553"},"_hasShrinkwrap":false},"0.0.1-beta.21":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.21","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"gitHead":"7acfe899860d6f5395f2b5a6b49fb9de4778f409","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.21","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-p1aRxx+vmEOEKxBJfn8li4l4N3Zp3x9UlB4CYUPH0rgCUN5bHiLHxQvuHnksX3VwXwO5oPFsH0jERZeu6xtNyg==","shasum":"ce2f01ffd0aea9dee619a26eda408b1b0e2d9924","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.21.tgz","fileCount":132,"unpackedSize":8088963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo8GYCRA9TVsSAnZWagAAvf4QAIn/rm0w9fraMJM4xN/c\noa+irKOe6sOiOILrN0n/s/PINj1VcjMRIBqV4LPpk3LAVGjjOqgeR4gNDYI9\nipvSqWIYzN95UuRlVYAoIJFV7zsvSpblEwXJTMMcBc0ex1tvLr2GjrNhSWfu\n4e8+c0HjfmEhLO+Z2ShzEp/fr2iJMob2bY1lwc+j+poF9zmm6fn0hz0MjNan\nVNnlHBPaUxpMYPthRJ1MXVAstibu6tIWSnyU9UyX/FPmhcWn5mtdff6LmmXe\nQRLyu84teTrZJT00focTIYFmz9ckI38qrXOuA/53GIGeuMjatScTO1JM8S6M\nAEhydvQwY3tDkigxsSltz59q+9nBqLYdM12L4sbo+eceiGF6BEPgtcSBkF48\nuAUil7CDbOKQ8rfq+QUNjh8GY9byuxZFg71sAdrYxPYt0zT/d/r4g3/9Jdut\nxwRDbJ9Q2dtU4cv62YifEf4JdUEGvRLG9ZtvJGGN3Nx9oYS4lLgtuQaJ7Mj1\nAJfINDwvsozq3r5kAIc5E8ItQYo+3SES5dLzAFhDbORTsO+h9DuUvNuK0hyh\nopYxPbpIANE78ShGjoLb7SiGR6cxltb+OZqS3VFG9xpzlxF9YtubJoKIwPN7\nf6RdUX4tOyO4En+t7EN6N5uTQSd+DcC0yiZyHR2ugdvUHflPAO0jI2v6l1lX\nJP9x\r\n=HBkD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7csEq5VRYHv/PYsGCJeft655sKeOAh8Y0SO1MYncK9AiB9AX3K9A1k8FTutLA5Umq6qlDpLdW3rgP2qyBwq0RUsQ=="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.21_1621344663786_0.7910594705513838"},"_hasShrinkwrap":false},"0.0.1-beta.22":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.22","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"7acfe899860d6f5395f2b5a6b49fb9de4778f409","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.22","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-XScUdHQvFpIrTsMoRL2pmx5QdsiLgS6FLuTCtRR2iIMZUAFTP1KPJ+ZPZ9oYfToQUeJtcwful2M/T7p3TKagBg==","shasum":"3b866df96fab8d388e8c4fac84182f9d800a7c66","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.22.tgz","fileCount":132,"unpackedSize":8089643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo8MjCRA9TVsSAnZWagAA2R8P/1QWgOVXD4bqfd1rAkxm\nsL/E/jyhh9jj054ErLJ5IfThUfJyYtA5ThZqGEKg5aH880rMc3qIRrmRmCup\n/PKjLQJsPeIZd5ZvTz37TTn9EIWbXkWkeFPEBODEh0oLZt+ICt9SHM+EgFef\n7Hovvh1YekAeEVpMOkVDq2C5ZJ6gNq/Wm4cRKaVz31jcMM+U+HNYk62oGo9T\noPO7FF6DX+SDPxHftziKqQVE+msajLsKCb+Cj5TxUyfWOoDtigoQHt7f7SOm\nXpu9prtGEiQNmfIRl+BgSWyoHQQAX/oinFY2a7Oa3zZJFPsXYGlATghzmvqx\nvAaHz3RPSAU48DzfS6kAD9VZffRahcoLqvHyDJfjgi9kqY7MfBlYK6KWff+N\nEfVX+xtOjbcaNUbDzsyb8pCo+gAhPHsmUxkPCEfWJ71cZYnPygpuj9+LjuwX\nIT9cth42Sequwt4dI8vUc3g9pRYJXM/nb6dVlK3n9zLg1C9I2oHCBq7v3bwC\noW2v3x4B2ARbUFBxhcDlDsIhM7fpmy+RhFtNf6O8zbVOL3SiQwom1ycJmdWU\n5vtrFQemLMSvcHw12LhoyT6Yc8vIfPkTYGK7qV6xZ9zYaiw5NccAVjuvadp0\nKgBAzZk+UjY7by1v2Cfw0gC7kNbrUkrdPKK0oPHYYVWdVtzJmrvPPZiLc55G\ngEz8\r\n=1jAn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+lwEkPDEnZDPks6S86EtbYsUeAfGJrF74iQSi9dP0lQIhAMNBMyG6ve1D+qx1z4aCmab6M7nU0uqeeaLFrt5w0dDA"}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.22_1621345059052_0.12241440367828549"},"_hasShrinkwrap":false},"0.0.1-beta.23":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.23","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","country-state-city":"^1.0.5","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"gitHead":"ddb3759d26469ee4357ae9aa611bee85492341d6","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.23","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-dxo3Wl4Sp1U7U52nlfpLRTa1ngwMFWHDNI1+J/9hecI8pceWDTjl+UNWV0fuMiOppLJxGaIPWeUUxALKatoH1A==","shasum":"9091ab4b6bda19ab7bfb8bb091b85a806f983ab3","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.23.tgz","fileCount":135,"unpackedSize":8131755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsLPYCRA9TVsSAnZWagAAe0gP/0qjWyO5qu/9ZJ6/bbqN\noRsLqMcpeLGsB6E1LzzFir/Fcx7r+G6/LbVK59DD+WnAvnb7mIeXtc1djAvB\nN/wa4R6ssFupW3+crAgCm+c76729fTRUcygk9LsA77EqaIxDjZj1p6RhzjRk\n/6caIPIKSVcyyiyuiz5Ddrv5PXgyAfPgg1Jr3+R58ufIgK1kubm50fH986GA\nJxYRZn5f5f6lBUUfVIgcRd7cCGxcvnaEC42RjrYKXgNdG16BUyhW8TJPh4x7\n3urcUE3hBueEDFM/7piKeXiznPM4A8ioZUEv8e5pj60MyqvCD0gNpF+E7SNm\ntJb7QgtfV7xORt0hGpmnDzKf7Fsms6Q1FH2VCW48CPhBv3udTfzFvmEY6Xkv\nPQpnpokZqxtRgIanOM8E06iLGdcW7ZeGrFsBWeLamP98UklPP7n/6i/N1sd4\ndpuRTr9j7S+GnzZoiEI+yDDRumsTSFrdZJiFwK97ytwa5+KnG9EmjI0YIKqR\nIe2Y13D+Qt4m6+aF5oVaABXW0iaoZ13AirNefD4mu9tNElKJSPps0lz9KdJw\nAEMtX5PLr023lWa43OhntRDWo7qu42BTj9YMv4VjocwYatNeyuorVxlQkPFK\nZGj54f15F+ejoDETMDZh2cTg6BzNCioDeiic8N4qYG3g3y2I1relGC/nyHzR\nydoU\r\n=aDD3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICjwtrxaPid1CB/rwUCsJ86VjjdllWskTOwVggOYmNCLAiAbneSfE0f3uzBBznlWjDeHAYwFW2ChzRH3TB+ix2Urog=="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.23_1622193111330_0.7962092197047634"},"_hasShrinkwrap":false},"0.0.1-beta.24":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.24","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"gitHead":"fa1e9992994364bfc4277de3f3b28b07d3628b2e","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.24","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-oRsE7X0s5iny9WfC6PIDjylbiK7QEDUUxBasu/6E7i4iTqOa8N/f7YeSXpTRtvAO9RTi8ncfU1DhYVroSv4u9g==","shasum":"dbf656029545d83185cc0499e473970fe325c905","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.24.tgz","fileCount":137,"unpackedSize":8121831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtOzkCRA9TVsSAnZWagAAMeoP/1dIeDAEquEydCaeWxnD\npKD6c60I+xFwVwb7fcnD8VYQ0VPlWhB8iFbJ9Vqp6IIhEy73nWJL+fS4b19Z\nimycw4jbPmSXEqbeFTKnnGrOiGBaljW9qWxaO7J+vDver0RoHmpnkHTUZ4e0\na+7bC9fWKm4TD/sdkKialVqL5DMYn9tiTqG8gTZo38sq6Mk1NnOvHOG0zgAf\nysRcXl5KPH77ByGqkYZAvfyWGxOylKIBYjQPQgIHHtUXKZ1yN458BNEfI2xN\nmxM4VEaa5cVum/WsvO8Nvv+mDahiO59z1IeUBp68YRbBvAISJpTfzLpYtFpd\nDulyaF7GruRZq21E5eEM3RvlvL+hrjSpJIY8ohumCPuIV+kMwuE5A1xj8PbR\n8ArLW+dSxDMUI03mr8ia6+MANUVcbWnLP4lEPVSWdU7WNlSB9MQDsS424bHv\noz0UVJIckYOQ1m7h3a8RH9USFpRvcRcReqksXFzpg74QXd1KkFhsLkF+1qjC\nfP0CQaNHKONIXwghjKk/2avd0TVIOc/uvX27iCcNDKYLJv/EQHHfr5caXARZ\nK12iBZ17Zf1bE+C8nw0WTFNPUmzbc0MDGkuc5qfT8/mYDJsVqkzfs7BM972G\nyEhlesG8dQCLwszfzRpT8i9GSg3Xk+TZfwkzgGbLlmuVW45QZHRkhHtG6QAa\nt9Ky\r\n=5vw9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASSb2OUA6UGq7CqZnqoQrZjFFLOz3DS7mEhCje1/J25AiEAt/Fzm7Uns1goI4YqRwNCVGq0jJqaf4q3In1iwnDbOTY="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.24_1622469859667_0.8167273726133064"},"_hasShrinkwrap":false},"0.0.1-beta.25":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.25","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"56149fcb286023c6c749f535191b2ef61ed1c066","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.25","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-BvJVNlgUDfQg1rLtpVX7hRLwUgXn3SNyPsYU/oZO0xjtotF6z1WpT3Xie6k0Q5Lu+s88FgxoaDxn9sO/hzFapA==","shasum":"e2ee6277d0b9af3dcfdcedf0e22469cfb703ba7e","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.25.tgz","fileCount":141,"unpackedSize":8168840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPLwCRA9TVsSAnZWagAAmCkQAJQUzt+w+f+eDAL5Nw0C\n+f0Nv5vO+DRknt30DwF+BQedv6Cs8PM7fdp+MZxmrGMXGMfd75DWRXKBxfma\nUYVMM+obS0/mtmCzQ1dGSkr6pNna72ZzwZxLo+s+0Ame1AwMvfqfHlDSp4D7\ng2jX2RTFIXnvPF8KKNFB6AD2JimH6ZlnM77mRJxO8rDRNThPP3Mh2rER4Uco\ntfkBdewo3XKTSEywv+Lhw0RNNdzMf4wRK6Ybo9trzgk4T+hVoybaPfFBI0pl\nRfM6Xklc9XaOMoJwlP0nTVxeMM1ekZQ3jYqa0ZgBSPY6NFF7wB+/SUH3io66\n2reRNpslpsv3v03J5zkx30Sga9LstrFQBf4nMtKRnyB+ZJKMkiUyPxtSP1IP\nJAjTEFTGubSMDIJwJ3Px3npiRri1FtG7CnN98LKitrE8zKUzhqUTnMkn8+my\n4PahphsFeRAS65+VxEIhciWwKGOWdEtFT9zafmvIAKZ/Q1nTeSS4cB9LhmRx\nb3gj7NgS0Nae5n2sD9ph8+DTIni0AhF6Fp0tTKQBj6kKZjBokeWpjNdY/7LI\n+po0dM5QzsW0zMBBH9p+H4fk7a3S4YPwdscf3YWn6ztvUo0EcaUKtVKypTdr\ntZ7/69BlJNCNTMZ5c10R6jvKojDLrrkW/lxKsMAW/S5trPmvWu29uEuUdc5U\nUiWK\r\n=eBz3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHPuT+qgL+OcHeDH/k82YjrBnKY5Ye4ZVz0Wxa1uuFQ0AiEA8oZNz1ziT2pYP9P+aI3aMXFkbUQVYzIDp8x4MlZIt0s="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.25_1622733552542_0.3610756981458427"},"_hasShrinkwrap":false},"0.0.1-beta.30":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.30","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"a1d60c1adf87b0bf8b8b3b34d8dc031c10a81db1","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.30","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"dist":{"integrity":"sha512-btiAg6QnmHpmHNfieQruzhNwJvmhFHquziF8tQ7reVCpBcWc1d9vYX08I0eqvjvY8xC5I72HuOwG7SN7PEcFhQ==","shasum":"37f999eb0a92bf3167da6972c5d6fea452aae0ae","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.30.tgz","fileCount":143,"unpackedSize":8151771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyM56CRA9TVsSAnZWagAAuacP/0RZX34PJDU9KdIhpu06\naCm36NZPcZKxNnB9zfXX9ae27bwP5NQ1XP8iGm7wRFA+aFn3QuUKDFMj664X\nC04qZSAq2zOsnGc/tv78FVHFR2rPEGfuXGx4yKpPMwuKq/6BNaICdfs96kN0\nNW/UXa5G9+x4kpoUVOhyEYLGQ/ykgMatLHiQsfsIUsDQj6lHcE/2sfjXnCPh\njLK7/QkD9osHiCA98qiIuwtaz18/5wrGLB9IpDPUYtvIGXcODPc1TOjD7rZQ\nn0XK6k49vIk7evVlKRRfzKn2axi6PiSfio2VzVHziRwrD/DspHSmjcxRHaWk\nPXXksDMwGpqAHkHVx/s/Zjh3tGaVeltqcC5BFWrmLj3Lk4hC6oNUnRqZK4uh\nISdVTNFHklW8P5VSOmiFnQYYZt2QOvi9JezGU9gU8SWHbzSdAhyByniu69to\nCLmYFc3K7EiY1puEmewHGg9Qf+Z5pdNlVSSt667P12nzf4GvnRu5R9XVWEqa\nmNfSvQTNp7EHA9jOEEGQatTjfblCDlL1MxRq1S3JfYryvMrOoSqPyZhbHNon\nLtR3HLcrjIeR+Aq1DQh5NFoRWhW9gNwHk09Uolavj5vGBgI/EhT54ni+tj0+\nXwWm0NuaeHm7uAoT+KNgJVVHMUACpQnC7Ax85cemFEZJtSqAcO4kJxrl2+AA\n5oYr\r\n=NZYy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcQO3VtfvSVOflHXuvwCq+wDLDbB+dtM+jFVB7bnEiUAiEAkiabBGdSi/ZeFKV/lRM9Ew4FjSoDkRAKoQoRxVrJq4o="}]},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.30_1623772794730_0.9715476427826455"},"_hasShrinkwrap":false},"0.0.1-beta.31":{"name":"unsafe-bc-react-components","version":"0.0.1-beta.31","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"gitHead":"e411f04444fa27f4e6b257a5b44f941e7e6f80f2","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1-beta.31","_nodeVersion":"10.23.0","_npmVersion":"6.14.12","dist":{"integrity":"sha512-WlTgiUlb80Dw71AqBk+ONo00hwEDpyYzT98rn+yUMZTGABATtX4NBL9k+YMLAkvdBacpGstECYnGin6ZY0JGXA==","shasum":"ce599f813172b4c6de026c5fe416b91387fab6e9","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1-beta.31.tgz","fileCount":144,"unpackedSize":8169107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+vyOCRA9TVsSAnZWagAAX/oP/A+kyGslQGzO/vboL814\n3ivzeB6XDkGGCSpslivqSvCdOhpSjs1/yRsmzBy6ClAWNWQ2ilbBkX4zOFEU\nzYh34ypM7F54nyqbgaj/DvCJEcgKkVFZ9DSFns9E2uFTTDBpdB71VuAWSkmD\nepixDQLatYmu4CJ0Pd7JLntiUZR27MDmMr9mqIBqVq2Syvts4xvhF86vwMXH\ndH3O7FHODsYauIvQw/lk1e69araBBYpAG58ga6JsJ9Dg/wf5tF6cEnujAbda\nwkzEHHW7lL09sOGQXs/rrGHgTOgFl5NCPJ1Qc0vnLo4yPtDI0GlgaG2gU4cH\nDWWrzRiRPNRrgftC4jqazIj/Po8pme6nxZnyU37FwgLqtsw66/l8OBFzptjP\nWTpk+9TPV432zsxzOWVwwm/vn7W1d1eHqWrkHLY6avqhb8H/3b8VdFaHTdhI\nD59Kg1aExIRqZutI94Qe+17MyKDStr1k24MkH7M1agtgiy7jMdNsldi+kXs9\nDZiG+Y3sK1I+Nh0yOR1NXhAkSpAU9rM1GWgKEGHc8h8MQISkmWh7+7wHsz9D\nC5dveli2EKjLn2/A8a3MnD18PGAIET9q9NCMOfRO0eQUbyoY8diVJ+0f9c+J\nqXnDvbjOZuChsWEiu7ESxzcsldtwCzMaX1zHI2HCVffPfllseCzpmQfioS1H\nJ99W\r\n=A75s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwdCX/jG0Z7+TO+uGfA8W7kfA4Z7Xuqd8bffK+4BNunAiEAxcK8IoqMB89ZLsbUa2uhQl+6J6zQS2HwZzYWtmztemo="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1-beta.31_1627061390497_0.34037985979760665"},"_hasShrinkwrap":false},"0.0.1":{"name":"unsafe-bc-react-components","version":"0.0.1","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"gitHead":"1e38d704b0d67e2958d52f0a34e2edf6c6ee615a","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.1","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-ThwNvR7dw+Bs2DT1WSBdSXCMH8CuXSk9bOI3bBw7xnG4vIDb/XPzPtkCq5+A4jutJvB0VWLBRgdCpl/nNhbhJg==","shasum":"ef9addb306dc93e5ea0aa87ed55170032db7d73f","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.1.tgz","fileCount":144,"unpackedSize":8084718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/tXYCRA9TVsSAnZWagAAHXUP/1/u9AmpD6qVJsPR3XIQ\nzd0OCsz5K55gCqxaeWdggSmprHIkJ1DeYEHOXh6EFarGvrODMjqdLyMMcS6E\nwmyRkYjedQNlIt+vHNsGIBK7lromoCJzs9I2dNaR7K+HPBVNwERmZyBoeE9+\nZ/Uzez4uCWdhxnzr/FN8iUviyZ0Tnj4mMRtRrAehz7kOMvjFSXHTY9FAphwH\npr7jZlYaU0pvrcEBmjehgOLVslFsyxz5KYhMOp4ruxOahtsmV7ZJ9nYfaHAF\nGqo6CiO0AK6OJ9XgOmi9sw/TUMj4RIHiRvgGz9MsyIk5/NU6+ejDPekBR56H\nXNn0lwPGPpCYrzvySKSTUVjFRvPm+WYZnmyvY2+nAB50klrc/iR4AWp53CGr\nH4qgh6iKoYSdQ+JGU4jxH3Wluv3nB8wTIsvLqOb06p0HZ5aH9gJ6VrtId90w\neB1UbOlCv277funJ/VDb88B+sQRTiaFvEH1qhY+C07Ddv4x+AwXM+V+wasND\nnwNBYl+RFmNhgCcaz6xw9mAGf5SPxuEKLrdR+IF/nqOv4ZLLpnTysT0SruIt\n+HlGVYB78XDWTrY4TDkZ7ktPwnJgTMMHm8L+c3/ljpxoMGojpCFyJ3WqANkU\n7NO0xcWpbp2TWCE0bYOsJ9W6B45ajuzL61XM2tUSBYAfzPA54UGqpB5fluTK\nIBC0\r\n=7rk6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+yLrQRxt+Q08rrNh/c6O5xId0IpSmwEJxcP/3nZMmTAIhAIL1j9KXEueetrMNgSArKc6PXu5pW86e543gT9riv5tQ"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.1_1627313624024_0.21033256047667903"},"_hasShrinkwrap":false},"0.0.2-beta.0":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.0","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"d2a1b62ea5a47b8befd27237e6eb42c9c6b5996a","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.0","_nodeVersion":"10.23.0","_npmVersion":"6.14.12","dist":{"integrity":"sha512-xQPjQyRXMcd7Yy2de/0BWHeFMkB+ONSwii7LqmXTeC1M04/mFyPwDeNIJY18xdgZXE/rQOP78cKlhGr1sYL2Uw==","shasum":"0c9a4e513a8db11dbc17b31f644054fdc4c4efc0","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.0.tgz","fileCount":144,"unpackedSize":8169106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/tcTCRA9TVsSAnZWagAAUuwP/2ZyAN/HNw0bZ6hdMc/9\njyL+0+0moXqd4F4p97r6/deWw6d8sUUNxDZCSUbmWtslv87/57xmUaNvZWlq\nDpNjF2tM17clNxrMqyRQFU8XCngsYH4TDRXTd40ojINUvW5qltqIR3Su804j\n0yX3KpiH/hAyFpkx4K76Gq/uS3YRlMcoWzFHv5Gdv0We+5NPlhdD+18giqUb\nAiHJuE0BbQA8hnfYmGPHP7fLDIJcmhMXQe1w0njIVx5oG0gOqPpPJs99kNhN\nw2lxvWq35SBI4GZHsY9GTyWV1MGLmk+cQkNEeEb17RW0UMyHBfnP7ODc5apm\nIw2ShODI4h59yhD73G77OVrgznSEV0WbIZ+ONwT2gD1GxMhW/IaM9wtr+1yt\nc4MijrndIMmomDnp7MdyDycGOT1H9yG9PV39NBY9JWHiCci34OsvJNLD15Yq\nLUHVVd0rRj7TIPR410vq62G8d/7YmcsQ1eKhA29e2cK/ejyQ1ulsRcDwH30h\nxX+MK+an+EiKxOHrUufbYSuc5hMwTDZhEpZohd71fyNcZO6GNt2ZSL5MhYVS\nNGctmgoBB74f/gezlV2RvQ7+nAX0BDCmZ5A7+PyTTT3WN5EbYArtIEBHhPTp\nsd+3adVIybbqKtypRyLJCKCKWEXftXX+KwyImpB2piyyId1Jx18m7a5eTd1V\nz3Cz\r\n=SkUQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIATB33T5gTFly5Y9N2mYJRKldwENLpKw+Jk59wi77DJtAiAjEehzPTQnU+/AgsWqv6FfHYBDlxg6SfEPNLa4sWchwA=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.0_1627313939349_0.4423953739950728"},"_hasShrinkwrap":false},"0.0.2":{"name":"unsafe-bc-react-components","version":"0.0.2","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"gitHead":"2340d28a372a2f9398fa401d3b80e3cbec8236ea","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-hkNmkT/TsIczQXjTjfGHMKrjlIoBzt3APVsk72KKGx1Gzdk9alV7uk1fNMjGkpAsbFP3LEh3URtGkbIiV+uc9Q==","shasum":"e5ce2f7b2ed52dbb56b806683684e6084bbf60fc","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2.tgz","fileCount":144,"unpackedSize":8084718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/tfoCRA9TVsSAnZWagAAuuUQAKCHkL5Elp4w2FleDHUa\nsWyVXPf63F9BdO2tReuwTTl6A606IOsERAPKkC4tUNsXLKV4FXgOFQLL8TNC\n/yqB3+1J4KbVybGlTVqQCiDTrejJ8/LqErlTuFkXP4pU09jewvsF+pvNh3O1\n8Q+EsPs+55s40Bj/WcGVdBTadVs80EfcmEMox64oWdLXd1oBUC8CgKP0xIrO\nfofDdXEwnyU2N8j1zL1qJ5HYqLM8BoOWGc6WgiK0yJ+uUUeZzBez5q7gF8Zi\ny2JLR22xwunuK/uh2rvUwtLusshHnM4AUGlzGBgSD23skprP5E5uEh+D4yB3\n0tpPL3iqIflErAcYbfaEBiyFNoSwciIErcr7LecK7XaETh+fRXkDRVqDw+zw\n1tDsKDZCg+VfmnHzHIOhs6MmYSKbg8qY5B9wqtS27DcsJlF4i+CMmC9LjyuE\nECwhALo65/Dfb0g4M37L/rWiubuSGM+3NEXzWXTLibP++fySB8+ds45XpD0s\nf97eufgK1CxIIWWuYIFRqnpsqWkaSZTTU6R+EI2MlgpW2VS+k4UBgr/NBhtf\nH3a8KyhzuVV9GKIirnsNevQEFULZN4SwDbpea4qPoBbJTuEg6sUIP+14W3P7\nWP6ENNygL+JcoZ0dmg3EzmRVjMsEmBjDFUKS+edOPuiHuOYPOeiiMlL3uN6P\nGIP/\r\n=ikMI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9CZx0bNuF3Nc6MufEuvsp7wOi1zy4W/YyApJ/+lXkXgIgPtgr9EzhfRgqwqwvecxpphfqf+eUgxSab/dWyh4Z/kQ="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2_1627314151727_0.8550147592089854"},"_hasShrinkwrap":false},"0.0.2-beta.1":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.1","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"8c4e7a27c2dd2c7acd80ef24058200ee0bb13157","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.1","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-nXihmT5xKpeWl4OJWGD6ChTGm7oJ0juU+LXMJErmUrPz6lJTsDiVNRkvy+cc5WO/QdQiOtlSwdgyWHqfN7tZaA==","shasum":"fe77a000dc99a85115b753cab9f4941df726b5b3","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.1.tgz","fileCount":144,"unpackedSize":8084725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/th5CRA9TVsSAnZWagAAg58P/3pHew8HNmTSdtJ6Tx0c\nSzskcYo14iF6I4kpM/51bhM4iQaLOw1Key7VPQlHlQ53NL6e49lsZg5wQgsj\nL+h6Ei+GqbnM/TdC/cx4CHNogucZmTdRK6IL6abe80nEVIYbrJo8P1jxuPvO\nOwiIXISRmH2wR7B+xVHdu4LVDYUwTCRyl8sjBzfzHDKrL7YG3WzRn7LE/HZM\nqlc0yYuOAj1oC7+q+gcxAe5UtFm7rbLLXZf9ioZxj1MwYkeUCvFGRYUZVZRJ\nJ9DucIW5fKzN+0/AtufeX1/2U7X61oXBy8F9OHQ5gqKWAW9M9PgIOJUoOr6J\n+JBI6tcoP8VSke7eBKjjmHzVnkQL16UIHjoIWxqqkqgM2w97OiL1Db83JX33\nUPxx1EqHVUa+bzQkmYZ2ihV1tD9bs/CnJlrxRPDf/HepwRfiakWwKnWMZAsj\nyG4/Ap7FQYRm/QSJ09CaQRGbcgRcohcsZK0VC0KbU7njH1jgNCk+i6qRylm2\nc/ErZFzoMEfglxAWqjOrepejj+ky5IwMWYouRSGvMpEKMYvoxCYThgg5avpn\nqv36VJ0/YJlgr+QKWrfCoFqOO3jlNs8TlMARQg1fsj73cQx+hvFt4UQlyhk9\n/upDycob5NVdlsRYHgYlrPveAbl79aFLYOQdCvaHyt7KMeWHL2LHZT6viki/\nBQRK\r\n=v1XL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIATMqeWtrMn/EFE/mjJSNojKze3uy48FkVJtiKZdzO2OAiBu4gE9pGcVnnkgNH9OpukY1PJKHKNAUqVE/7J9mTaGPw=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.1_1627314297159_0.19354934706567217"},"_hasShrinkwrap":false},"0.0.2-beta.2":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.2","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"5e3572bd4bb9056419ba9026cad73bbeb7256bc9","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.2","_nodeVersion":"14.17.3","_npmVersion":"6.14.14","dist":{"integrity":"sha512-sgHefJU7EjD9wEgcbe+/HG8zOZljApBmZvXPzmCJeS1KKOlWK8F/Nn8CuBQdPxZB1jJ42kmRiXs8yzslljjZwA==","shasum":"7d9b64e31df349ba4ebaa3c5fd9c40a228cff8f6","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.2.tgz","fileCount":152,"unpackedSize":8099273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAuzfCRA9TVsSAnZWagAA0q0P/1qh1gTDBodxFnd26MC4\n9Bfs9bzXEcrojt9wQ8Hu9O+ZKFiaoYukQfifpsO1EWY8VSd20An4IAKAfEcV\nkkreSHlIYs6sMBzTrNb/b7K75419Y8FK6qUtI+xEfzrbts7SGpwkJQXIL6NL\nSIrQQImwg+sOPRoz/l5bwuRXzf2vRi2gFi+YYjUO5lxoLu3CQcxET3VQ4Ikk\n+UOcgWYZkla0tFqchU/XwbKxhluE0+RlKsYlqoOfuZ+Xb35tctizb0m6Ol8h\nhVLA4beRpFgDvSFBTJgshz2nV60Z6kbTHi+bhuC8l2J/BW+pUUAST5G7Ps+i\naYTt8Bt/wsukVPD9xfRhi1Dkn4XezL4KeA08C1LfsaMy5g9QhN2nV5hx/t/Z\nVpjLYO365nrBmzUpr6rHopBX3bYkYHeTSlS8A9cm28wMdN+Z/8KGNA3DonHq\n3li+KhedOckkzhY4B9CKAjvw7y1mcIf4+KhWlnYIRx3lkm7QKW6fS4XRDJmF\nawGAFj3KOjZ/5+BUaAeYwQsoDIERjUFzrIqNI3mzFhp+Rs7ULD0/XYo/vvpl\njwzdwd/Sd3nCfXnx7DUepDqnxeYiH/OhHbK2DcYPliycGlcYl/lGqSO/Z9Pi\nqYHjxti/SBKTRdEfaCD5e3SHqn3O58s6dtM5ah/b6XuVcETJfYh+ZkCqYOH4\nqW+X\r\n=AxtM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICL3mXBv+W6p3GDWaKrgvet7pJCngh5EeDQzL0W79DM1AiEAucj35nFFP+orzFsQ7hB/HbQY5Cj+FaYPThkcksdIR3k="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.2_1627581663754_0.7018374298598884"},"_hasShrinkwrap":false},"0.0.2-beta.3":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.3","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"7f702fb9bf3663dc1546b9393f243de30f03fcf6","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.3","_nodeVersion":"14.17.3","_npmVersion":"6.14.14","dist":{"integrity":"sha512-hYxnGrANBVxPsbhVSDYkj3uSi1G2LmkYWn8Eu76tP6FMJm5bQuC77N36OHk0a9CBiu+mMoxv/rQrnFGjKiJeRA==","shasum":"33589b1c2b87cdd966fe4c57f51e26bfd2e2343a","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.3.tgz","fileCount":152,"unpackedSize":8099397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA+wJCRA9TVsSAnZWagAAuUoP/Rbjhkt+48x4Mw33+SJ2\ngACZ40msSmnTgkOqxEzaJ4gjCj95+cDYtG1FLrFDjZcAdBhHI+A26EGeUtGl\nJb8ZMk9uelM+OXw2AMfYW8EAAYYDn+UjwHHbGasO8zALn4aq6u1rRhAAz7i0\nPA5lnWeYYkvBser231lHHh8ghM/xoZNfKi4kpl1q/IYv0dJ73pMr58B5D+MZ\nTMzhsvI6fOIMqe04T1oad9Eq3M4hXLgVxOU6kgsjpACFj5t2GqEr5uI//t/M\n4aOBtwlEX8uBFty1Mb3rRDkNFlw9nI7Kt1pBrdGSHr6VmGNEdC0hZ4gEd1u9\nTxMxrYJSCxv8Sm3bsjGcVQJlyxodYHviyXmACWBtgHUc9atTPNknpdFF6Zpf\nAAMfi7cv9vbpiXvVzLHrcumDtZsSFH2gU/Sz8Suomh91ShHy89qkC0fCe4mN\nPj7ExddWOaQ5aakBu+fq/zwJlOAWvt6i6eVb+D+VSI/onCNy6TIZLReQYvmt\nyUFZVqh6XJMsyZ4ToFEB39YC1U3Gj/OjUowX0q0tZKLo8l+Ph4xGt8pWAxBc\nhN/zqdUCVe+3G9BEC/QswGcXm+ePkSb0h+Km4V6NqJAUZgXq7tNvI136Uhqh\n7WhMoz5xxDvjkWl0T8/pLPUM7ZGx6tD/eh+YRqaVtMafP7VVngCvJJhnmpY2\nWUtm\r\n=tu0j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbC6qxhunEyzdq0/FmHrOkZRN8/0iRl+i20YUC/7/LqAiB7Ivwrs6OEhdzBwPktIl1+3K3iEpAcOQTrKQIMhDGlJA=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.3_1627646984800_0.2506489177437179"},"_hasShrinkwrap":false},"0.0.2-beta.4":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.4","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"e21a2aa946a0c5a967418483df58a66bf2567391","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.4","_nodeVersion":"14.17.3","_npmVersion":"6.14.14","dist":{"integrity":"sha512-y6L8pKqkCTgZHu9iLkfKtM/1PTVgXj1MMr57C61zXyONbWp27nC5YXZndU173P0DNRCBtRaV0iNVeTeQ9CDyJg==","shasum":"5b9cd39aa59bb230759943466418635dc7522185","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.4.tgz","fileCount":152,"unpackedSize":8105557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCXPyCRA9TVsSAnZWagAADEkP+waxAtlcPQDjLr+SxllF\ne1aAXnKDqY7yjNL9psA5ox4yq7fp7MAQaG6sPYXS9kmHg5fRgor/Wx5/Ch0H\ntiTbfz0KLvCCzzM+RsFMmQJyWBWvlK/crjCV1FIvJLF8osfwtNNPe0jVADaY\nhbwp2xF3sF2E00lxNjc+U6apstfqWbfyYozY7NQ7DkjvYeLz2M32GMtvrxtk\n+XnpOw9LqM1McTm2Q2GLFlyiKzO74p3DnFctNyd9Pr8TjnRWCZSgNBx2Juw2\ndOsvr1++3L3Via1BBpKIHTE6d/oJEHdogbKGclpSZhfk1vDYV+oeLOsxNJa4\nid3V9f+D3OXHRvqGcqFDl8CsXlGgmx/8klDNZoY/yO4r0xsMcDqNtMXcHcNj\nAiFoE7EhVzhC4iVyb376/bU/uyetzZUil5HIS1xclMFDFrUvZ+TBkII2nDqs\nhQU55x0TA96VRFG/ymbqbaa/SnoD0jcFdXVRoeWGtz50iY4mQWZWtUfmsYMI\nsuX3GmCsaF3COLXN0jPSfmgXEWkwL/1jvGbkizevyUvvI+dHBrVHYx/E5i8O\nlcDtKqSzcKbID8T6B05HIiYsbymjBMhE5EuprGNyVOGPb9qCW8IKwuTZUgAS\n/qflUXowLrGhcsqZ20zc637Rmz1nnpa2G0HVQRKhVw1AlFUroiZ68rmwKIJq\nFnEO\r\n=/1u+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBYhA38Qcdne1VTy9cc8DyaBYU3VQ5QQdMwNehzhyTyAiEAqG1OWFwV4AdxF46WyIxbqZECfVb2iMBcKAu2TzpWl5M="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.4_1628009458760_0.22719294398719447"},"_hasShrinkwrap":false},"0.0.2-beta.5":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.5","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"35088fb4bf2e7394d00ce7bef43cf06cbb5a6177","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.5","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-Gjcagar4loVsCogmKGaMiaxgFukHBOC3n4RdYq2haeIVfu1YfDN7aBcKh+LEUCkokcfthzWFAvM8VVwTvVNXZg==","shasum":"04ab4a2322a46199db2f5fab4787ef907e1ba0a8","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.5.tgz","fileCount":152,"unpackedSize":8105590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCs4xCRA9TVsSAnZWagAAfU4P/10AdyRATkCCyuyQnHz3\n/wxzwHrFGuq3g6/sbpDIAG8KsDu7R8m59n5OWkmk9RZiPubz/707NMVZXBEn\n5l5KDKCTMJNUOEg5SK8uc6JmB6A6RvwiFEa1wNmsZy9QXBOdftxY/WRofnqi\npFwY2oZbLGlYAVcPeybjkLavzaJC5wmu4R8/+vUM2KyzI6/6k/UPW1Y5f8fQ\n6NlWpsxYERXAHRT+sqD/kqPLgZh2VHAgwcLRaTEjOnvKpawGo8m8r0eJh3il\nAoquMWNcjeh31zdcUFnSRfg4BJ/YD6XrLEy0UsggeVvjQhU8C10J79o8ZCdA\n4nes1rGWVmA3V00OyDpOqopap41fe0fYRMjzYyf21djWrbsZHMXRl4TkBs7P\n1hAnGoKws6P7WEMdZnADRgeeRPCjB09rjqcUYc6flTGKpz4NrEF1WIeDUr7o\nQWTWpgnVxRca0OKT9PhgXD1HS4luRZ32aeD1cWDgo2H1FKzoTlGHwnSO71Ap\nxhcFXabz349sv7qo1JbfmQTp/UrLnyqpK6J1RlRzGw3qPgU9qOO/8RbTX5qJ\n0bsEMKsaBTzUt+wBCdv43jcw5KGfbafrY9F87FCXKd0JnqpgudEWOi620CAu\nhAu0Web9e5kW2ZpsUNoI0idRYa/KpYsXRAtMi5tKA9saFfq2L3qMrC9FyQCl\nYlYJ\r\n=yWZv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDL61jpcc4Ad2ebnCAd8+V7ca2az7dF/wc29D+XczVDVAiBA/AjcpRJIkfPpVbyF6B9iv0pvtefSNPXhrDOFDcl69Q=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.5_1628098097037_0.013150644780219656"},"_hasShrinkwrap":false},"0.0.2-beta.6":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.6","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"e9eadaf4226f63b42f65db6eb3a4da955161939e","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.6","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-iT7trMUxn09ghSKOEEFXmebmhx0dUSWD7Sd+h7aOG6MJnWCel1b9x91ShIQVWmX3WCjh/niXqz2fVlUI0sxC4g==","shasum":"869462c051546db779b0f1eadea5605aad884f17","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.6.tgz","fileCount":152,"unpackedSize":8105757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFRIFCRA9TVsSAnZWagAAF+8P/inEr3ic9eTYD5ieT1aP\nGrXL5vHtXYx51noodsNx89zWNJGLRcoj9yMxa+Feu2hJM8wXamZqyUNAaHM2\nJSk+ittBqKViOJjEhjsxoaK7nIxzoy5VSsywsK7n5IJjcpNWurue/j9AZs2V\nkcT9dXtEXNYNX4Y3q5RODbpQB+c0biJ9JoFlpIRcCiD1QhUogxJvhxb0q1b3\nzbqjQG82LvRcD9/q5LD68vGp63h+7rg16oEw5tTj2f+NdZipFnmmJ3iXf7mz\nZhJqlYhsSeaAH0q/0Ce+63nxAUzG7V21ZRSaYxttg/gcGoU7vQJRnkKot5eI\nZJ1ICXy+Uig+gmVKHuofjm9jrds5yAeZYi9973OLBkurTWh6nZfSWoe2iepJ\nNMmnKLZuQhnkJ8WKHECCu6irFwM/ULYtMt8SHCjNh9d1KvxK0A/4jY5tvb5K\nXdqWIqVJjGUuV4mc0NKrkrqZK3PmoTMbi5pRYDFE1ErcQiQ/BIuO5XyXxEVB\nVh0TLO+55cHbCtXr8YNbx5JFDmXg1YMpO7Bd9mkYj92xDd6GCfT605w25HIn\nSbBlKGHowngeLXPDwGH029iuNzi9c8baX7mo+ukGxhduh2HmxSsAkfDOqrLY\nY5DjEHn9PsnxmrnGdpPRx5cnnQA8N6AEU7DNNbeSWVStNrIj+7z4W1rW3cF3\nuevr\r\n=EAdn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLKnOTpFEuDfp6uSHGJjuhmQSmjpJh64H6kLx6Ip03OAiBhCyo7NqUZYFvlqiNjRPw+84f4qasTIVKN/S4R4Rsllw=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.6_1628770820837_0.810190702352956"},"_hasShrinkwrap":false},"0.0.2-beta.7":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.7","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"d15c9b82e989f62d04d25eca0a54918e50ba3654","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.7","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-TEL9d2aelm/4wdzmR5WsH0FxQMh2SkQXYmoPNJnGychfDw7m8fmffytnhjECBDUTsg8aMueXmoSquCHxp32NuQ==","shasum":"0e41e14d6608f9b18433ae0492c989d069570fd1","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.7.tgz","fileCount":152,"unpackedSize":8105771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI1xYCRA9TVsSAnZWagAAiSUP/275/aIilkplZS5BF8Sf\nUheRhAZF85xdlu0pde8pa1TqcWaEItgOPlHmPKMOzJCG+n6vxgXpdnC8Hqf6\nbZ1LvjIF/ec+txN1pqYP8O+AFNOePKACYKLCN0Uj63KKHZFmARVZGvLdL96C\na1Lm39Lwx1YcPFQLux+GNsv/a/B+nWmGzgC97k+JQn+tuGaVhZt6ijBgZWym\n3xvnU8TQXpNk2aJU/Q8APKhuwLg64xIGupavfWLN2jDSApQk2rXdVoUohTm9\nJhUvpcN4cyV1tLE5OnWXdcvDX9TT4bAb3+N7M677kLXcv7yjW8arUe1UGTv7\nfzrhEMG/maYHE3xXD195QHOoVWJMtPW3iA2I8n2R0AVMwHV1WW913vaif3AN\nHjd3BbY7crLGqG79f56JAZ+dudzfIr0VRt8tS/bdOMPaFVmdv2Dgh1gx3c5b\n+tNTZZmq0hjfr6H0GR2Kcu5KD3TgF+MLy/2zs3o+oopSqz22A2jdd8CTiPpd\ngkD5PHw3E9xKbHIR6iRmKiX/7hGDWMGZ57IK3njw4lUKNwSNhI+CCoYBneXZ\nEch9KtymdAmcyDZp+9hohZnxB9X6Soz8dsbfSeBuzgXVzyet4FNB91jrqf8p\n0KFQG7vlBYPdvUAojzR0tbK8fY7hcO0hyUp8ZFHf49Qhww3Xh4cQQVPtY0DB\nKuJa\r\n=QZRQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZbzzNN1f+0xSIEl4+n7HjXyaka06fJrXIwhz8dNKtsAiEA/lyAn+KJ5BM2YKk8BWwfpkzMcng7drnqel3O6S6YPME="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.7_1629707352281_0.6528257630807135"},"_hasShrinkwrap":false},"0.0.2-beta.8":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.8","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"da9f262e60fd18e48789c657a13a593ac18c49db","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.8","_nodeVersion":"14.17.5","_npmVersion":"6.14.15","dist":{"integrity":"sha512-9gX+asmqE2P/B5SsodxsLrkneqIc7CgGUI64hjtLwuetgWwVpynrnSIEL9jq87R/DIR7ry2SSXmtm9eUU0m1wQ==","shasum":"4497cf7b0a136255f5b63285efd268090e3e6d70","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.8.tgz","fileCount":152,"unpackedSize":8105979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJQUrCRA9TVsSAnZWagAAESUP/1ipXAKKqhgLg0LJDww0\nS5s6y1mc1Dyd5LTyim6a6SE+ciwsnlt10TVYBOl/XB4qprEILstLxvUwE93r\nLhqlg1M/aYFTq1/gmcS9kB0qM0Vt0zUVGPg5hohy2MklaCkr6T0IfrjZVMhx\ndKJfIbnXne611J3WZA/OZNA0DNJQEMNMVdcCH0aCCFXe2XC1VFtYS5jfjOsQ\nlGnAdWYKg39DPWMrXMKImVfhzh329jMwQwyxwB9jpRFeGMoSOuTHfNJdDZr6\nVV/75pZMiBlXiW+D3Gr1rYxTGniboNfpYdcWlJ2045hFTw76liBXNoMxdpl8\nKinopMDpzytaRxYLUaAEpeX94W1l4RJeHC0I54wTIt5XE6KVzUwvsFOLFpvr\n2ASx3dQ8yNtg9F2Ig17SY81rtrejaMUEcCHwm2dzbcRIQ1MRXDTNUc40Eidr\nJViFIIUL27/e3JG30m39VYURXYsBNtobnBapUbaXw9lL6LI2sEjtil7lBroa\noV3UwJoeJf+ETG+yyHTOhA+avJMY05sMg9b79MG+aAcfYst9M0Pb2JELAv51\nYMUCCv0QGYZBnFuMRyV6JUFuNAQXXS7zNz8JDZseMbcx1+ddGtNc+NKKOAY8\nipJETwC9AaYa8uF8DfBpVMkghTKnCLmZzT3bMT447ZrGecnqv527gZ4iOeA0\nUrOz\r\n=hhWa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGAFGCZaLD5SDwU2NEDQb9O3tDh29H7NMvklxdAx5OQnAiAz8CAgsOSp4Ln7Nb9Wi+AC2+VbtDHPLfqpNs/wALbRQw=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.8_1629816106873_0.7363197152427396"},"_hasShrinkwrap":false},"0.0.2-beta.9":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.9","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"e177889c890d5b8ac3f86ecfd506d9f7a2430bab","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.9","_nodeVersion":"14.17.5","_npmVersion":"6.14.15","dist":{"integrity":"sha512-EyuJq+UYw4Ymeh3a6pLmJSrKjkQmOTMFcMth6dZe2EGbKRNlSArNJHkBg77cnZot0EqgG+FPRFXpPo88k9lX2w==","shasum":"9daf09d73abcff244a99b65345a2ebfbcdedd5a0","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.9.tgz","fileCount":152,"unpackedSize":8106111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLOOaCRA9TVsSAnZWagAAdvoP/Rk8t6inB+0FSs7PtJO4\npd1gJVkoBZTCDjNevW07F2GmOVpYHY7fxRUKNFbFGiddGWch1wkq9ZcgbgrD\n0TR72fbDNBUbc5od3BbpSq7fAxwsnNGKPGHqOZP3HOnJ5r0pI5skMOE90Dgb\nTDKpAB2R1LDjKVlqn5E0pGWYf52rW5PUJZZMKf98PITcjBezARW31Gc/QRB1\n3M15FFPaB/J1EHk7DMa1io2SFmID/u/RFBYA36b4+NxHVlaTa6OJhqgc1w9k\nJtD9ob3pZYV0SluDWIguEbw9xLMfEKNMRWcMqpFdqnVM7c49S+oFfns0nS2Q\n/j1tF7ICCA4ySi0Lptkq6aledZyFXFRbNag+QDtLpnFidWvEUeaeNZqPlgEH\nYYcyVkenHGjgrv9Wq73geOLE93umvk4A+7kuCauehLdFJy6Z0Pk8RzHEpITq\nHBfG30/M+GhKT5ROlB3eM/PRTS1llgKTzIdUn7z13u7twVybwXnTx1U+9Kzk\nBEFUT74rqec3vccYjcEHvHOzXoh7YA3WyiGGFBBBd3AUaov73QvrXQKuFy/G\nw/LJl6Bs0ScdwKIiLsF95zsBP4DTtnNJ1oVCUx12jrK3E59fuUAvxlTt9cnI\n5Lm0QVke3VxH9GrWydAAIojFolY1WS8yQRUudQG27VtEeJXAmFSYTYbssmhc\nUaCx\r\n=eQVC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/qHHkXLTJFpDGufngXSjBHWamkbRwdqjythmYS21j2AiEAvOl73RkrXTUyYLQGunb9s0hiPYJUFr8orC7OoJgGKhM="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.9_1630331802722_0.3073039703771403"},"_hasShrinkwrap":false},"0.0.2-beta.10":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.10","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"50f5706d0594898687a98c63468fe2a563876e06","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.10","_nodeVersion":"14.17.5","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ppjpSPHjrYohaY3+LuCWMCkvKPse+Mq2AIiJyY9l5REIuulX/Ec9G02r2ZWpNYNCtUBWcV+6Z6XYWKjPC8Np1A==","shasum":"6aef2df2457f2985c113f31f431b201abe05a460","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.10.tgz","fileCount":152,"unpackedSize":8106092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLYJyCRA9TVsSAnZWagAAFjAP/RGMJkJ7GMEJm6AV98Ol\njEqCH0LcWHgHX3yHBWy0wzEm7304g7O+yu1pZL8wVAqsFTewwbcUud7vnNNH\n9yPHI5O5G9HASU1RyfbK0f9wVTjCEDruN0s1DPuzEmM+0huseCQ3RnqhJKyD\n8ungokE1ZQ/AKYzLJIMrHveU9wr29QvRFZxhX8Ft9oNXRV3G8LxZbIBgN0Xa\n8bjYualTaDZQzpHZ8c3WWHmP9/DSaqP3qZ3W+YC1e3R9/ms7aW65HSYBtBl7\n2uCiswqJI06WKbCCBx2mZHzbSAChRGeXvlyMLLc6RbLOp+FcytCxzWMCIiJ8\npPQ+V61UwytCFo86eGuO17lTfhOWeeoehiNS35Taxw7I+B9NXwG2Ez6yQRyE\nLUIpUhBzWIVAVUQu9vd3v8cYER7/tYU5gKLDvJYVZP+CBw5VrvoEvF9L8Rmq\nBTHxfc5HRkJw3CMYS9VC1tRr4J9/10v5MVCfk48KvCPA8bwdByLSqGmdKrjW\n0xQ5vTUCDi3fJOC125/NsNQ3jqd8jleSku1aW5v1m7oEd96f/lAdY26nW0LC\nGEDewzK2TeY2hd0KaMyFqa2oejwiXxmNa6HtDJttVIJuMRewbTSuLzuthIRR\nNTl2bKRP+8FCc4y7z72t18Za93GzQyFI3/6LFb2V0ZQYSoxxi+d4Gm6woJDE\ny/4E\r\n=7rvV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDDbbjfbDYLk7SX9v71nDlii9k0MBHtn4L65ZYo5y8oHAiEA72AOXwlq/8icMJeySTtp/+jKOn8gChHqs2X1ySc3vaM="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.10_1630372465969_0.6246139040604628"},"_hasShrinkwrap":false},"0.0.2-beta.11":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.11","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"9c371fab8baa2fd87ca113a673b6749931c0b667","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.11","_nodeVersion":"14.17.5","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Wzn27ZJrCV6PqFUNaM4uqnn5QElctvIgUkodETn9B/YudvxSg9zBQIzSYjY1tvq8pvcl0UurZYWJJfMvocTbMA==","shasum":"1d8c3715ef7cf2f3fe174c3f810aece2b6eef104","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.11.tgz","fileCount":152,"unpackedSize":8107082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLYVSCRA9TVsSAnZWagAAOQcP+gMoA5uvyaOddgTaee5z\nuo7i99GY0PnfHhqaySxhf3USOdZUHKVVYwrE6IFFyF0E8WgHvbnucrvPXlKn\noWtfP2D9fv4+050r+g2oXfhxGasH4Le1WBimpPKiCbRYz9nnUBearcMkaaKE\nPgtkTMIxJ3m79lwBY7Udr8rIBAtnm22uLt8NuCJ7jOUZkLl2SmPOnsVpEU0E\nKySX3oT3SsBpMGPiY/Ab5jEH1asktUB8l3MqLAhU7dD6uVjmR9X9mIduWGwL\n6bBGHWIORVsM8ZnPAt8J9B9xLdIv1vcbcyju2YbbukFV1+1FyCd4q2VsVJwr\n5aQ2qtGXj+YTkCtKLbfYgWlyWI0dvR2Ytr18ahNr7984i14XIrTuj3VXiBt3\ndRY/stN4AygoZiIfyb+06nuuaM+h9HbdRyEQG6Xkablm6HVis9cbTGTYlhRk\nitERASsUMemsVTI9ihZhWaadzVWZL3oJs8YRrETRKTX1ZRxOvjoVuj4U9uuY\nWjjOKs5bHers86o39k0Y9jACfZeEuro0C9lOZ0PXUigofeoD9jx/2mWu+ooC\nQXo+K3CRIjnUvcXYNt1CG65I1SeJ+0IQqLo8dl46g0IjtTvi4Glw3/2jA0wb\n8Q18MJRuC5/xsKOzxQg8HMFQY+4P7zqgyA8P1Ur7nLGQFoSTRn+P+vQBZQBC\nkfRF\r\n=BG9V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSjOEdmyji/78QadqkooyVHdFbbmbmygRtGP11KWyx+AIgOtdRkxS/gitZoIcyl4jOLofp6X/dNUt/NIT0gCXdo5o="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.11_1630373202041_0.6924495686227581"},"_hasShrinkwrap":false},"0.0.2-beta.12":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.12","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"5ae40803692d34586f2a1de501cc8896fcd76a7a","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.12","_nodeVersion":"14.17.5","_npmVersion":"6.14.15","dist":{"integrity":"sha512-bwg8QkzWyXN0q726IyhlCDOKB/dY/TCxtdDLpSspQoB2AY9LvwOofC1A3YWjcBn71KjBUuxeOKEAPRes5O+UHg==","shasum":"ea2caaf92633ab1ca2c98147c7c2314610952b64","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.12.tgz","fileCount":152,"unpackedSize":8109784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLYbyCRA9TVsSAnZWagAAHYoP/2lGw9wNA03y56ZrrL7K\niFSO5sSl37lnlWxP5bvEC4Wok5bSXEoHkkhHUoTIBfMxqkTecaW6UOBc7f7E\nuIh95ax4xFQzfq5eyByFC3sZxionb/yXlefVJO+y55SeEjCdhcGMZA5BAawd\noriBz7T0m5f69fk7xKnxWJyYFMCzQtL0Ck+qfjfGvr/Vu667Spqqj8kkI0fg\nGk6pTVoTMZk6hVkmLoSFO0r7rm8T3HwrmrA/8ArGGQvgdBhjh7tPgyYHja/J\nh8LSoVba9VSlIbXYdPaLSCd05RmzFZ9ZUqcj6HnMHO02t+zj/jVrsb44H6wH\nblhz24+o5DzdGr3Q2YbDgY8f/CsLLpzBO54o6xbP8a+CQExKbhTm3YngkEZ/\ngRp3KMjkU1vwGZJK4lVTrngisITHTgQIK1qxswTKLos4s/aCcvO3euEGlB4S\n2ehHNCcKxyJ4ScrkLR7/nfVl5NACgGWnyuJ8SPQxKuSsTeXWV2HqK4HvCCZx\nBKrtIoVciLIhO8MP358bGhW3VrXDz4xXYrd1AuHeQi6Qnquo++OuFp0k1TYb\n9jX+4U+6Q0jzFfruIe1A91A+2mnzMHsf2K9ClGswzzsEIl08YENRXYbbQM76\nJH4DDe+Tcj+jdu3CApQPUVSrcvdafPM0+qisou+yR1f98uT8UmFUplsKI1VN\nSX5s\r\n=jrN0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJpyNK8GlcPn+MnZh2X/5J4x1+F1xtDPWiog566HK+NAiEA3fVnryoBpeh7thoRD5q2pwLEGkP0LdUBaPT+ZlbxV3k="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.12_1630373617982_0.924426613422068"},"_hasShrinkwrap":false},"0.0.2-beta.13":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.13","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"1431b88833796a6b3f0b5cb8343c23b22fe07c98","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.13","_nodeVersion":"14.17.5","_npmVersion":"6.14.15","dist":{"integrity":"sha512-6g88B5uj7lEn0nXzLz5iu+QZ0yyhYuV3HfR6ZhPG3qJrk48WFlEmw4HMaj64zsyYcKK/xwpNcowyNcJX/6aJpA==","shasum":"ecb13d7f102b9f3294defabee07a94c239ee540e","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.13.tgz","fileCount":152,"unpackedSize":8110250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL6JVCRA9TVsSAnZWagAAJVsP/Rh59rREo1DX32jyWsZz\nNJP4z6Frpvz9aAER3FVQx7qK2xU7sAXchLUjIN6NYe+3Iy7Z4wyFQOO4j2CN\n2YvEmOQ/rx0X5zbRQCGuQIYTWppPEa1Z+JfzW5q4WIh05lflTWVhsnDP2r1/\nolOd9aC7sKZ4GUMuI9ApxM0ECOXxEEv+22wD4vXUmVb+MyN0VpbOwgHgjma6\nJ1NJyPAMPuynI95iuh5dbytR2azJgdpAGT7RlUh2g3N7GxLZOFth++on7Zw9\nMJSaAbPkeFvnZQ8vYt64/NP5RNcRJQwPIujS55SZ7toVlfqgbdiiUrmzclPG\n5XeyvTVIzDiAJ2xRMW8WVLsq6BR0EYckZFaeJIB2pzOLIIGaDB+hvICWMerp\nRt2G3O8WXpnN/CyD8s+NVYSHYPUmfULIAmDBYRNs09mtVKYg+IyA0YEZrlkP\nHNnwpnl2ZcsSy17s8RH0y7K6gih6qmbHaWg/J4LxHvalWonrkSgXUWSj2hXO\nDh8JlnwJEBZ7NjaYnQktsFovElqvdZjhN3blh2M1TkGEKUHkeabAqLpWqkNL\nosKkv5iGLpsykugbPLWr1I3nKE9WZ/3ze3PogV1pnl3juemxxwGqTbjBcB43\nliyEh4RfkId7XkTO8r/3InlnmMPYvUXJw50JOPeRlRw5gTYW4jbfGTU3hY1g\nAR2w\r\n=5azG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoGTd/E5Hl2l05nNe4u1wXK7bPTQpl7RjXD1/VSq9GAgIgYNCxsNPmj/m7RqQCuZdLCrNPpT90AIrPGrhOiwnNOwg="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.13_1630511700927_0.10562270402473284"},"_hasShrinkwrap":false},"0.0.2-beta.14":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.14","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"def010ed309fd43065718b5c68b734802587b401","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.14","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-Zst19TZX15Wi5LiidwbzpL87TDdqk8sKScqbAcPjsvh8gNRKKiiGQ/5f/gkv3Y/VEJI449faW//LU5QFWxzgoQ==","shasum":"8597874331cbf7c859f1cd27e2d9e85e48fe1434","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.14.tgz","fileCount":152,"unpackedSize":8189029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMLAiCRA9TVsSAnZWagAA9C4QAIOgivD+hfTyoQOOatEf\ncvw+4ZsRD65LIC+fUF6gh1PBMnr/itXrIzy3o6Qr5Lsn+7iNAuUHTZohLiaY\n5mpk6j8XHOWtHdvXAxibBIwIOY8EuFwoR4n/+vPKRLNK1EEIiq9NahIPSeqK\nd3l/UrSi4fCQ1dNozjT40I2i2NxJqjv9Dd104+tUW/3EfyTb//LqZNLtaFtT\nJsOs/fDZOtPmmz51Q7cbrVkaX/Pn3Fj8fZytUg5MEzPcqrmoyiAONijCHViL\n5ca92V3KpfrH9lbCKcnOZJBN7YVmQGKLo+EoSsMz9oVmwn8noxVgganrWT3P\nmQIsodeqPsEvKFnDPyFte1vBBe8PJjko5ccPHFM3ROHVgilckBJiQ6wUzmSP\n4LkChLuc+NLFM2MfERi/GQ7C6i61ZLUVVnXFdIlARa5dNxqiZOaHTaaENyE/\nwktMzYKc+/F2dx946o8U5pIlKkE1CT0m8t3JAPNOBZz8CAtBkNxhIN/uX+aG\nSaoNHtZq4f0i7gsSEay/mWKtHZgt1NXFT3qnTmOpmYgRW9oV4g2dVgbrEpeU\n10QVguzkLsSCMrSJuj+v7Sej4yLCfz7XprdMxGe9HI4JR7wTPKFQwbn/HnvG\nbLGHoo8Y+28SugrG0XJ5ZtxPmW7w+LWejSzXUw7D+lV6Em16adfE4eoyK006\nuYKb\r\n=7Szc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGRIBsDCuEYtkiP2VLlNkpe0oe8zswA242+mamD8IOtYAiAoAsPRC2a6jJnx8+0jbWiZjbi9C9IP0FmSJJFIo8DguA=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.14_1630580770660_0.9024642237347336"},"_hasShrinkwrap":false},"0.0.2-beta.15":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.15","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"c5dd033fd4aa30d06449ba09b168d2cb7873b4a7","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.15","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-LPezUYbup4eBWmj642acfMXu4FBhdm3cm+6KBvq9ynEdP6/mgBrRh+aGD7qMREfFhFF8v2sGdIoiQx6lA0jNdA==","shasum":"bc29989816546f531ecd174a43c354d72db61d19","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.15.tgz","fileCount":152,"unpackedSize":8190759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMM6VCRA9TVsSAnZWagAAXBIQAIDvHKiOcH5cpAIbsFHB\nyXfCYiy9y1CsxUCb9xXpJLj5o2X6JM6ZBvOuniifR1tFl93LpMoHvH4Jz1Ll\n4rEg682S6WNf2P0Yv8R0iFhi9OAJXiu/6Kv/M7vkQn3tNl7jXVkbDN1W24ss\n9+LLWuYUYIaOxlC8qxFEl3Sgp38b0yFGcgmOO1oTD2zVGIGqvewyV3jrLDzQ\nmYiJGWVfShAV/ywiTSlkV+9APrl5+8mbxwlHMQYRlcOI+hqY8TiPNWn5nhDa\nY3AFza4lvgvpTkgQyXzQeLOmrl+Vji/+Zq0jFnrAM37SlMa0Tiefum1I18VO\nu4r5+J3HN89QX4ru6lKWWDQNVOwLseFrTEvtitoRMTz0vo00+ncDkxkhGZEC\nYRQggTwJUsPfuVuh7JVndrBG3g9+OQ+pgXIvxtAaUcGaJImc1aKhdSUHfC/8\n+qeoVhoB7p8AcPJuNCD99lDe5BeggFTFaq9UzdiDNikJnHTwIkAytr7gF6PF\nUbSpl5RsQrCWtmyORyIuLV52Y4BPz7ECQtO9Ja7GbdUtrZ6Og4awYwJ9ZjS+\ndiHjerdptnmmz7EMFSgtxHlnrX6vlh0s36MI0bwTVhlKb31YDloxTMZbJGwq\n2RNfyIOJmSpkn3XMUPW0URlrlgcyMaqdun6Tr/KTnrov3c76CWN5/CXFwV+L\nNNB1\r\n=MJQ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFROajYhRHB9WmCpwTFW22M36LedXMXPIyrVQS2mGH6XAiBSaPx/wEam2G9NG5vQeiySTNkXJW/IoN7D6RmHhmAE2Q=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.15_1630588564818_0.7603431504680713"},"_hasShrinkwrap":false},"0.0.2-beta.16":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.16","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"12600daa783e65c486748dd8eacf8c47cfbf21af","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.16","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-VGrJ6lJLLWmrrw63HP42w3Ti5P8hVSuT5TZfnzVIpYftByFtdKblOsKUdt85SoS0bKLXUu3UsAcBtrLI2SfIYQ==","shasum":"bdd6c2ae1cd064423be3b81daf2e3b3aad37a360","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.16.tgz","fileCount":153,"unpackedSize":8196001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMNljCRA9TVsSAnZWagAArAcP/1SW2RJXpEB04efl6VB5\nqBsYKvBQzoV4/sxi6pgvGoJtk2HVFS5qf9QlX4A5WTGXKRHxMxpWom/9seG3\nnfGUvd1Kk88jVPiUFBpbMO+0SBKQ4+LrsP8cxutelIm7BRUZDhofj6y5fPUu\n4SEiIUDkD0g3I72vxxEHQoifCD94czHQL5zqXjX78xGTtGfqVhfg0nzIvxDI\nGEHn9qOItuaBsFtF8dFW7gzUHCQb3Z1Opej2cQCs8xQswuVoDvM1AMeqHteE\nDEZ+gDu/mfHW5uilO/HDq5e5o//rn0awvENJIq6S+0z6NjqSkJdc4epAGSDG\nGKo0T1H/NlHxnvfW+tEt/uDWQCd6dd3/Z9pohmV1ssHYneK8Vaa6GqiBmGlm\nd1I9egwe4qn37sLGCsvUSSkWF7e3rufatMoQJkjrZb/Dd60m4iEGjP2DznmJ\nlswiH/cgbuwnM9Lnn1CL4n4S1NkyW8dq8jMYVUw1H89n2YYM9/wX7RGanJIy\nSdoArkZjM1kZUggLpLHpkceZsDabASvfqZSQoG2d6iEPgzzxHLJdWCMnTzhX\nRCPc5uBPZOKBNgP5JogONK12JhTdm+rAZcTuGBegDXeN61+gvKBXlVcwQ/zV\nz8Oh/qCD8UhmgoHe2tHkPJjeEK/02qT22tdYcwYv7/INbDO1mS1a4jNgHvxj\n+v6x\r\n=V+B9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDf/y2T4pIm8Ftg3kIixN+4WY9iyAkCQUF3UlNRur1QVgIhANAQo0VyLAlH1ecLn4DICyInmhn0ibAy8nHuX0crrSZS"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.16_1630591331283_0.6912982388244466"},"_hasShrinkwrap":false},"0.0.2-beta.17":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.17","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"eb3c9c4af62804cb86fbd361d0c045ddd4fb400a","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.17","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-ln35rtJVrP9PgswUm9zIWxq+MRis7IQgb2ZmjoVFnK92aNy2GhpvBj5CNUn7RzsZqBkP0kL8mP1kB4tuX2xlUw==","shasum":"5fdb7994c171cdd92ced4125d6a33877195e7436","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.17.tgz","fileCount":153,"unpackedSize":8196385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMfozCRA9TVsSAnZWagAASjwP/AgISLJ9In/w+kG3fqDC\nzJIy4Cy08U1sc1lMFD2LgfeTmqjNpSkcGRc2LWQ54rLmgsvKKIXP97UBvtJS\nZJ+NxqEPaFuN9tpICMP14jIPzPbDluQTElOpQl2ajxYQVQ6pbZhQiDj4O5+x\nVFGw8cccDRv1cx7Ve9kS34vJ8nd5tH/vyIDh16O1UOXYRfCH12NcRM5T7BPq\ntG0/DaByH3IO7daP9lnErGOHUTMJzgKVv2wb/e4t4/BJ2ehu3zwwQHwt3FKE\neEb9jWPu+5pFG/IbCbRtJ3Nz1skAjDCbg3mYaTU2hxT/Xq3e12VjHZxKq0zF\nTS3x2Ipstr3RLPRbm0JJrvnPhC0ujsZHOqYAzv80svrTUTdkYdQCSiymAZyw\nQ4J38T3Smslc4t4AWPsGeEsFQj3d8UPMmd7Llrg5wtJKt0D+Y/4PxCcC3GrR\nKE5YwTVFn3nlXHuw6pTM94XdkCLnC4A+oxkFeM5xO6LtcQSOOikb6qmt1bcA\npiqw/UTEOGFmOKwfZ19MF0wMCihMMuCcMW/Gm3+W1iZ293r8rtj948/lzghN\ncEfZ8uKl2t6lrn7ux94qMfam1lFpKfRCqqT7sEmaL92KkfsYnarbwYxXuKX3\n2doLBcIpX40VPPqb/yke0un77IAXcgzyLY558AZLBMJzZ4FM5wjcVwL7GuZM\n7Mdx\r\n=iHRO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzprTy4w728KN4LU7KI4buqJnQjtFArDqvSYFghX1RSQIhAJuuKVfoiDFfinfeGOOeL47KWOtKxpRnk172UFIVKR/I"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.17_1630665267246_0.21812992653755803"},"_hasShrinkwrap":false},"0.0.2-beta.18":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.18","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"4cdd0fd44f2cf4fd70502e0ab69bd96ede27382d","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.18","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-cHm0VoBmNTSxJ4QubBwvVlIQvMYNtaDTNaADUQS87EhgsrPEdMWuGA1k7A/iKZl6gDwjzapDUfzisG5kJbu7OA==","shasum":"7add098910c06b6f85e25eaa1910d166cf7fdb3d","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.18.tgz","fileCount":153,"unpackedSize":8198261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOznBCRA9TVsSAnZWagAA8hMP/iwscxGsbSx0PHjWfdj4\nMfgqKuUKkxzZvLqBRDH8ev4YYasImD+n9O/r4Cnru4tD38b5vfr0wTcpxXGV\nv2koyKVlCRtNzliSD1rKKrd4HSi9oPEeS8/Yik9802fjguIEiEpeHnA5d/Nh\nOi0T4F3jl+r46CzAybCCRiA+37hBNbiUU+RrCxp7WwSDEuYrSs1zRmQuRDL4\ny4T5MdyZAHH57OF/YMkgu1llHDoYLQJoed+UO4sezD+YKJJQlMxM2I4lR12/\n8CdjVZglaaTFNrYPnnk2k32E0eGed9+FovJV8fn1FYs0q75e5GnQp1wsOXuQ\nzb6PSaeQVDwfTSG7guZUgH06Z4E721jmWyQPxeIKXEHr7fHpOcYRYcYccCYl\n5DT9VKy9mWB57V2iv+zQuo8wsgmXKTcjjzkHa29drU/Rxp5N5FNHEtn5jb+c\nOPpgFYnMbdaINQj1CEgCXmI+0y8ziP5mZVA3kSCyAcNDmkyoBTmUyHc6w7GY\napwfV0appiphDnhG3LCOsVdfZu19wogu+qbI1b7Xakt5nrooxzVuOf1x/wnQ\n/FB8ZVpuKe8WY/1GKN+mdJMb3zcLuGAB6ML02DU6xN4eb6alAbhnWXHwWoFo\nYBxcNEOMITX3iRtnUhcAN6pMUkinzGrguW7lG7Lx8s1J13iEn3wWNRnFMEqX\nGf/p\r\n=kx/q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOqiCXM6XPmH4cRsleyQJJDYNle0qzh1NOCaDRiyl9agIhAI90r+TFTxXYv4ZcUNGNgROb+wGNIrJql/L7LH12joju"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.18_1631271361635_0.08959438430141509"},"_hasShrinkwrap":false},"0.0.2-beta.19":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.19","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"0edd6f1f59b52519729b57ceed0f9795972b7af1","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.19","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-7pfHdauqOtFksJt+kOhID4mvCaZ03wmEg9k9u3+92VB4exGCUR138wAzZTqjApQGn6jGH4r6/smPE0QlUUpcpg==","shasum":"4413457c87198288e71804ba16c4932c8a030cc3","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.19.tgz","fileCount":153,"unpackedSize":8198553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO0DwCRA9TVsSAnZWagAAqMoP/jkjaiqkIh0SldQ3J8gk\nB2FHEyRAj6jX1nNnWH8I2gUpeINiBH1HdVWPtmCV9ROsRDuHXVl8WLGhMF2O\nJjEcG1AOaMUwblMMLNtsfRNIr+eYXHEBJJMbnxZgcIoujLDiNYvu+Ng7GsHX\nWZRV6OC0w6tAKvqB6L7YG23ThcwxsIhaEsXdzboBVQTHYqbpvPShdoFXcakt\nL1x/5NxH9va2QjRkzELjRbkJPx1S5HzPhI8Ct9hnh8UkmsRP4Usof39eMhVF\nY+jRxXjeVtn/vhRb3uAH7+E74q2ef73Vren9R+C4lpn/eDmjsYhEpyLTSv3V\nlHJQGI0EaBfi/SHHen9Ou80g2tw/l5qB1oCENlg/rY2ZV8XSTxcXpAxdMjpB\nwFOVNbCGaSluGf4TvpyNDlA48CXNMrndHJ8JJQDMVGp5ZELW6EQYQqxZBBN5\nwy+iJj5uJPxccu3S9YlYAbhypeaNL6C/Me4aXqBH09CeoxnfzDL6InHhWTO8\nOXU9tT0bcRnmlZ+AZ7m0BFfsf5QlQfelpUc/M4vzeNT2Q0HOyNNiXHb0h3V9\nCh8uH/TBlQh89KxhSZ3gSJpW6B7CP8tfmFU2UeRSh2rRk/jm6JXh7UT2+WV8\n3OOtZd0iX9r5wOCLe7bfSqGTGj/Od7zhI3HgM6xc1VIj3Uvucs2464B8h+ez\nitbk\r\n=EqNg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICpxdAXOfF23rhnL1aVposMxJolQzP83m3Bl1OdZcOKMAiEAgjExBjaft/eCgkDxC2UQI7j/P4eEEGOMDi8zMZt8Lqw="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.19_1631273199919_0.30476522630013037"},"_hasShrinkwrap":false},"0.0.2-beta.20":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.20","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"ae21b51ad4333a16cca89fa2b045f853bd8acc2d","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.20","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-o2TYCUwafzV917NOV4AyeowhbSLHPPjlCHz9V2QaO0KD/G8jFs8iMfodrT61Zz1OsnSZgIoYaRMMlU8OARdtZA==","shasum":"7d00d42b8dfd91ae75c5fc2c4af66f053e9ed6c4","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.20.tgz","fileCount":153,"unpackedSize":8198831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO0SyCRA9TVsSAnZWagAAB7EP/1DkNqQ+3LrxO6PsxDCB\n8uykGTczybI/qEoJYRdkId5vc+dtl9ZLbDMcoda6ozCEJPX77Bolh5J/meD7\nuS+/Fj+fQX3tHruI5LjxlmxdQtruEJCMRxUKbIzTi5jgzU9SM/K1EcewDHcm\nW0QG6jkaPGX2YKp6CSgYnawrketdvTaQ0MW2cvA/L2QvxnMKMBV5uEgGwyF2\np1HpEpo7eJ434YG0GIZz0zrTGH7xP7xtfOfaby5T0ctvUAEnATWIvcHvFMt6\nhBfpGRJEBbfF8aDtJCSexNP1XxEYCMiE0MCeEW13t/b9DwSWSBWdpEmbStsL\nqpf3mG/Qj8dw63Qm0h2F+CDEZA+VIHI0fmm+7Q5kNZ1ZNYi9h4W97lKmo5MC\noUZLRFyVGGJNi+nJEBkwhLXWGkjD/vio7G2TqcPS23eHrZsdXob7bn2vtbaa\n2sXVXluK2ipf7gijq2P0AkrhDfy8BWYwLP6UCIAVlT+Y88AOw0Jh6plMCWQU\nPpXYr2PxDzYGDf6kLVV1aH3in5s3yE3Ax7XG1LefobZyKofp4uKjRwyLaMKO\n1aC8HGLBbTXt/iSnD4SW9t0eVBe6mEC4AEtDv5c4kqj4fcto2H63qvo/zAOI\nYZDto0sModSOBcpI+ycLUHm5s+j9R5rX0I1kSc6pIqWZfGDGdmFdyP7CEzSA\nWAav\r\n=sAXx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHyo6EncCVXTlSaIc8idtY+O479StHYF2xDuZVBZ0AqxAiA06jq5joq/gjdEAoriwjJGYXRoTq8/3dsSPpWyFCevwA=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.20_1631274162489_0.8262493476206243"},"_hasShrinkwrap":false},"0.0.2-beta.21":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.21","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"3dddf7a0f2b7a2d10bb2af81898ec41f0a5273fb","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.21","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-0yDMM1DfsV8nn82N57nPN8Mft+rJ2LRiIjtSggD8eM92bGODOvSezBXgWj0u7GnvN3xhOwOhPAYf1TdcHp9+UQ==","shasum":"9e1dff2e6eb07dda2c6b175ca0a27564aa32bd65","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.21.tgz","fileCount":153,"unpackedSize":8200319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO0hSCRA9TVsSAnZWagAArsAP/3HMK6mydSrzNlZowBgA\nDZ0OynQJ2e2JbQKjSfH8DSLWYx40yz7QtbW90+POx/Q14iMMKIAS0kS1ACRE\nAoWF8Q0A/UISeL6f2ccHN//b8AA1p1HjFUp9NjXkIJvDxVvkUyGkoAhEaqCg\n6VKWfcexgcVrBXcur9m63M6Spvl1BhusERyn7d6K0ZqYGCBpZWaDZME7X8OV\nMPlerdj77+hvI9l0dJIhSU3LgUKtfMpTnWTLRc1uW4h4gbT15pBwh6y62kuz\nOG1hrsMxAuWX7yF5VGtCnqk2Lp8dIMZctSqd8R7MniDPDrfbSQlOk3FrRUjN\nwdn9M1ZbM5JzPJHvusDJDL6bK6XeeSohNeHVgqNXVyvJ0bec1otVQovnx544\n6dTIKqy6Ox9UnddmL2NeAUuRTH3j92whlHyf4+nPS5/WbX+EZPOCNoJjDJjc\n9LdHc/I5pSgjb6visYHrUw/b9jtHEFdYZkxk5T1hr0omYVFmlYFp499nllLD\ntjUHsOocNZwF2cz6xvJzWYRQUIovdFHRH4ZqqDfhSO2lIonTTtwgvJpVqA8a\nH3B4l52RKcmY5ZRhDXkUSMVjadOr5+vpfzHcV62gz8WbDL1RXheH/5KA9ygi\n20qHGohBjxtUF1uCvBBbGptYoITqHa9DTyicGDB4h4H6isShGwDa6+/ynkcs\nd/3q\r\n=l4Zs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGslgqW3nBzB3Hbv3GKuYSjHt1sp/F2221TE3o3RRkmgIhAP9/ATjWwiglHgPuLqjk281AFUL11+Gvex/TakicmX7+"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.21_1631275090013_0.4085246671503109"},"_hasShrinkwrap":false},"0.0.2-beta.22":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.22","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"9a0b2857210ac3e8bf1468ee2baa0bb360c59c7b","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.22","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-4uYg9sMTfCJ5pMViwnaedjWMRmuJSMxuvV+VPr9tj03ajnT5K2BlkYAvzDjpjH+0KF200wUyuR5H7wz80nD+dg==","shasum":"7d4aa8dd32f1cbbdf13fae1f78c4eb2d76b24858","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.22.tgz","fileCount":153,"unpackedSize":8200529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO079CRA9TVsSAnZWagAAzokP/09HnDc/BvFa473gNaSV\nFpM8CP7JMo3abvp1AwcvPg3INzj6tPqRRicnzqJWCsZUHqir+FkT1/uWC/hC\nl/H5WsvXCU0ci8uF1IU4gBmfamSDwkO+r2s53nTfZ4FYqwW7oVLo70Vv6xJS\naCW/M64c9vZV6x13AsVmvsvH/9eoGIYHGItzBDobn6Vo0dBRz0s6vjdJdjrU\nDteScqt2fCaCodtvzBPpw6d+S36ETgQu0NZcRkTW/ts/2WdtGt9KarPyB2LP\n7X8RmbcP3iST4Nj4HgLx7FDeIzLSp43Zluk3EDzb5wcERWsc4P96+5cYbtUj\nzBTe00sFH7l14IcB6501S1aYwxh7ns0ANBulMjD7yiYSGF7q6xTEGLY6MDvY\n9dTSF+4aqg+ZpftssHf3Dd9nTGjwAxwRG/KiaH7+41H05puXB2LLyZqGDrav\ngtR+EVZHeOZFISwdXCfAeBJ3Ogzc0++mptpBk8Z9CbR5E+8CMt3EgIivDsll\nlii/TwpqZriFaC4Wl4eJRwxLHMJissNA4hiSS8UJekPzxdrBvKjlkUr9H8H6\nYXSaJXKXYP2nwAKnyQa8IG6camOTsw0M/Mec1f4Pf/ea3FVgt8Bt8tcO1Ql7\no/4PKSaWoQ/yjUEPmnzUiPrRuC6zhOQ138+u1NO030gxOMrFMBQrf1EkZ/TW\nCQ+w\r\n=95ca\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVV625nBGoZMsvZSjvSGAQ320IWNsbbRqZXOjdqohu0AiEA0iOzM4q6gsGxW3fNOETmF798fJxYsiqMBliR9EIzku8="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.22_1631276797760_0.5672566148423086"},"_hasShrinkwrap":false},"0.0.2-beta.23":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.23","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"20f9562e2954f1e1ce756645468619cbcbcd196f","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.23","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-UJAbITHeLLDMot0/bA3YQC6ure5361cBIFhMfhanWeZHolsz1WWr9B7JHBaxJOlKjSxAPrGsTaio/6rHwRq60Q==","shasum":"40ec77e0b1685610035e0a61a9a9fa1f93497793","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.23.tgz","fileCount":153,"unpackedSize":8201020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQLj3CRA9TVsSAnZWagAAhuAP/1Z2A7aIINjXF+lphQMT\n4IqmjqH/7V4eQ08CZJGntV+2QShcbnJMkf9/+Pz2SD+JBk/rExbVJrT2pQxJ\nWyh2Lhi0NEznUjs3EwKgNtjHip0hpNFdcQPcZQHAz+CATWHrONIWigY7BEtF\nmpKWAQE5avjPqnrb0lc+KYw2PPEPvSrCTAzQGUEGx42bBK/vkTMyp9R+fw5D\nvwFh4D7X/zIzV9m9kmq8lvzesUrh15UsWDjhTWRawIyCG75Mu09LgKvPhSx+\nkrb4AwUltiHqlvmfaolG6iyTmqNQbKdikuWAUjtcv17WyafK/S45kxdP5b2S\no6FvYnkc6S/buFjaDrHLbxo6fBFlVpjOm30mfa4paoqUNSSoxDXUFgpN2Lkj\nw09sRTS6vqLO9Pv5arRSEBkNUmxqTv7P3Kjgxs7IzYEjYB35P8tNPsUePtAB\n1esKRuvaDLR0HdFt4prNKONZ5ZI4o4NyOyd5j7c9/QFR8qUD6wgRnJkvI0Do\njBUkpLF7imqjE4rF8fbaUakQWjKcuqTEY4AHl6z0dMoniAW2hFsd5KMXwU4V\nkUiV/xuat4aq5UfIrc8tdHxbhF6A2m7e5+dYJ7hmt5J5B8gQN4wHoJFawyT2\nzaLGR1CqyIT+foBbduSLg3/XUayit/h/EjoGuwaqBtRQzEAfxPAggAQeAUR1\nLN2G\r\n=4jno\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBjrIJCllpQSd6KhUosvlYfmoeYk1bcvmadu3fTECE7dAiAkjZu/ZKrB+qXgRk3CNRbJkKl/zOkp65hWUgTebTBbwA=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.23_1631631607019_0.6485301270306747"},"_hasShrinkwrap":false},"0.0.2-beta.24":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.24","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"75c106595ba9d48e5f7aedb2fb2efcfae6ed3a28","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.24","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-paYODf67u8Yepj22yv6m3kTV8yAovLkgGthn3lr0WKbx3v6Q9/OXCnt1CPJ0M8UEY+g5F18mqlYTpqh+1SgTdQ==","shasum":"56985b4538f5a2623697b01b113a7698b89b34fa","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.24.tgz","fileCount":153,"unpackedSize":8201246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQL5iCRA9TVsSAnZWagAAdKgP/1i3dza74v1KnSSqdkwR\nCdXIhHne85+VWQ3BSXOst9kJ9p0gUiSYmoZ1DTf+JW/mcC3Au44AIl98GnaV\nqIBju9rKQBsb+AhhG2QqWhY2FhBtNaakQFJsFpUMi/unOyY4nQhug02Jpi2C\nD8ZT/IOvY8u6fOdFwEtSWONRArDvi1ZepmctxGM7VJizBgdI+3quAmzBcUI6\neOy7sS7ve0vqkifVTVbNOhvRfFTErgMDN4VGK7Kre+eDEUpc8f4V53SaXBnm\nqpAXP0qjWVIVTJB4FvXCKh7x8UQoUWO48NCGGJizCwuZ/wl9GyRoP57X4irH\n2aXIwniSBfF5A5SjMC1UDTETqzZmxseIvJebf5koqq++XQo4bzNlYV2tpOTi\nq0Vt+ZsQi6IMNtprc6otmmZq+KoQsB91lhgTMIZneEGDq2Dq749p/xYkSAj2\n51/UdDbBOscP56UR1VvYUq5lvz4dpEecxygnRHcdpFyhm9DtqwpAvKU2C1sQ\nzQbBNKSQ1q4qI+OYfeHtfKs9Sx8WrLVhSDn0zxTBPasG06e9PeRi0DyBMK2+\n7FbM/LXajQXDrIH3WHKgFPGCZnu6FpIyN+BNWzOOgIqyZsvakPKE6Ac7EsCa\nPCon0vUykU+g9tPwf5Ama5Njp/jrLq2sFuBO7LCARBieZRGY5CDRubH6bn2V\n8A23\r\n=Va3F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDztO/pswYPV9KbqfYAcgonWfRnlkS/IthcrVYk5gxODgIhAOlYofAhFcvSHdcmIBzLNcma0QFPJ9x8yN15Wre5a4oQ"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.24_1631632994700_0.05058663488967796"},"_hasShrinkwrap":false},"0.0.2-beta.25":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.25","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"181a7ee48e33b23a4fe4cb2a45b8adcec1fcdc0f","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.25","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-x4hL2pG8Lg4gETCUzbqyPZTLsRWAfx9suj3Jbhho4/gvxRd40O4LuU/FquRrjBm5YevZnjWDCUcuVWyGhSbgLw==","shasum":"3b27420028229cc3ad7250211cbb3f31a7a3c994","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.25.tgz","fileCount":153,"unpackedSize":8207115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQdiFCRA9TVsSAnZWagAAWmUP/A10+UtSqqIOvmHNP28K\nywJZU4gWmQMCJyzqcTFav6HrCYNeBFxFopSvR1oE/MXVFjij9q85amZLdGgW\nePSzHrpXvLLV9sb/x/BXPRqqSw6M7G91pXtQm40nPWDfuOe/9egXl4wu8WOF\n2JatF3Zcsf305rp1jmCTbn3dxzGjFKEuKisz7vvOXNpSVYBJS9emlPEqHBZ7\nRD5Yy+uaOR+FZqeWC8bq/DrXuahygJZJuXSRYB9L7B36hrr8c2X8C6DrZvY8\nddrOJVavrmocRBY3N10HqvEDVzlK6eiO3eORdKAFwCBzbvB6zTc8P9cyC9gW\nWiRN+DbD8C7hlPHdjPpfs/dTvT+z8pq/Zp+e08NsLbpc0TvtI2ow0iuhjYaD\naMr+7ayvduAjUUOYi4qifEPgCHR+p9JQ3S9elY3ix+zxYhY8ODFE6tRqV32r\nFoMqvDeJnvGaq6WZW8z/ZfCcGvq/9mk27eaoWBTdVZtT0t7+phJQd/z70rwN\nTWN7HhnLI4fGzCjVll5K2XncU7yUf9JmIdA4qXCJ464RnbNWNhJUUrH1f2ZV\nitMY6sO8yLC99Gi9kgbDQ33QNXUgd2x+UuWGME418JjpiO2ygDDv8yxRjlu1\nzMeGarCEkDLht+tQtx0Jd+qspBS9NlBkwajVicutr0l4J7zl0SWBo8umLMTp\nHiua\r\n=rtPg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICEUtCmPhXjiMTz6KMPjeOjsgjJlvf0Fn61g6QFdzjsZAiEA0MB9skL+YexgE6INTz2rM0EQ53bkVIslBs2CmIpXsZU="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.25_1631705221748_0.2756280678841563"},"_hasShrinkwrap":false},"0.0.2-beta.26":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.26","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^17.0.0"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"43fc43cee54ea5148ffb6aba2067ad6389550799","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.26","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-zbwBeWDSgKjqbw2xbWh1rWydztqIXAmAxDlrd/RQEFvmF8Fxijq/6wZ9wlh34v/1xp7Z+DkJIV1rKjcF1UUJcg==","shasum":"aa3f663d39f96b4a376fbfad7e12e4e03c2a38c6","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.26.tgz","fileCount":154,"unpackedSize":8214692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQfh7CRA9TVsSAnZWagAAPQkQAJ7Cw/JSY/eejSeMJayd\nP1r3Q6nkkg38hs8tSUb2kRQHJUCxXqoilQuv8qssqKhz/CqAL5VgXtHo/U7C\nroH3gXKY4nSt6apHl74WcqesAJIQ2w4uz4AMs3js/psVZmdfwlj+EfcYf6TN\ng/RsVErwbOEk/oH1dlNQXf+0FdXLrWgnnneMPFVbWd1cauWCPmeWeznhuwXx\ntoVuSMjPE2DFGmDKY/Pi0MltqvGl5RmGKJiSCx6nM8D5XfhgZjq/JBClJfsb\nxOj5QEBsaJ1aZ1avexwosqOZ3fPPKiN2ajb2keK2PtDswHAktODJyQ75rEyP\n531UZVXfxFI6enHl2ZkkMIvzQNoiSoBalWZX6CBqQkPeDZvnrNixnsr+/YyP\n19b6aeul2+E8U5/u/KVgVYWCbG8swEP16JvfA74XWe78S0/GHDam+4YWEhRh\ntJ1YLY5bOiC1Use40rsvsbfv4hKt8iGo2O22MMwSkK90GuvIXUJBfFKSnPty\nWlgCBnl7wIcNeoxvX7oAUo7yTJKfByegSaF2mRY1cUZ9vr/SJYCAqxYy6kW6\nzfEKyOP5hmn6Omxo4VX5RCQSJGUX52Q61ozudwAOSI4CiKbThS01o2LCVVB3\nMKbNjNc2/eMqvdbBXw3SAXGViCR+efTYH7gK3kdoElsmZ/Ku1TCBWsGfqXlw\nL2Rm\r\n=LXmX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETdcQ9prSU3Nhw58vCNnhV2/7mg2WhN7t3wLyqqhLROAiEA8ifY5JEVXV+bWNk5EAGKiFtdOnbae5cHmgDIoIXIUXg="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.26_1631713402858_0.9226800740048089"},"_hasShrinkwrap":false},"0.0.2-beta.27":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.27","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^17.0.0"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"36045578d026549ebf4f35d7b871980875f24834","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.27","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-Dslv6QUxt8I284gk4Qc/pRmDtFlCInhfK/EUiTrUyzF/vbiDjM5u3HGmGOaB2+laK9HdIMYqwVgcA4hEY0+VgA==","shasum":"48536816d5db7c095fd8566666af06212f5d261c","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.27.tgz","fileCount":154,"unpackedSize":8214698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQfvvCRA9TVsSAnZWagAAgEwQAILs83M8j7lCk+2qDg6P\n5Nu2ma53uVXXbVT4p194d7CQ4NBHVZwRCcytBnpmZEELtG9nA4bt+rTLHgkb\nFEdPpEdvF3DY5KqUyBlW4l9F/sldTj4E1taMsBYbC54zTlpDxf42d0aARqYw\njlTsvLBIfnLSAzA2EIBlbL9nLyRS6xAb9Xu9GEEqypgIYRxm4JecN1XesR9q\nFJmg/uzC524JHcT0baGfQd1FvdXqrG5/p6vTkTWjm9Q5ABOKArF3DzQV1LRC\n3ni4kZYQrXM6a1oa+EiDqRbfvJSaERrSS7udN1LYeEftQBzsh1Kxml5vgjmG\nWmIja9WTKz5tQ1jrPfd8ZYocJ7WF/8VHm1JK5GlIlJxF2JPdmrWPKOGhFi90\nx9tAfp+YQafBbiGG/vMd+ndxrftvzQCzAVsV3t7Wav286hGdoPQGJ97x2oaG\nEERbkBPaUe5ueNBQCfB1BjUxveDjiZMe505ccC6rfJsvTa1fSCMu/WQlBGtT\ngCsHq5Ie3TRRtOaicwmxxg/rXPbZ3CzWSKNwyddxcZC6wz8r958I5vL3NQhY\nrIIQ+elGCYU92ib+2YCTzSzPD9NDNNB7xRjUXR7FLpLNHKJFJQVhj9O44izb\nvrRWEemTdjuG5Qvl7qZ8pTHJ1F16Qw+97F7pyb66vYrUWVovTUuGC8R/8wr2\nzZwP\r\n=Hiwr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGKlxjAXhWcPJ07+Jr4T3p3DRCPspAkFSTm4ZaAz+VbCAiEAzo1Q9CTY4h+xrNOQz7eljM2yuWTQ2oCPUYS2b4qBekk="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.27_1631714287344_0.6120290087273141"},"_hasShrinkwrap":false},"0.0.2-beta.28":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.28","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^17.0.0"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"f9032756e6eba11005736224df72f99ea0ac0533","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.28","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-3Swu6O8uV3g3/nC5jdPRtSWBBkbSvCRoxRD8G1ayDjBysO3L5OMcPgV5hgQa2Z8RKV5TMytYPFruoZPV90pgmQ==","shasum":"e4e6306c243df8b1d58b92acd35306169b327d03","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.28.tgz","fileCount":154,"unpackedSize":8215731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQiYVCRA9TVsSAnZWagAAKcUP/jubAbh7pem8/OcQNbPJ\nSdx9vpGELAC46PW48r2HXQ9aumiATgzpXzzpXrokAO6oi7RQkFo6lU++/V6r\naiiRDseHKRWvIOD3ONKhpmLeKWBMLu0NnAuuj0SDRoDcBRhXMu8fP62KYuqy\nVGN3yy8YZLrFZP7peU4RpT4q8ISXeL1q4URqFxMFM6oh2tl7Z4RWYzDP2AMf\nrwOKMCbcNxJX5K/9xTbIpf6L2rhejcR6n9K6V5s/samso+eLjxJfLRGu90wQ\nG1mtzlZ2Sp558gsCwEE8Ywj2YGEcLsrVF9Xj/691o0mYOQQxRDTPUaAXXPOw\nmcc/05Wn+on2VtVevtKS9I+Pg87IUjPK/Q2lBEvNh8SHFhBqO7ZdhK7Vu8BY\nGZV+oSmDDtn+ahVJcTUeykm8ZinYST1sKTN6NAqDMdQEKnUBp9lm7wAXuH5x\nPA8S2p++1lCcbOEkA3oWXrAsjUwaGEsrds7n956zWOs4mM5JcbZgGiEutSeK\ncX5QSBUq3KtwW4216Q/UomelVIpi3mSVJlV2NdUinnp+3fHga6WhoMt74KYQ\ngsYo1mMfNpD97jQhU2JBljH5c9/mEvbOI1OPAgzaFZs+/X9apnlUtMJbP0qV\n0EXbFd9jrFZym/K+QvIcwDAtk6CJTuUI/15zTFFAHtL3kLUMOnIehLVdfKB5\nMdZ6\r\n=Qqme\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBVvvWnK3m22zlioFmv8WI67OD8fAHo7kpja25a/EDK8AiArrbv3g4MTCMBme2g9dp3c/+44p2tAnyIgQVY2Qobwpw=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.28_1631725076961_0.789969700704092"},"_hasShrinkwrap":false},"0.0.2-beta.29":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.29","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"95e270460c8f3f41b103806f3c4347d427249243","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.29","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-qr4HXA4Vw9afiHXb59AHE9R14i9+obKD6iFEvAtBppU2TDmLA1Gtlg+/9P/ALxvXU0XpGvfB8HcJG8N5/a8/6w==","shasum":"5d70f3a06245759a4f3be673a92a6afcade96eff","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.29.tgz","fileCount":154,"unpackedSize":8215732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQi2dCRA9TVsSAnZWagAAdwEP/3d9uQmzFglTQ0c+jlu9\neYGT5MbvdnQ+bHZmYYpHVHSuv/DHwgIbrH1RBdWM5AeINNbrwxCqb+FNhozM\n7R39l+1NM0P7WaseVlThMQJA37/5nifaHEFFCUVdRn3Wxs+WbXpk7v2qC0PQ\nO8JrALLOUKNHH0yGsLEt7YsZAdxBr0Aa+L/XZEp8SdgRuZL0NvbKm0E44aCM\nGkMC9ALEFGspKgPJAoF9/UOnXzKl7ma/yTQ7h2KFjUB/0Zw9+emzaLxoY2N4\nCkLlMDzVo8AmZGdZzD+m6L7Wx0AFVVvkVHGOaxnbQnlZNsGSWcZKomleFRkK\ng2owTIOCDy6RuhCklsTA+OwgfTEPy9LA/jhasqLjJtkwu9sPqK8pD9Cs2mDv\nHGVLLhv26iw9HxfysYRKlAmO4cuo7KAS2E8nSvi0Df85TyBIWs6C29d1CfRA\nN0QT4F1NCNqoepzlzJ2N0bBIBpIcnBKxxeqEXyzpnnVMj/pSHmLlFw3YTmrW\nyUps8cFDSo6oEoXdK17Yud84J7TzDH/B6DaYBOFkbRZn0jnwckk0AP5t79pX\nJGis3jMX4HpIXOrdUHVccoW1kKv2YCLmfhVxtRBokmHMFSPL2tW1CmN+ytF4\n9zhix58CG0VVK3QWVEdjQmnN6M3ccIvx7YeOpzDVa+DuXuHwh54pIIYtjBMc\nri3G\r\n=onT5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLPRtCLRAE6XxgiPgqHRtgsQaW/NZVWwrrWEz880ioVAIgbPVzJyaFXYJA5EI5r/n8zocWY5gdgNsD6TwjSuCkqaU="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.29_1631727004965_0.8685432931473642"},"_hasShrinkwrap":false},"0.0.2-beta.30":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.30","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"8da2934854a0f35dbc59c3158e9fd7d36a7bbda0","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.30","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-pYNu19BGjxDrUzhbEKR83Y7JhIoV5B1TDruzaFof1zz1KC4FRug9gGfECND1zQXsv4+RWOpciYk6V8ghTygGiQ==","shasum":"f1c0050395783254d2ad66104886f0ed13a20f05","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.30.tgz","fileCount":154,"unpackedSize":8215594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQxLtCRA9TVsSAnZWagAA+x4P/3z4H+olOXMP3vW9kRsq\nVKykgWCpO4LRFfIrTO/tSdHowUMxTZnmIz45OJDMgXT/e6UVsJoXG5WCJ6r0\nHgE9c+SZ9wM3rMdnZUo52iKw4kfu0O4ebZyEyleyudA6VkKcIBneOrpSO51b\nNm2XYcCZgEyDaO0oKbfxLaZ0zdmp3ks1kZrVhh/941NwfshcqBzjSF2zxoi2\nkl7vWMwP2KNAYzRZFnPt59BJUNPvnVA47EhXPOHoCJvI9lASysr5lboqa9ZM\nJEkVsOM4IjSIT9mM7SovYBgoUKKMmB0is0+jcDYBzt0JXq2jOUhIuMLmdncE\nJ+7BPigwfo/G7OpZuUtNKfFEWFWDi7NjauUvDrkQJYtu0cWGLLT1uUFc9beo\nZWjFDNe7YKT43jrAaXJJCjSSrdOPvkalWxsJtuOX1y7QC+oGPsBjvxABqo0N\nDN07SqJ3TyGXeCOJYz4gkiSVKSAoW2MGsdN8vxU3G36DT8eVG3O3GRaM9P/q\n4ewP2KCq3UhY3IpTQskxDfaTosAYVVpHd4LTZwG/WpJ+wtwmGtD+04JIFaQK\njCa459elGohg7M2NSJcmBQaiF6zdIoXQWyPxr4V17zqYd1k3r+YN+5SIGKkj\neTyBaokECY+NzMQA/2PmmWipyGFSPFMXZ9HvawS89q2Fd+cMcaxVwcN3U2Gm\n5njU\r\n=RvTg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqiDEH5PLxgSv42oko94dvH6zfrVb7Ws06vCyCMNlymAiBDdoB/e+JovYa3S8mNWvVNe8xOwamK2WqLlY6mW0yL4Q=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.30_1631785709803_0.7099393609185112"},"_hasShrinkwrap":false},"0.0.2-beta.31":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.31","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"e2f9859e0584b52094e1253064497b9e868f6f64","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.31","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-+GF/jmfnQlL6Ps5k960LSCxkJwIyzXmN1hpR+RrGQEnzHxUyUs92UPREOOf8ebWccJqUd+1uF7gzqDNzNgepyw==","shasum":"01bc3fd8b33c887ea10d616151851cdc5a56cdcd","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.31.tgz","fileCount":154,"unpackedSize":8215456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQxU7CRA9TVsSAnZWagAA4L0P+wQZifXTVeNTh8KGcg/N\nnmLkGlJDFbbSMmB2ONQsOpa7K8h6Mii9y4oHwOIUEAKmEFviWHdbo3o1DJLP\nM0NzMJ6vwsNsZxVRvdqHpnRdcwIQyipAlthWHKob1vzFX4Y+Mrj+cmGx+6zn\nQSrX64SAvKIhBT1phKynx+s9FpILeMcv0hY2o7Epz8OemciAp6kNTp0/cCug\nyhrReQ+Dofg29dwYPKRGUcUzG8zmxbV7Zd3HQRKzufzQ33cm2dQE/+YS2eRz\nuKWp9PrqpQaeJljyAJ7TaIG2kWUdLOGU99lh5PTKdtT97VYBQH3HfXq3JtSK\n9xf1SCIjgr4Z/6DMZiimYDHpKNCFHcmocLGqY2ERk3n1a5PZh/DdLlDaIHc5\nAxbNwrSFAp/u617MJJkSbI29rJ5SD+bSYOsHMTej9r7lfceH05plhN4wqLwW\nku0cYEMjHrq7T3w8vCgNsgO/rXh1jUBiZUYAO5qNXnv2ZuuFjGJwQToOLwvj\n0M3tZIaaQe1QwvYpW+NNlu21TqkTIu3DClFTDswFm0P/3awKFJ5YJeZo1qZE\nAORMVqjcniX3j95endjerZe+1kfwaD2RYaqLCEX2wCGwoeSbRqapnH7FkMwD\nhnMeP/IjXBN/v38oTT3xj5rT+hqES/aSu+5MWOdMgdTSjNpi/5taAoxQBxdn\n9JUq\r\n=yH+Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFN2vFmjcFTWf3ZSVhu2MKF1UgKhe2nkSE7BWI8xFkGgIgYHi4+cPZWRn15ZjtNSrE8QNQQeErt8y5b9xpi3519yI="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.31_1631786299433_0.09002474988149278"},"_hasShrinkwrap":false},"0.0.2-beta.32":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.32","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"c71292dadf37c59b8782cd39826ee77be027716b","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.32","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-8LMape1Y8sW5wwDnsCiKpaR/6zvfkLV7sy0nq5/ZyH8MPB9vggCtRiFj09k08KpHVcHKKbIa7xK/7EhVfJJ+zg==","shasum":"408ca8292ec8f16065bca2ca83b645f4fbcc6755","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.32.tgz","fileCount":154,"unpackedSize":8215714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEfQ+p15fi5qjaemgDIGOJB37umBI64bCU5ZgK7vdsywIhAOXCeUnKmKuNwNFZLhf4XrVqNlDbQ3/JHAeyE3xfYLI6"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.32_1632300014168_0.44303995985211775"},"_hasShrinkwrap":false},"0.0.2-beta.33":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.33","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"47aa287fbe128588e733bb0e8f61e5fabff95b86","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.33","_nodeVersion":"14.17.6","_npmVersion":"6.14.12","dist":{"integrity":"sha512-U8ctrGrW1cHbCiClMRJ9v5YbndSnn53itn6rvI/1gGNWP9HO89zW/tHR8f+se9JjxkVP6AYpdfdU6JGGAlXbhA==","shasum":"75655048f079119b2acd2dc3a53d63a03e48a671","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.33.tgz","fileCount":154,"unpackedSize":8215654,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuNAFZ8kNK3BnoHvRhFt+IUlvNxfeVal0V8umXqp3nvAIhAMfIl7GraEnQZP5LLh0f1sEJZ6uEwzPQVUcaLezr5A+H"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.33_1632321898484_0.9007141198845976"},"_hasShrinkwrap":false},"0.0.2-beta.34":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.34","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## v1 Roadmap\n\n- [ ] `Header`\n- [x] `Hero`\n- [ ] `Card` (2 variants)\n- [ ] `CTA` (Use for newsletter)\n- [x] `SideMenu`\n- [x] `ProductCard`\n- [ ] `Footer`\n- [ ] `Breadcrumbs`\n- [x] `Pagination`\n- [x] `Review`\n- [ ] `Product`\n- [x] `ProductRow`\n- [ ] `Pricing`\n- [ ] `Input`\n- [ ] `AddressCard` !!\n- [ ] `WishListRow` !!\n- [x] `Typography`\n- [x] `Price`\n- [x] `StarRating`\n- [x] `QuantitySelector`\n- [x] `Button`\n- [ ] `Badge`\n\n\n\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`. \n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"d73f75ccf645a60d8afd3254c57d2e419deddcff","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.34","_nodeVersion":"14.18.0","_npmVersion":"6.14.12","dist":{"integrity":"sha512-MWg6dUnuatvkB5KxYtZYT9tUl4vNXlIGh/qpl6+fJksk1izh3A2ZO5+WClTOJDRdtyEnUg1Hb2iwkRB+CTfavw==","shasum":"0d26d2da0416cf3aa9697cf76f2fb2bae25f1c94","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.34.tgz","fileCount":94,"unpackedSize":5566173,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWUqJLOCftMua+Cfd0ZbD8O201Zq/JQtr93JhMORE3ugIhAO1+zCRoFJqapmZWI6hfDvOtUSFR0NEgLggvc7IPMi8P"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.34_1633089731708_0.6740481508066132"},"_hasShrinkwrap":false},"0.0.2-beta.35":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.35","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"33793fa234957480925713f48f679a9a54c6b5b3","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.35","_nodeVersion":"14.18.0","_npmVersion":"6.14.12","dist":{"integrity":"sha512-ovxstcjaylbZb22hRUd2MqyZGBFEmrtZGqnSlc6ZpeYu042FH7BoXrZEft2oVjYWNfq2ESzQIC11tBloXDswwQ==","shasum":"626f33f3c4ac26314d591d89309aa4883e3450a9","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.35.tgz","fileCount":94,"unpackedSize":5565743,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3EYPh7lpzTvp0iCJ27Py0Ok7E7PDXXg9eZTogan8M0wIhAIYe+Mp16TTYRtvSa+z5PMxyS/AUOPV30qNNa2YrB6uz"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.35_1633090164212_0.28300635152658926"},"_hasShrinkwrap":false},"0.0.2-beta.36":{"name":"unsafe-bc-react-components","version":"0.0.2-beta.36","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"a7e96fcef6ed41c71becd313d42f7252bef5a836","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.2-beta.36","_nodeVersion":"14.18.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-vPo1qYY/cPJvjsQBQ9dHFj2tjWTKcZ7GW4kWhKDPKUMq2r2q7Ta1MwrN3f9mhpOl0x56NTXiJnZjZcs7UwAM4A==","shasum":"eaa624cfa7a9545fb72cb86b6043c002b6c0d531","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.2-beta.36.tgz","fileCount":94,"unpackedSize":5566027,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnYfCrAjty7z2jpiyMZDXOUaSxw3OCtL6yStYQ5PWbswIgHVdl3SH3O+IF3Xz0N3c2iW4/rZt2E4ggOmBTUfPyBCM="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.2-beta.36_1635765649162_0.7539820384315827"},"_hasShrinkwrap":false},"0.0.3":{"name":"unsafe-bc-react-components","version":"0.0.3","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.10.0","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"gitHead":"814021d013e1bdf986d8f8a44721be0333b499c5","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.3","_nodeVersion":"14.18.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-P4BxD1o163oi6n2QmSPuPj0uJzE71CwVrQDePxumuewft4PLM6tmzsL3mIWVyxgpQJTOW+FDuiwzLxBfuondnA==","shasum":"6ae7b5d0d30e5fe6fa5ffd866a17c9954d27d919","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.3.tgz","fileCount":94,"unpackedSize":5566193,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3gSbVhIDcme26aPFRe0VOpLZvNWEARfZeHpwhfmB09QIhALjnBCwBHmv0/wmv4AnTGhP7kG/lNW3IffBof2Bgvme2"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.3_1635866723371_0.682191283935599"},"_hasShrinkwrap":false},"0.0.4":{"name":"unsafe-bc-react-components","version":"0.0.4","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"gitHead":"644e093461b34181644ab2a1475dd1067b1bdc34","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.4","_nodeVersion":"14.18.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-No12b4USM4Ly9QI0ISS4SRt7XKFxvs3eC8UQbOmdKVhGiAhXcrW+hyID5MR7dAEmAPs8Qx09dr5KWoNrE5V5vA==","shasum":"32c8d6b6ed4352b66991144ae43a1dc6b21e1f53","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.4.tgz","fileCount":94,"unpackedSize":5566245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2/BQCRA9TVsSAnZWagAAnt4P/jhTIDf+nHHBCMIJ4z6F\nXXDBcxpA0Y/KPKdzb3DgLVAkVfv4RT2goA4jzMtHVVwt2LWA5bNq+c1/0/JV\niYOJAorNoy7zJkhg8j7kWiAfWnRa1ku5MW3+924WI/P+Or1LixkOtldtT2VE\nVzJAJwwZIh1GLPWflKjmpQl7JAu3IYc0myfUTHNFHNk/OQD8r+5dTynVj84K\neHukoSBJR0Z0ewp1hJzKXJh2St48Rx4eLdDNN5NqAMSakdRAnUjttpiD5hs+\nvHTSNQ0j13O34RP1ytu+cBjkeg+KdUe/sKo/LWu3pvigfHQ4Kwa5WsB9Pbl3\nhNM2MLm2kMQVliBJOAjLSdGisbhdfa8HPXzLglUej+G2MP0Pr+KSfxEuVBtR\nSXuZFns/3N4iw3ZmMlFDUVUt9KUs15tH4Lqyk6XMqNqF9Lb4KFeUOV6FIGsg\nwH6eaO7QzyHqAIoyIJy/LGssayHFWep8R7iszcGUaCvbjNIH3Qc7dIjfoCrj\nuqUkYjqppSeAhjWJ0chWVlRQ2IV2WyRI0NW2bMtwf48ZcF2QYSB69+m9tlI9\na2pB75eUYVX9VgYgbN7EdkVbItcGdoPsGrl0dj4CSe8eA1ouB8Beq57ZBQ4c\ngdY2qr5lADZMcX3zi0Np6y17IPv4VbeYbQ5a+XPhjdWHCE/THK/peaCMIodG\nq6rU\r\n=XysD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7wG18MTOOtcCduJ2xXHub6R2kWnvP2ez/zPYoD9tOvwIhAL8QVV2jbaOTx+iK2KKjhaXt5ZgJ8WpiUpVzbCUWDsT9"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.4_1635950608378_0.8407093109327781"},"_hasShrinkwrap":false},"0.0.5-beta.0":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.0","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.2.7","@storybook/react":"^6.2.7","@types/react-flatpickr":"^3.8.1","classnames":"^2.2.6","date-fns":"^2.16.1","emotion-reset":"^3.0.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","flatpickr":"^4.6.9","i":"^0.3.6","js-cookie":"^2.2.1","lodash":"^4.17.15","npm":"^6.14.7","react-datepicker":"^4.1.1","react-docgen-typescript":"^1.21.0","react-docgen-typescript-loader":"^3.7.2","react-easy-swipe":"^0.0.21","react-flatpickr":"^3.10.0","reakit":"^1.3.6"},"peerDependencies":{"@emotion/react":"^11.1.5","prop-types":"^15.5.4","react":"^16.0.0","react-dom":"^16.0.0"},"devDependencies":{"@emotion/babel-plugin":"^11.3.0","@emotion/babel-preset-css-prop":"^11.2.0","@emotion/react":"^11.1.5","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.2.7","@storybook/addon-essentials":"^6.2.7","@storybook/addon-info":"^5.3.21","@storybook/preset-create-react-app":"^3.1.7","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.7","@svgr/rollup":"^2.4.1","@types/jest":"^23.0.1","@types/lodash":"^4.14.150","@types/react":"^16.3.13","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.0.5","@types/styled-components":"^5.0.1","@typescript-eslint/eslint-plugin":"^2.26.0","babel-core":"^6.26.3","babel-loader":"^8.1.0","babel-runtime":"^6.26.0","cross-env":"^5.1.4","eslint":"^6.0.1","eslint-config-airbnb":"^18.0.1","eslint-config-airbnb-typescript":"^7.0.0","eslint-config-preact":"^1.1.0","eslint-config-prettier":"^6.10.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.1.2","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.3","eslint-plugin-react-hooks":"^2.5.0","eslint-plugin-simple-import-sort":"^5.0.1","gh-pages":"^1.2.0","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"^16.4.1","react-docgen":"^5.3.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-postcss-modules":"^2.0.1","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.1","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.8.3"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"857b4d2814d0e067f9cafb6b7362d774c9171f49","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-pgYXxjtlAuFYbY2NlmFX/Vsoi/VlIBoa7hyUSUNJGFlncjxzR1X1HEtNcXY1u6mlP5aHm95cM3h39A3ITbbhIw==","shasum":"46df6f8244224a7fa47f1f07b757a3ca5b1dfa69","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.0.tgz","fileCount":94,"unpackedSize":5566252,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGh9Tiu85ld1R+y9nvd2JL32bY7Sz7CVfcpof8oB84VAiAoIuedLzmkxaqjyg5lsFOGfRQ5CB3jsI7Lk9PKO2W2cw=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.0_1635951087248_0.32607505590480157"},"_hasShrinkwrap":false},"0.0.5-beta.1":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.1","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint --format=pretty . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.3.12","@storybook/react":"^6.3.12","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-config-airbnb-typescript":"^7.2.1","eslint-config-prettier":"^6.15.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.2.0","eslint-plugin-import":"^2.25.2","eslint-plugin-jest":"^23.20.0","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-prettier":"^3.4.1","eslint-plugin-promise":"^4.3.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^2.5.1","eslint-plugin-simple-import-sort":"^5.0.3","prettier":"^1.19.1","prettier-eslint":"^9.0.2","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.9.10"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"c1be29eddc716b6015d9c24fcb544e1ade54622b","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.1","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-dwEXfgtZ/aGCu5lWoXG3uklhcmCVlZGrwgXGxrN1lxBgI/TjhxsfMYlmusl7jegAloANZpqq5r3LL1wht/Y8pQ==","shasum":"2726b7df3ba022735d1b5332d159c502a6f71fb1","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.1.tgz","fileCount":94,"unpackedSize":5713605,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/iHy3k6kFCKStabkZ+mWtQ712KZ53GwIfu41ync70zAiAPJuUFivUlQ25dupfX/5whT6t/M6DPPPLiH2qqddr6aA=="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.1_1636483479682_0.6865036568681488"},"_hasShrinkwrap":false},"0.0.5-beta.2":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.2","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint --format=pretty . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.3.12","@storybook/react":"^6.3.12","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-config-airbnb-typescript":"^7.2.1","eslint-config-prettier":"^6.15.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.2.0","eslint-plugin-import":"^2.25.2","eslint-plugin-jest":"^23.20.0","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-prettier":"^3.4.1","eslint-plugin-promise":"^4.3.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^2.5.1","eslint-plugin-simple-import-sort":"^5.0.3","prettier":"^1.19.1","prettier-eslint":"^9.0.2","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.9.10"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"1f75aef9af713f0aae9ca704496b65a6e785e92b","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.2","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-nD5qL0w5ab8YBrSEzQny8cJyipKqq8NHaeYB6kfzUY/QVzmmN/Yahf7rZ6ytmeQTjf7Ycr3wH+80e00/tZocbw==","shasum":"107db9e2bd2cbedffd94ee5330b8ed580e8fd80a","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.2.tgz","fileCount":94,"unpackedSize":5712787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7skACRA9TVsSAnZWagAAUQQP/jHGtLpeLAUaD+XX4PA0\ngWzmoSMxq/GVa+ScEfkdm0LLthPIwqBs07VY7BAdMigbLkZVzMILFuQ4d+Lu\nAMMsqWm8gxh8pISsB5Ml67C5xxcCLU7GjmJlYkJfSJmGR6v/6y9We6DBS86n\n4fvDwz695IoqkljrDoIA9xMCkGMHiuVSlh7XLJ7wJhNn+hpTUITC6D9bb+hc\nZJu7phM9oJ8RneXCrNcPKACKu1daRACHM/6YMCVSdJ53qMSZ92e/oPYRf+l+\n7BDPX9S+Ht3rUiJ2HsXx+o3vrtDui5S+RBQzDjqVb6SD/pnJYM4tbGrI1lIB\nxSMd8OrWNYtplGdDaCmDxwdg+Vyzi+hzKyC36s7I6rasyE6py2jDJPBnIlcB\ngG56ekuRFyrfqKvlVkJVQX4AjNGcSdw3lH7G8avTJ30oFeGuh1ZIx79812ES\nyJ+Ta/h7wRnmVm6gMdLvCzHfmt4aiubJasTU/WtZlpy4yz9ibNCEXMQpSOte\nM0ksW4bszEBk8y5SreL0bE/zF0DiVo8di1FN2BnK/KPpxII+41IL8xbD9jKM\nr3Z1q+hNWd++te3M0Mls/ynP6JZf7cOuN1TXQPETuDItvn2hAZQr1pbz64d/\ncvQM5Wa6eDwV9pl2/I9S4zjTLuBClZl8FSI4zKci3I3ToW4pBDkxXxI+sBMl\ndcax\r\n=zEWG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7l7NDPruZYFk4tUe1MXnU3KKI4I0Ak9Hy6I+XRP+2ZgIhAJBYcN9yYQq0kQ2OU6pAgfROY4xiNMoq2Sa8A1rugR8t"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.2_1643038976006_0.7305861583192303"},"_hasShrinkwrap":false},"0.0.5-beta.3":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.3","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint --format=pretty . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.3.12","@storybook/react":"^6.3.12","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-config-airbnb-typescript":"^7.2.1","eslint-config-prettier":"^6.15.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.2.0","eslint-plugin-import":"^2.25.2","eslint-plugin-jest":"^23.20.0","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-prettier":"^3.4.1","eslint-plugin-promise":"^4.3.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^2.5.1","eslint-plugin-simple-import-sort":"^5.0.3","prettier":"^1.19.1","prettier-eslint":"^9.0.2","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.9.10"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"8156ad7df6ae52dbde6f4229ed98aed894495f9f","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-28se4lC7ayRjiHPEu7jZXcfN90nOpnZa005fpb3+j6HbKczQmXO7unPhiZGPkdZW1d2Cz8Li7EqcR5CjrzkonQ==","shasum":"7d3f124478ec7a0023fb525fc8db3f77a975474d","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.3.tgz","fileCount":94,"unpackedSize":5714109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8DIPCRA9TVsSAnZWagAAU+YP/3pF6iwFSHOq3M/lMM7/\nPggM6VmjMXsqbg8TY8P7BGWimeUXb/DKgkdXUwoNpyeiFsqPSEsvULjteevg\nqY46JJ3CY5daljZGVtSfR9rH/f3SqSZdi7HhwfwTYBCAQimZRMWOWMrOv/fq\nDHmAQofjr8zWu0+/tbXoIyk2EBdr2+maRgL9egCcK5L2CB6f5DUtfjShMiHn\nZoodKxoRtutYoMTVp1SNvofXN/Gmx9zCXDZ4IWzUtRrIhZjr37DukMO/FLcI\n8qQ8VtfPuxzIi5+7WLx8W6E73std5I5aZ8sY3zWMYeI01dA0EQhAVdymq/Ti\niN6vJhDTEnOQpj/FOFh4rvfcXfkWZVRtrWw5qvpCXK7IXFSKj8/oyDZbx4F1\ndoEcnaiIvO+ieKqblwNIAmYHKuS7mvPU8HkXpoMHkDQ4NuBgpv8YN3YQ9fGL\n1CMh6dUG/XD084iFv0TpVlzXxn4tKQZ+gfWwfmaJ+TSART46txram8PVLlsv\nKE9FYLcJDnASMCcjjQFyrzwqw/GE1s3x7uj5ldqcl6IR8VeuhzkGCtKC3xud\npkiXFSj3zDhUYOXKkCglBJFxTFAyqbnOhrznHz3IS6lVzFKq9naAFCc7CG5P\nEHV/Jp3D39W3TdF7xiogzSnVl0u5ee1DpMMRSgu+BMbhjwxeKBehY8PGht/d\nqzNv\r\n=mqau\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCZx+sTwwnHKeJJlP2kG+NiOOGSwESe3REsz/DgFf0tAIhAMulNUcfgVEoJq4Ao6nsCukrMKDh0q/PuixLeu4zWWOp"}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.3_1643131407342_0.7434755419352015"},"_hasShrinkwrap":false},"0.0.5-beta.4":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.4","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint --format=pretty . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.3.12","@storybook/react":"^6.3.12","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-config-airbnb-typescript":"^7.2.1","eslint-config-prettier":"^6.15.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.2.0","eslint-plugin-import":"^2.25.2","eslint-plugin-jest":"^23.20.0","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-prettier":"^3.4.1","eslint-plugin-promise":"^4.3.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^2.5.1","eslint-plugin-simple-import-sort":"^5.0.3","prettier":"^1.19.1","prettier-eslint":"^9.0.2","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.9.10"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"ce95947535fecb475dfcf24f409179a485e3f2ec","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.4","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ExLm1dd3qvOMKTwaeR11Mcnay+pw30oshbswLBCIQB6PplRirT9RfGqQtujt9URgT/IKTatS7kAXQai+wtLyOw==","shasum":"84ef45998749d3b166253ec9855c90ef3e9e6547","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.4.tgz","fileCount":94,"unpackedSize":5714371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8DOdCRA9TVsSAnZWagAAoRwP/08ZsOwaYP4Ioh3HLYNm\ngqhBJEYOnJBo5jRW+6DJ38nAPNX5xqgDDigOsyFi3tsrSqqNXIlZHykyf3pb\nJSyo2pwcfdd0P41VlX06huhV8gXaMTkG1g5WfiEh+i3b4gLE1EUEKDeQKMbY\nbmvMly58VYd76v9LLkZob0ZzlqU99CIIGOzHbKrcSDSLSQOoq8BAeiV6xik+\nXSzetBUA8Z2/3Dht+8LpNdgegbL3iysglXEOx1NzF6mvxzMBDmKZFAFEaeX4\nc7X4seyeBydOwhLiYoruJ0+402zjWR3yZ6jGNhARQdJ8zB4R9lR/7x+6O+Dl\nZqXFz5mvSNi2zEey15vC1/IQk7MzqRDnuDCPGAC5KjztgYPEcsdF370Vlku2\nNRd4d7b0BP7+rac+UvKNQkbgsejvCLnXF8lknKop33AHmDazIbjybCtxv424\nzTQ99dcgo2M77QJUYSJobybTQXdvICYOeuqAhPkKXjyogf0L9vRbT4YmM6V7\nOfXTIQu4qKqg4tgADXZNPZsA+LLpSoRlxUtk2KRagkjRuYjeePQWqT1blgVe\n1vHhfdEJLNDm1sAM35R4qERz2vO2yGs3HhrRkCrHmD+K5Agld/1lQbRl3oLe\nBz9jnJIByHdKHspfStnuqH6VjFkKR/DPs3T80EI77fNbSztDo2flQb1PilSA\nFkFZ\r\n=dSdB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3bGiD1T+T1KT+UbuucupRsHHtwYR0y6o0fRrl7qvGQAiEAvEgD/WRSckqVFXqoNmbHLseD77mvEjoa0JbEZQCZIpI="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.4_1643131804960_0.6272385493949078"},"_hasShrinkwrap":false},"0.0.5-beta.5":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.5","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint --format=pretty . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.3.12","@storybook/react":"^6.3.12","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-config-airbnb-typescript":"^7.2.1","eslint-config-prettier":"^6.15.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.2.0","eslint-plugin-import":"^2.25.2","eslint-plugin-jest":"^23.20.0","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-prettier":"^3.4.1","eslint-plugin-promise":"^4.3.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^2.5.1","eslint-plugin-simple-import-sort":"^5.0.3","prettier":"^1.19.1","prettier-eslint":"^9.0.2","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.9.10"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"ded18fc4467448e0e054ec691936d35f0c1d5aff","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.5","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Nh9xRU0//SaAhES5VV7YNkJ5T/VuNrcakvKHWXb2JFUELqIRjBRovwWefyCB2/kva+cidinnyLF697570mBIng==","shasum":"91e75d342f755aa2ae10bd0a6f1557059b7d97d5","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.5.tgz","fileCount":94,"unpackedSize":5717323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8DVCCRA9TVsSAnZWagAAozQQAJZNHeP5+gbV4onDcThg\nOhCis3wd3JNoAVBP0MdGPK+XRveqF/Gn6ZGM8pA4xzOmOlFNavNl8xo6hNNk\nbaTJzN0q0CXbDNhX40bH5mDPZmReJJhbnj5CGow1kKx9ClX2KlAShvNOR0wm\n0uzyEM1pW4GfmPYpl0zJfIzp9GJfhLthzpK9Sy5Mc9nzbhFs7zRghKZFvc1O\n3YRGWJ10JazkfUjtnlW8uxZMFc1S6gC9aBX4QosJmqlsdWFpOCxDhRep4bhp\n+3WoouUrTfFs0QDM/s0JfwPDPAJdjSxQH5ZpmQ0qHBDPg238xniiLCaHMyRX\nOlKKY6hXq3ZlEAi2YmS7OwI7w5a5HLQzgSh+5yVumlnNDJ4zrgsoIngrn04J\nPk34j+u/ggCSjHA+6HWSQ2NWbe8PsSAHXI+4zbLasOVJF+kustrUNDno1nga\n5GSTFRuM3oaiUH9V2Ep8dwNtF99dKfAQa02aoZ7McWj+pgc9Pe4Cjwap+kOO\nJOHeTQ1oEm5TWg9s4lfCYrnFBSYOtryQOQ78QLiXz/hzf9n5ZtfbU1zFSCZl\nIG3XAPSGX/Mqw1jOugJoEVIhWE3lMDf2Ktq1+7JHBpQZJtjMzBcO0LJHTIBA\n6Xb6GlmLymZtj2bgHETx6srETXKUMtEkRYAJB3c0qdgMTr5K907ejt5oZO6X\n3e8E\r\n=Ufj4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICip0ah4IadYcrrzfJQujjeDSyx7w22H9bPjjr4tNOBwAiEArHGIK4+kC/2QSP3pJZs6UVAJFiu5uho+IOlsrOw3JN0="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.5_1643132226336_0.6716244493661494"},"_hasShrinkwrap":false},"0.0.5-beta.6":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.6","description":"BigCommerce theme components built for Preact and React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint --format=pretty . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.3.12","@storybook/react":"^6.3.12","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.2.1","eslint-config-airbnb-typescript":"^7.2.1","eslint-config-prettier":"^6.15.0","eslint-config-react":"^1.1.7","eslint-formatter-pretty":"^3.0.1","eslint-plugin-eslint-comments":"^3.2.0","eslint-plugin-import":"^2.25.2","eslint-plugin-jest":"^23.20.0","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-prettier":"^3.4.1","eslint-plugin-promise":"^4.3.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^2.5.1","eslint-plugin-simple-import-sort":"^5.0.3","prettier":"^1.19.1","prettier-eslint":"^9.0.2","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^3.9.10"},"resolutions":{"@types/react":"^16.3.13"},"jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n## Install\n\nFor now, until we deploy a package to NPM, you'll want to use the `link` feature for npm.\n1. Copy this repo into a directory of your choosing within your project.\n2. in your `package.json`, add an entry under `dependencies` for `\"storefront-ui-components\": \"link:../YOUR/PATH/TO/THE/REPO\"`\n  2.1 For example, since our `example` app is in the root dir, the link to the package in that `package.json` is `\"link:..\"`\n3. run\n```bash\nyarn install\n```\n4. Now you can import components from the library using `import { Core, Widget } from 'storefront-ui-components'`\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"a6fe589b76859791774d5bfe20d61608b2c8c3d4","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.6","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-zJLLHAwUZT9q8XPwm4DoTCCsmZb2hpUAZRNH3YxLPXXIEgmektk/Rj3jMkIdktoqq/79bmwPQiVJsZaZS4XOWg==","shasum":"bac106a73b57f1d7c9433527a45fb7a548c78832","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.6.tgz","fileCount":94,"unpackedSize":5717453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBSTYCRA9TVsSAnZWagAAuzoP/2J6mORILJy2iqmLpQr3\ntM/yTDYtoLZ2TKmRt/GvrjVdELt53flm0tylmCJ7xAB77/ofSFUMZwZRK7QQ\ndsiEISCOsnfpstXCPCcEP/nNBfSdbYgQxCWDhIBG966BcHIHbBKmTQNw+0tK\nNPkVQEzLdUYlh0dmP2xFgCJyD8SuU3i1PBhylOE7J8FLCRec4GMBq0OLAMdY\n6mziwwCxV3/W7Gz/bTg2CkWSAlbswzf/yiyuV1UUqxQ3+1W4zmcbX+1FFnNB\nFCTElBstm31h1B/gLlH4Sm9b/mjdepnGiQLfz1pT7ltF4I32eA3IECnC79E2\nWkTPd1ROX61q+upfCvYo5QsqrYoZD1SevllGOXsyX3+TjX7gavA5QFmnU9mV\nmyUm2on07lbgCQhR69KjnUnqoOHRmThjXshtYvXjMv/gwxnwEmQSclGa53C6\nUgwSex4crQlTLNxsLAKWWopUWL3i9iO3ulspJvIZZSP9VKCv9EneiLdfZRCo\nK9PTBm2JeURJBwM5WMysvgJ9Pg2AorM2XWIQ0xr2PMSieWYdEthAFNmWf6ez\n9A81Sg2Wlr77Ak2rD5FcyZkWqaQqR30rsOy8U5DCVg2yWzZpuQt68Ubazepg\nFg7j2kDvm1whKzKF1iB06kOSYCRTSGNRrPa/eobOJ6x8qaqyDiltliV/G1uw\nFwEq\r\n=e5Vw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGSDzLBS8uHntLFfcp/waNuQMLGHVANX5ldCxhXmPyAOAiEAoUC7qkV1RfroGL8WC/QZ3mLPjGEpWmVn3+LPidU1FlA="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.6_1644504280666_0.8970506213851202"},"_hasShrinkwrap":false},"0.0.5-beta.7":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.7","description":"BigCommerce theme components built for React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.4.19","@storybook/react":"^6.4.19","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@bigcommerce/eslint-config":"^2.3.1","@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^8.10.0","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^4.6.2"},"resolutions":{"@types/react":"^16.3.13"},"prettier":"@bigcommerce/eslint-config/prettier","jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n\n## Install\n### Get the published version\nhttps://www.npmjs.com/package/unsafe-bc-react-components/v/0.0.2-beta.25\n\n### Link the library locally with your project\nTo link this library locally, you'll want to use [yalc](https://github.com/wclr/yalc).\n1. Install `yalc` globally in your machine: `yarn global add yalc`\n2. Copy this repo into a directory of your choose.\n3. Run `yalc publish --push` in the library root dir. (`--push` flag is used to propagate all changes automatically to existing yalc package installations)\n4. Run `yalc add unsafe-bc-react-components` in your dependent project.\n5. It's done! Now you can import components from the library using `import { Button } from 'unsafe-bc-react-components'`\n\nUpdating components:\n1. Just need to run `yalc publish --push` to propagate your changes on the linked project (`--push` flag is used to propagate all changes automatically to existing yalc package installations). \n\nUnlinking the library:\n1. Run `yalc remove unsafe-bc-react-components` in your dependent project.\n2. Run `yalc installations clean unsafe-bc-react-components` in the library root dir to unpublish.\n\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"a135ee50c371118358c93b8a5abd6d1fc297f58a","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.7","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-dwnkH7/Bnc3sf+TCmDtjbv53d2pqrXKOEgsYh5uXtd6C3RORTUs9leE0wvdhKfcTwtbAslXJWePDkGzNxPsf2Q==","shasum":"988aab0dd698c6a322fe342915d895e8fe53297c","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.7.tgz","fileCount":95,"unpackedSize":5615134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQdZAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEfA//WmKLMIcLzPqWWXap14vXE01UYFe8V34f9nuIu79/R7EoPH58\r\no8+Uxi8ZU/J/SxeDFf3jaaqdQgPUzhH3zJYiC5dMZQe/4M/QvnFIjwZ26CLI\r\n3nKk/t1PkuN+YJOx0K9CX4I7KSi55oWpCMQmtJNktXXkoc80qSnbZ8DITEAr\r\nfGXRLe7I8KXbIjU0AO/J81WEQa/vixA+q4LFIFA/6jEig29InJpyuSWFLGFn\r\n6DaUnqKfER54OcD4XwMOqDiLtIHOjCB2cpxzIl4LTIN25AheSjx5LtHtn/VF\r\noSM45Rbw7vNxigbvLSlAD2MpD35ULpJLeYnK6teyVjsLQCR6KAzoI3q6GjVZ\r\nS+UB33Duh/VRxpNGhEQOYm/x3ooGqJcZE6ReJesfd7R86Ef8fhN0pDL9iH32\r\nMS/HoR8efvBzifPxcvNsgnWvmSUC3PwXuGDyDFFrKuBFJYCIFDVM6YUxIReh\r\ncT4mzsER144VMz0YXFNj4+j4zmYS8l0ZGroOkOJftboUR8g3psfk6M4+V6PM\r\nzg/T7beaCjPIUc21nyDdjhutaoFI0uDbynD16ebP4/NeMpocNs6365ysnraE\r\nkSjh+fPAWZh8K3JLF9cucoPyBySk+vx40RkszH9GVBfwZa9gSUZH/q9TfbqT\r\n11dyQYdkyt+VUan3qVxLFV4svoveSkGBbns=\r\n=ArtH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJAsFBLlMTYKVGhA5/VS9JsykLHFSHUSEHIMiF7tBwhgIgfO7Q+or1i0H7b30yPTMvMQJa+rMg4j8JEWykO6HIQsY="}]},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.7_1648481856538_0.4856710040144152"},"_hasShrinkwrap":false},"0.0.5-beta.8":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.8","description":"BigCommerce theme components built for React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.4.19","@storybook/react":"^6.4.19","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@bigcommerce/eslint-config":"^2.3.1","@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^8.10.0","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^4.6.2"},"resolutions":{"@types/react":"^16.3.13"},"prettier":"@bigcommerce/eslint-config/prettier","jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n\n## Install\n### Get the published version\nhttps://www.npmjs.com/package/unsafe-bc-react-components/v/0.0.2-beta.25\n\n### Link the library locally with your project\nTo link this library locally, you'll want to use [yalc](https://github.com/wclr/yalc).\n1. Install `yalc` globally in your machine: `yarn global add yalc`\n2. Copy this repo into a directory of your choose.\n3. Run `yalc publish --push` in the library root dir. (`--push` flag is used to propagate all changes automatically to existing yalc package installations)\n4. Run `yalc add unsafe-bc-react-components` in your dependent project.\n5. It's done! Now you can import components from the library using `import { Button } from 'unsafe-bc-react-components'`\n\nUpdating components:\n1. Just need to run `yalc publish --push` to propagate your changes on the linked project (`--push` flag is used to propagate all changes automatically to existing yalc package installations). \n\nUnlinking the library:\n1. Run `yalc remove unsafe-bc-react-components` in your dependent project.\n2. Run `yalc installations clean unsafe-bc-react-components` in the library root dir to unpublish.\n\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"bd9dc859683d316336cfb5174cd838dbf6708563","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.8","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-VOJXiJrlUkrQDuAL75BQy2Eha+ksGl8M/q7O2/48KayfviPVwra0IFysUT8PMRstyHgg+urDBGHSLx3NuZ756w==","shasum":"39f4ee682035b168040abea095d07b7be8953782","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.8.tgz","fileCount":95,"unpackedSize":5615134,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpIJTU7HpA5Muxr4B2KpekI9dma20gAFUWuqfpqz+L+QIhAImoYlFDCr2ZORcEewbJg4tQ5GCUqIyhl/zFxfPz4GPf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTHK3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoB8w/9FH/bSvmkqPlcREjGhBxpEMS3mFlj8yP3XpEM/Shn7kt/l/+y\r\ns8o9302Lwd3u+aFHmDzA9bjfFDcW4CpPTmV/mWKEcjglWa4o8pcED+Vqf5dz\r\nh4PYO6Yzs9hcEXMnZv5zIE1lqKCfufeMLizw5tsFKdshVSZKF46oOilTUatf\r\nj5Xzd8wP3zZ/1hHtEqAzqTMVH6eyh+QjDl7FIjrpfhIYj4GjBjlqMpmM/l2o\r\ncHHt0bd7/BsxiPaihxMuJvpLGrISw3RSTJv3/+kk2mxvtxPMQ4r6iDzgzDig\r\npP0gb+HS/06DWVg1H+x3LrAdp5HimKG3N7u+qDegDR4vrLBPUWP0YmqnxrYf\r\n4Vj9BgkqowCVI+B1Km+19UvAQK5hmdwtN7T+bTIxeANw7BFtD/4ti6i/WlLa\r\nHN0EVMgFt5iLXPxyqjfpfgMvBjFMXshztBENCKsPxivb5509NJ8W/JkalFdn\r\n2Ud/gfOhcoEfwbSIsd7ly2HxLaACXJPYljnZikM2n1fZiSTRGzGyO0kvK8c9\r\nqRJsXZ4j85/Un+0g1DO0E95pdHU7r5dqTqq9uYb492XvFwDZzHIse0psy95U\r\nb0ha2HLV7wfdoCdLPFXTUhkfQJDiDoiBa+qz5SM20oHVdtPkybuPxiG5nhBe\r\nhi4ty4WCMZUcZxyR1qSBKcPcLRNRG1cmYoA=\r\n=6ukZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.8_1649177271043_0.10341105050103327"},"_hasShrinkwrap":false},"0.0.5":{"name":"unsafe-bc-react-components","version":"0.0.5","description":"BigCommerce theme components built for React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.4.19","@storybook/react":"^6.4.19","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@bigcommerce/eslint-config":"^2.3.1","@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^8.10.0","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^4.6.2"},"resolutions":{"@types/react":"^16.3.13"},"prettier":"@bigcommerce/eslint-config/prettier","jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","gitHead":"65b070fee0d9c93651c2e73b160b2e62d6ba9404","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-epS7+Hfdr7WTG1/ezctkfXdAtXbA0gGO1Ksc4yn+uuHFDd/YHarfUx+w+Q7j1+5JIDKTv4ctj3UIgDlhbp0qfA==","shasum":"09ecedfb89a56d99ddf8fad186825433338d98ba","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5.tgz","fileCount":95,"unpackedSize":5615127,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8jGali9ZHp4itj2AEw1McdqOkKBjw6vup1PtwQZgm/AiAFe3K/5+H5wxjV/Zsp9Pe03Gg6nMUZqf7MhQizhAsXrA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTHO2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodlA//ToSpsFTDpMaqB4QMHtvxr0dUIQ7mlEaLkVDrLAxd6VOinD+x\r\n9w4nyz7di/0zeusz+RYOyMBMIEk3aLRhGklPTeq1D4wMC0C8COw9gLAC2Y0z\r\nI+plQuQHLdu+Jsv89+CZWfbtPAY8lJmcuI+T//AeshJJ3y8p54grr8MmMujk\r\nmnJ7M4lpNMwDfpoSUu3DtUw54/iHi6EIxqjSyFN9FWmakJmCFgF4SNgc6MXX\r\nYKUlatK3iXqRxXqSqc4xbWfNo+8RCPzaHzkwN1cKnP49q8xOoA7/Ga2jQ4cP\r\n3pziUeFMc82JDagM9Qs/h8qh/cJUBlDpawIi/l0z/fWWrPviYXVfGDMYZgog\r\nfqIlznha1GsJ1XKs13khXQ2adsRoSGbvDgToHGElgDeWpkXZEMCJ5YKgJuq7\r\ngh8PTwCAznb8NSReQOz1YZGPGnM+wqtQn21rSzn0bUhwDu7hHS+YstkLG091\r\nmzZb7ur4+J3ROCm/QRLsKI9rHYLtoevIw6tUs5q/V8o+eERbfzl/+Tu9b1UQ\r\nlgMEXlxCOmAlkcRb+hpGmWGog+ImZQQiMheAiTp60SxuKg11X+YRJox2KzcA\r\nE1UFTpKY3QgaaiVck6rgBTo9N168vgAXNn3NOhc9404pm0aLoRZRRMr+RA+E\r\n9eF6G17fZGj+w44yFLMAHpYnfDJ/iRtrXLk=\r\n=/E8z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5_1649177526625_0.05832717106917307"},"_hasShrinkwrap":false},"0.0.5-beta.9":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.9","description":"BigCommerce theme components built for React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.4.19","@storybook/react":"^6.4.19","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@bigcommerce/eslint-config":"^2.3.1","@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^8.10.0","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^4.6.2"},"resolutions":{"@types/react":"^16.3.13"},"prettier":"@bigcommerce/eslint-config/prettier","jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n\n## Install\n### Get the published version\nhttps://www.npmjs.com/package/unsafe-bc-react-components/v/0.0.2-beta.25\n\n### Link the library locally with your project\nTo link this library locally, you'll want to use [yalc](https://github.com/wclr/yalc).\n1. Install `yalc` globally in your machine: `yarn global add yalc`\n2. Copy this repo into a directory of your choose.\n3. Run `yalc publish --push` in the library root dir. (`--push` flag is used to propagate all changes automatically to existing yalc package installations)\n4. Run `yalc add unsafe-bc-react-components` in your dependent project.\n5. It's done! Now you can import components from the library using `import { Button } from 'unsafe-bc-react-components'`\n\nUpdating components:\n1. Just need to run `yalc publish --push` to propagate your changes on the linked project (`--push` flag is used to propagate all changes automatically to existing yalc package installations). \n\nUnlinking the library:\n1. Run `yalc remove unsafe-bc-react-components` in your dependent project.\n2. Run `yalc installations clean unsafe-bc-react-components` in the library root dir to unpublish.\n\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"7e0d63655d61376bc160870f59bf68b830f54aae","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.9","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-NjIMpg1ZNJgWhgyPsyQEv3JwoY4vTrbGh2PBWV8h3zyrTd0MulkC2KqPJ9yF9qyKJMroU7y/XzzrpkNbPr0YIQ==","shasum":"972869af02a7528994cdad2b0d65c0b0d7307989","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.9.tgz","fileCount":95,"unpackedSize":5615134,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+UpPwr3zJ8AjslXnKLojMtHPqKMu6YOtsc9njlorYSAiEA9R2wpPFxr4ytqDY4x70W28h4WNagMPZWDshv+AXEcB4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTHklACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkVw/8CGealSeFTSM53AvdXRhB7T20Wp9HDevnVDb73Hn1/5qsdwyr\r\nueONUo6/4UsO4jMyo6GvmKgrttPPcPh9ewoD8wJVCo7kahCvFdagiLKFPl+5\r\n6uPaiX3v23LcQCr4XWmDdTsqFPbbQUnJtFdzOEyA0FsgCFmUyPZ7TozfbCh2\r\nw2oPKOUMhbpZlnL4iiErJRXIhVULScSl5KmuCEiaWNtXAcTx81iQn66jVMx4\r\nls+knZ0TKbUsqlZ0tRvWF6LSDM3i3vCTqKAUWOELsiDH0bU5JVDH39KPjwEZ\r\n/9Aga6aX2qYUGYkJJGIRAlNahDxOIuM+F/iKBTeWq58WWjVguvjjZO8bWjdq\r\nrqnqZKxV3x1k5sR/vvZcTQeXlpaxnMhgDXlWaI5ZDykMiSnfKmfS4dEmcV36\r\nv4QAGDUykP2eg+i8FILMQ+TVGnF2psrvaH1xw6J09HLfapE0iTnbJz/pFUoy\r\n7VUeuzY40BUuoj+WTMIZ1Uy77Pum41OmfqPsQ0lQUg7bo9EOBFRZeujUZSg6\r\nYIX7GI+O+MiJs7kEahlBHL82cWpiWwGHaYsqNVhOMXWgBgijU4OBL9tpu1dw\r\nWWdd4AGbfGKbpNw2A7vNAHcRkNQxb1CeviHi8GRZHsS7GQ1GD+Yf4mviM0Oe\r\nwN5MqIM8mXt2JvJy9QBAe6G9sebS6be6PPs=\r\n=Y9wr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.9_1649178917141_0.2577887648768269"},"_hasShrinkwrap":false},"0.0.5-beta.11":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.11","description":"BigCommerce theme components built for React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.4.19","@storybook/react":"^6.4.19","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@bigcommerce/eslint-config":"^2.3.1","@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^8.10.0","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^4.6.2"},"resolutions":{"@types/react":"^16.3.13"},"prettier":"@bigcommerce/eslint-config/prettier","jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n\n## Install\n### Get the published version\nhttps://www.npmjs.com/package/unsafe-bc-react-components/v/0.0.2-beta.25\n\n### Link the library locally with your project\nTo link this library locally, you'll want to use [yalc](https://github.com/wclr/yalc).\n1. Install `yalc` globally in your machine: `yarn global add yalc`\n2. Copy this repo into a directory of your choose.\n3. Run `yalc publish --push` in the library root dir. (`--push` flag is used to propagate all changes automatically to existing yalc package installations)\n4. Run `yalc add unsafe-bc-react-components` in your dependent project.\n5. It's done! Now you can import components from the library using `import { Button } from 'unsafe-bc-react-components'`\n\nUpdating components:\n1. Just need to run `yalc publish --push` to propagate your changes on the linked project (`--push` flag is used to propagate all changes automatically to existing yalc package installations). \n\nUnlinking the library:\n1. Run `yalc remove unsafe-bc-react-components` in your dependent project.\n2. Run `yalc installations clean unsafe-bc-react-components` in the library root dir to unpublish.\n\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"964f451a4ab22d3dd8c9f015d723616509be61de","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.11","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-SqMgy/RMn0v67SVEhb9ADXdxfhxfkcOiNjqz3ItGq1CxQG29jJJPSUji8je30WNPciB+anIzumKxwSNeVMBKmw==","shasum":"edd28599efab0653e11dcfcf7ede01f055c556b0","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.11.tgz","fileCount":95,"unpackedSize":5615135,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZQ9Y9/9oUqWauC5YxHchlae8vG3ynfyvMG66ygb/NcAiBuv107et2qIHubFFyzLvV3vs3LiT2qiDlxCwgwqKDTcQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTHsaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp57xAAnI1ORRh9DVgwlktbmnla19NnbW3N/+i/P8TFuqQvz7JVtzfZ\r\nkuFD+BrjXpaQyv2haz5vqG404Ss81u2hU0dki8yUHMchCYepv9cBTAROxTpJ\r\nVY2oNWr3mbGEhTsFZIlBRrwflWH3MCaazlkdYJ7EY8qth6IBxTG2N4XYme6+\r\nuDcWCwddi2g8IAyTgLjniGniOaqFb/QHz4G9ETTfQFhhm6Vi+EeegsousQem\r\ndOH313MTffkhjabeir14SJtzBx7u1rip0mHCDmE98O8NlMLP5AxUi4Kw9k3G\r\nWaClH/SHYKz90U95hyRnXrhEa0gi+uOqrwMh4ofQMMrxix0GCmGpCTdhVeUx\r\nGqneB9vZFQu5hHef1vRCchLnBXQ2ISdJ4keZ1NKShQVVC/rRJ8QSpcqMhNPr\r\nf7oNfTuda0z9UeMtDl5fpEd/AUpksJk8HTlVtyutwpR5FQX6Pkh15L2NlqLD\r\nSMtIKcIPM4NCrbOCdPrui84GF33wpzTuV4a3nrw6aEmzYAqAfJBUtCk9dBoK\r\nSWsPj2qNzUd5RwrvxHVfXll7iLmwXnnvpHf4rIUQ6gntauBNc49MgMyX5NP7\r\nIIQSqEyAWaS8eeV04Qg7DBJk/ddK/HYDslFe/CNmCdBBUlpZABrcvHvjAbSw\r\nVyTPLu8bSpkEPUxw2sMBqc8tPvm5ZoDQsAk=\r\n=+lh+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.11_1649179417712_0.5137912075771114"},"_hasShrinkwrap":false},"0.0.5-beta.12":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.12","description":"BigCommerce theme components built for React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.4.19","@storybook/react":"^6.4.19","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@bigcommerce/eslint-config":"^2.3.1","@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^8.10.0","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^4.6.2"},"resolutions":{"@types/react":"^16.3.13"},"prettier":"@bigcommerce/eslint-config/prettier","jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n\n## Install\n### Get the published version\nhttps://www.npmjs.com/package/unsafe-bc-react-components/v/0.0.2-beta.25\n\n### Link the library locally with your project\nTo link this library locally, you'll want to use [yalc](https://github.com/wclr/yalc).\n1. Install `yalc` globally in your machine: `yarn global add yalc`\n2. Copy this repo into a directory of your choose.\n3. Run `yalc publish --push` in the library root dir. (`--push` flag is used to propagate all changes automatically to existing yalc package installations)\n4. Run `yalc add unsafe-bc-react-components` in your dependent project.\n5. It's done! Now you can import components from the library using `import { Button } from 'unsafe-bc-react-components'`\n\nUpdating components:\n1. Just need to run `yalc publish --push` to propagate your changes on the linked project (`--push` flag is used to propagate all changes automatically to existing yalc package installations). \n\nUnlinking the library:\n1. Run `yalc remove unsafe-bc-react-components` in your dependent project.\n2. Run `yalc installations clean unsafe-bc-react-components` in the library root dir to unpublish.\n\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"b1441ac14ddd62940f6d5bd6924a387836ebbf0c","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.12","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-r11CVYofxDlf67SqUGMwE+7oLLo2LciKLjXT/KG7pHccMd+XmYefbfqVoqkZUbeIbSm3UU40Hbk0R2R8+01igQ==","shasum":"7cd8f202328bbd2f28a4062e8dcf592ad8e0c861","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.12.tgz","fileCount":95,"unpackedSize":5615135,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEyhiMMH+TMbSz7KMsve+FqMp5wy/wLyhKLAIy2JkytAiEAtW0BR0T564bUbjUmxhMJVOfeFPvMlPapo0SVbz8iXT8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTH0nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrVg/+KjzYI97fa5NqemQ67ZtNpq1rNdqEAg79Ip3dAeSXbMgTO1ES\r\ncDjtITUUGgXqfdZDKvoDjX9xtsdGHa/O1N0YACqTkBrwlcB8nzNlQiJQ+iqJ\r\nasOdz9+m+1itZ2IMYaeASHlYpT8n+hRyE0q2Gnk2uVb2iExr91Kt0zsd4c4E\r\nYoBuMz6D8DeXxYkOxzhKMgry7zZh+/AJO07HLlPt4qZazv3q+EsF9YneCwDj\r\nIbtOQ07zQ5pL847e/ksmot0sjk05w8xlE7igmv6qGCBNGY7+T5gbFEyrSGMa\r\nvjvsrPASSkkm/yRFa5/Jo6S1fLGSheAz1h8Zb6VgPYxocxv427QhSAxTtymv\r\nKrOj0kLJb+TMyX4nRPq+X2xI+s+uKYP2bjC8fg6Ry4it451tfycVBPjgCkWX\r\nDLmhB4299om/tqD4Xt5zkzDFedC9yoIXlADe4mJIjCATM9B6ukkabvFOheHI\r\nINjJk30S4T6olczgKcOs3t2+r2iVpbEgAy/9Tuh92AOpCuWtTp6vMmGesB1B\r\naR3ViTv3Xtsh0emBrQIDEtuz2HJnrikvsfbY22h+gSQMUtypVS3mjev5Dao0\r\n235443kgAr1kmTmkstYMSsh6BfJDVp8Dpu3/0KNHtr4SGsk9YpF+JAg6XLm2\r\ndNxE91HEP/U4kWUzzO8AIahBC1bqJZyRiRk=\r\n=Kwxz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.12_1649179943258_0.06722662488077624"},"_hasShrinkwrap":false},"0.0.5-beta.14":{"name":"unsafe-bc-react-components","version":"0.0.5-beta.14","description":"BigCommerce theme components built for React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.4.19","@storybook/react":"^6.4.19","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@bigcommerce/eslint-config":"^2.3.1","@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^8.10.0","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^4.6.2"},"resolutions":{"@types/react":"^16.3.13"},"prettier":"@bigcommerce/eslint-config/prettier","jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n\n## Install\n### Get the published version\nhttps://www.npmjs.com/package/unsafe-bc-react-components/v/0.0.2-beta.25\n\n### Link the library locally with your project\nTo link this library locally, you'll want to use [yalc](https://github.com/wclr/yalc).\n1. Install `yalc` globally in your machine: `yarn global add yalc`\n2. Copy this repo into a directory of your choose.\n3. Run `yalc publish --push` in the library root dir. (`--push` flag is used to propagate all changes automatically to existing yalc package installations)\n4. Run `yalc add unsafe-bc-react-components` in your dependent project.\n5. It's done! Now you can import components from the library using `import { Button } from 'unsafe-bc-react-components'`\n\nUpdating components:\n1. Just need to run `yalc publish --push` to propagate your changes on the linked project (`--push` flag is used to propagate all changes automatically to existing yalc package installations). \n\nUnlinking the library:\n1. Run `yalc remove unsafe-bc-react-components` in your dependent project.\n2. Run `yalc installations clean unsafe-bc-react-components` in the library root dir to unpublish.\n\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"212200cb774db95d4572c3ca8fd421276e2d2c5f","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.5-beta.14","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-c+IiNGDVEZXKXZjZGPheD3TWwl5gnw9g3rnLsmo9qrmJNHC8X0is1jIHi3B5OIBH0OYqEzykc99Bg2gAa+6i3w==","shasum":"5a3afd5810fc13804b3f481cdf22f8320e565613","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.5-beta.14.tgz","fileCount":95,"unpackedSize":5615135,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/F2MEJfUe1DBFP2DZoXRAHM5b5hDTg3jFUcWQqo46oAiEApd7k09PbtzPl8PtHwbMVaoht202AlVdnb44PxE5cUGE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTIpNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAxQ/9GWGr/QFT0K1/KmIqg+SqEwU0bxs8VPOuBWReELdeqCIRSDQf\r\n9vVWuy4UbbktobiDja2NuR3l+ZJ1cyyPiP2xXvLfhJuHBa3caYy9LsBYJCtp\r\nG0VUEgjGoNCJUGDv6GVe1gMiEaBSWl0ZO1rGId2zZUtTiUFiMx/mGrlaaaha\r\nwXcxrZkEjRpJe/Q9B3H1zU3O1qEmroV7fY6cXD6RKWdGpBscqwcQgdvN8lsE\r\nEvyABmMdqGrkfCbgOebCBY2eKMw/ja6ytzVL8Pze6ri9NqlNO3BpBm+RMrZv\r\nKvjdnNWt5osEspEkDtXzkfI87dE0drRuoodPa1TaaWkDODCbht9RjAehmZ5i\r\n8DiqNKjztj1NAfIMGOzEIhwqJ/4jVYSg8jlbNiPrDy0Nq1QOA34cDwAVkhy+\r\nCQVdufpm7wtTPS4W6BXy/m9JjgzOsizus9xOz84R2OwB0oXEqvtm/6/BrRW+\r\nWhymMbdIEyLa3IG+Ta2S+vK/InhUf20HqZpseFfyZLbScW5DEp4gjNHsmWKi\r\n7TnQlEWY+mEeCFhpBVFuVoK4kfj/NJF2EfsqZD4k5hZTeuBxBXNH+00LXVZf\r\njshXg0mWLX8t8qxfaNSeDnVMyuudVRaUSf6IhfP5Owo3mys7aM3Rdr67t9o3\r\n6G4w2kGbsDIb2l5ttXWZWL2PQQQBYbKzPu4=\r\n=r/T+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.5-beta.14_1649183308993_0.7380423165782839"},"_hasShrinkwrap":false},"0.0.7":{"name":"unsafe-bc-react-components","version":"0.0.7","description":"BigCommerce theme components built for React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.4.19","@storybook/react":"^6.4.19","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@bigcommerce/eslint-config":"^2.3.1","@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^8.10.0","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^4.6.2"},"resolutions":{"@types/react":"^16.3.13"},"prettier":"@bigcommerce/eslint-config/prettier","jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","gitHead":"582b1702a0419773d625ae5e2e3c3c0890011023","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.7","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-f6GFBkvUSrre6EP1SKtMQGTPOpVydL0ATlYxZ0jZzgSCeJjb0OjwDXF4gL+V/j1X/Qinajf5G3eDYRirbkQFXQ==","shasum":"594bf7da00d49dba561f0b2a7e4a46aa8c4a3a65","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.7.tgz","fileCount":95,"unpackedSize":5615127,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAUd6asBBR9nOqDHLzAai8OOEAi+iXHZ7a0NMDdrZnFjAiBDdM1tCvqCH8Jyi68loVz7jsHUw1vw3/DtEyU7+W5vGw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTJFqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrNQ//YJt+VwuWCV8M3y2A3WtvUgLCe3UO4HMbSeruOUg4AkoYB1r/\r\nWCGsDbPFAaU//Wm4EX3cnYKJXakaKFy8e9HfRUEhAUVsDds/6G18E5osD8Zb\r\nxh67K9nMGsYi+vG0iBSLMrYIM2CJSx9CP6gAu8XwtiyS3PauaS97U4yhc5ak\r\nPopAoSOkv9bKWhLZI6Tm8fzB1PcHwuDtr20w4tfSZYuHqDT1St4XqIZBLCjZ\r\n90bDv+tDyGlPwT5BDc0DRaoxuDLzEyis0QsH7n+R+wl88/0BABZh6P8uCyXQ\r\npIWTLKdHzblZI+WYtWOuaqViByGf434B1AmJqG6qfwREddLJ9l+/+rl/LEkF\r\nrw69wHIoqIGkXEbrj1Jx6XsSTADrXEY4qBVFZ/f3qRnwEvJRysboAzzNTYFA\r\noqb6G0ehYxdiIwHV9L1kcVgNLGN3RtptyvtXKcmtJXOlnhmfZQ2F6GptBRLb\r\n6y44rPE9v/M+uoJ+FR+stM+uwoT78i0cbY+dhk2a3LRtoA4eb2o6JoxiK547\r\n7eEkX1+Xasf8otJo+nJqYYDjGRlwNolJLFLAmK1ojDmoiu1fAne3Mte2xR9i\r\ne1zeDtypIAKHUss5L7HsoXEcwR7YuKG7mKq6zpHxlqGAYZuLB7FZmcdw/wFk\r\nlqks2MtCCoAIO7D33OUoI2diH/cQ23CLF3Q=\r\n=DhU2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.7_1649185130660_0.8885762893506974"},"_hasShrinkwrap":false},"0.0.8-beta.0":{"name":"unsafe-bc-react-components","version":"0.0.8-beta.0","description":"BigCommerce theme components built for React","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","lint":"eslint . --ext .js,.ts,.tsx","build":"rm -rf dist; rollup -c; mv -v ./dist/src/* ./dist","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","storybook":"start-storybook -p 6006","deploy":"gh-pages -d example/build","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","release":"release-it"},"dependencies":{"@storybook/addon-actions":"^6.4.19","@storybook/react":"^6.4.19","classnames":"^2.3.1","date-fns":"^2.25.0","emotion-reset":"^3.0.1","react-datepicker":"^4.1.1","react-easy-swipe":"^0.0.21","reakit":"^1.3.10"},"peerDependencies":{"@emotion/react":"^11.1.5","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"devDependencies":{"@bigcommerce/eslint-config":"^2.3.1","@emotion/react":"^11.5.0","@release-it/conventional-changelog":"^3.3.0","@storybook/addon-docs":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/preset-create-react-app":"^3.2.0","@storybook/preset-typescript":"^3.0.0","@storybook/storybook-deployer":"^2.8.10","@svgr/rollup":"^2.4.1","@types/jest":"^23.3.14","@types/react":"^16.14.20","@types/react-datepicker":"^4.1.3","@types/react-dom":"^16.9.14","@typescript-eslint/eslint-plugin":"^2.34.0","cross-env":"^5.2.1","eslint":"^8.10.0","react":"^16.14.0","react-dom":"^16.14.0","react-scripts-ts":"^2.17.0","release-it":"^14.11.6","rollup":"^0.62.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^1.6.3","rollup-plugin-postcss-modules":"^2.0.2","rollup-plugin-typescript2":"^0.17.2","rollup-plugin-url":"^1.4.0","ts-loader":"^6.2.2","tsconfig-paths-webpack-plugin":"^3.5.1","typescript":"^4.6.2"},"resolutions":{"@types/react":"^16.3.13"},"prettier":"@bigcommerce/eslint-config/prettier","jest":{"moduleNameMapper":{"@hooks":"<rootDir>/src/hooks/","@theme":"<rootDir>/src/theme/"}},"types":"./dist/index.d.ts","readme":"# bigcommerce-react-theme-components\n\n> This project is under active development, new features and updates will be continuously added over time\n\n> BigCommerce theme components built for Preact and React\n\n[![NPM](https://img.shields.io/npm/v/bigcommerce-react-theme-components.svg)](https://www.npmjs.com/package/bigcommerce-react-theme-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBigCommerce React Theme Components are a set of core building blocks used to create a UI for your headless BigCommerce app or theme.\nUse some of the pre-made UI components found in the `ui/` directory or build your own using the components in the `core/` directory.\n\nSee: [BigCommerce Developer Docs](https://developer.bigcommerce.com/).\n\n1. Create an API account from your store dashboard.\n2. Connect your app or theme to the BigCommerce API using your credentials.\n3. Send or retrieve data to/from your store and use it into your React app theme components.\n\n\n## Install\n### Get the published version\nhttps://www.npmjs.com/package/unsafe-bc-react-components/v/0.0.2-beta.25\n\n### Link the library locally with your project\nTo link this library locally, you'll want to use [yalc](https://github.com/wclr/yalc).\n1. Install `yalc` globally in your machine: `yarn global add yalc`\n2. Copy this repo into a directory of your choose.\n3. Run `yalc publish --push` in the library root dir. (`--push` flag is used to propagate all changes automatically to existing yalc package installations)\n4. Run `yalc add unsafe-bc-react-components` in your dependent project.\n5. It's done! Now you can import components from the library using `import { Button } from 'unsafe-bc-react-components'`\n\nUpdating components:\n1. Just need to run `yalc publish --push` to propagate your changes on the linked project (`--push` flag is used to propagate all changes automatically to existing yalc package installations). \n\nUnlinking the library:\n1. Run `yalc remove unsafe-bc-react-components` in your dependent project.\n2. Run `yalc installations clean unsafe-bc-react-components` in the library root dir to unpublish.\n\n\n## Storybook\n\nTo run the storybook, simply run: `yarn storybook`\nand a browser window will open. To deploy it run: `yarn\ndeploy-storybook`, which will deploy it to github pages.\n\n## Example\n\nTo see examples of the components in use, try the example app.  To start\nthe example app, simply go into the example, run `yarn`, and `yarn\nstart` to view examples of the core product components, cart, and\naccount components.\n\n\n## Usage\n\n```tsx\nimport * as React from 'react'\n\nimport { Core, Widget } from 'storefront-ui-components'\n\nclass Example extends React.Component {\n  render () {\n    return (\n        <Core.ProductTitle\n          tag=\"h1\"\n          componentClass=\"bc-example-product-title\"\n          componentID=\"123-title\"\n          text='Example Product'\n          dataAttributes={{['data-title']: 'bc-title-component', ['aria-label']: 'Example Product'}}\n        />\n    )\n  }\n}\n```\n\n## Components\n`?` Optional props for each Component\n`**` Component accepts children element overrides\n\n### Core Components\n\n#### ProductTitle\n**Props:**\n```\ntag?: string default: h2\ntext: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\n#### ProductDescription\n**Props:**\n```\ntag?: string default: div\ntext: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductImage\n**Props:**\n```\nsrc: string\naltText?: string\nwrapperClasses?: string\nclasses?: string\nstyles?: object\n```\n\n#### ProductPrice\n**Props:**\n```\nprice: number\nsalePrice: number\ncurrencySettings: object\ntag?: string default: span\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\nhasSalePrice?: boolean default: false\n```\n\n#### ProductBrand\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductCondition\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n\n#### ProductInventory\n**Props:**\n```\ntag?: string default: span\nclasses?: string\nstyles?: object\nshowInventoryLevel?: boolean\ninventoryLevel: number\nshowWarning?: boolean\ninventoryWarningLevel: number\nwarningMessage?: string\n```\n\n#### ProductSKU\n**Props:**\n```\ntext: string\ntag?: string default: span\nclasses?: string\nstyles?: object\n```\n\n#### ProductSpecs\n**Props:**\n```\ntag?: string default: ul\ntextObject: object\ncustomFields?: array\nclasses?: string\nstyles?: object\n```\n\n#### ProductReview\n**Props:**\n```\nreview: ReviewData\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n\ninterface ReviewData {\n  date_created: string\n  date_modified: string\n  date_reviewed: string\n  email: string\n  id: number\n  name: string\n  rating: number\n  status: string\n  text: string\n  title: string\n}\n```\n\n#### ReviewForm\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: ReviewFormField[]\nstyles?: any\nfill?: ReviewType\n\ninterface ReviewType {\n  name: string\n  rating: number\n  email: string\n  text: string\n  title: string\n}\n\ninterface ReviewFormField {\n  name: string\n  label: string\n  type?: string\n  required?: boolean\n  component?: any\n}\n```\n\n**Default form config**\n```\n[\n  {\n    name: 'rating',\n    label: 'Rating',\n    required: true,\n    component: RatingSelect,\n  },\n  {\n    name: 'name',\n    label: 'Name',\n    required: true,\n  },\n  {\n    name: 'email',\n    label: 'Email Address',\n    required: true,\n    type: 'email',\n  },\n  {\n    name: 'title',\n    label: 'Subject',\n    required: true,\n  },\n  {\n    name: 'text',\n    label: 'Comments',\n    required: true,\n    component: TextArea,\n  },\n]\n```\n\nAccepted classes from styles object:\n```\n.reviewForm\n.saveButton\n.fieldWrapper\n.required\n```\n\nClasses are also generated are also generated from the form config. For\nexample for the `name` field, the following styles are accepted:\n```\n.name-wrapper\n.name-label\n.name\n```\n\n### Utility Components\n\n#### Notification\n**Props:**\n```\ntype?: string\nmessage: string\nclasses?: string\nstyles?: object\n```\n\nThe `type` options for the notification Components are `success` (default), `info`, `error`, and `warning`.\n\n### Widget/UI Components\n\n#### ProductCard **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: object\nimage: object\nbrand: object\ncardClasses?: string\ncardStyles?: object\n```\n\nDefault product card utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductPrice\n- Brand\n\n#### ProductReviews **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nreviews: object\ntag?: string\nclasses?: string\ntagID?: string\nstyles?: object\ndataAttributes?: object\n```\n\nDefault product reviews utilizes the following core components:\n- ProductReview\n\n#### ProductDetailPage **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\nreviews?: object\nspecs?: string[]\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  weight: number\n  width: number\n  height: number\n  depth: number\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core/UI components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n- ProductSpecs\n- ProductReviews\n\n#### ProductQuickView **\nThis can be overridden by adding your own JSX children.\n\n**Props:**\n```\nproduct: ProductObject\nimage: ImageObject\nbrand: BrandObject\ncurrencySettings?: object\nPDPClasses?: string\nPDPStyles?: object\n\ninterface ProductObject {\n  name: string\n  description: string\n  condition: string\n  price: number\n  sale_price: number\n  sku: string\n  reviews_count: number\n  reviews_rating_sum: number\n}\n\ninterface ImageObject {\n  url_standard: string\n  meta: string\n}\n\ninterface BrandObject {\n  name: string\n}\n```\n\nDefault product reviews utilizes the following core components:\n- ProductImage\n- ProductTitle\n- ProductCondition\n- ProductBrand\n- ProductPrice\n- StarRating\n- ProductSKU\n- ProductForm\n- Description\n\n### Cart Components\n\n#### Provider **\nThis can be overridden by adding your own JSX children. This component\nis a provider pattern that will pass cart, style, and event props down\nto any children passed in.\n\n**Props:**\n```\ncart: CartType\nchildren: any\nstyles?: object\nonUpdate: (method: string, id: string, payload: object) => void\nonCheckout?: (value: object) => boolean\n```\n\nDefault Cart children are:\n- CartItems\n- Subtotal\n- Checkout\n\nAll cart children are provided with props of\n- cart\n- styles\n- onUpdate\n- onCheckout\n\nNote that the above styles object is passed to all children, and can\nstyle the children components using the following classes:\n- cartProvider\n- cartItems\n- cartItem\n- cartItemPrices\n- cartItemTotal\n- cartSubtotal\n- cartSubtotalText\n- cartCheckout\n\n#### CartItems **\nGiven a cart object with a `lineItems` object from a bigcommerce cart\napi call, this object will display the line items with a default `Item`\ncomponent that can be overriden.  Note that all props can already be\nprovided by CartProvider above.\n\n**Props:**\n```\ncart: CartType\nonUpdate: (method: string, id: string, payload: object) => void\nstyles?: any\nItemComponent?: any\n```\n\nNote: `ItemComponent` default is the pre-written `CartItem` shown in\nexamples, and is automatically provided with the same props as `CartItems`\nand an additional `item` prop of type `CartItem` type\n\n\n#### Checkout  **\nSimply a button that will trigger the onCheckout event provided by the\nprovider when clicked. Default button text will read `Checkout`, but can\nbe overridden by passing in any children to the component.\n\n**Props:**\n```\nchildren: object | string\nonCheckout: (method: string, id: string, payload: object) => void\nstyles?: any\n```\n\n#### Subtotal **\nProvided with a cart object from the provider, this component will\ndisplay the total cart amount based on the cart currency.\n\n**Props:**\n```\ncart: object\nstyles?: any\n```\n\n\n### Product Form Components\n\n#### ProductForm\nDisplays a product form for a passed in product, and provides certain\nprops for children, and events for change and updates.\n\n**Props:**\n```\nproduct: object\naction: string\nchildren: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nAll children are provided with the following props:\n- product\n- formData\n- onFormChange\n- onFormInit\n\n\n#### ProductModifiers\nDisplays product options and modifiers based on modifier and option\nvalues from API calls.  Also provides sensible defaults for\ndropdowns, checkboxes, text, and date modifiers.\n\n**Props:**\n```\nmodifiers: ModifierConfig[]\nmap: object\nonFormChange?: (value: object) => void\nonFormInit?: (value: object) => void\n```\n\nIf further modifiers are desired, simply pass in a map prop to modifiers that\nholds any custom modifiers, using format below, which also show current\ndefault modifiers:\n```\nconst ModifierMap = {\n  dropdown: Dropdown,\n  checkbox: Checkbox,\n  text: Text,\n  date: DateInput,\n}\n```\n\nNote that the key in the map must relate to the option/modifier type set\nin BigCommerce API.\n\nAll modifier components are provided with modifier data, and an\nonFormChange event, which propagates all the way up to the above form\ncompnent, if there is one.\n\n### Login\n\n#### LoginForm component\n\nDisplays a login form with custom `onSubmit`, `action`, and children if\nnecessary.\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\naction: string\nchildren: any\nstyles: any\n```\n\nDefault children are Username, Password, RememberMe, LoginButton, and\nForgotPassword.  All children are provided with styles passed into\nLoginForm component.\n\nThe styles prop is passed to all children and will style the following\nclasses for login:\n```\n.loginForm\n.username\n.usernameLabel\n.password\n.passwordLabel\n.remember\n.rememberLabel\n.button\n.forgotLink\n```\n\n### Profile\n\n#### ProfileForm\n\n`ProfileForm` component displays certain profile fields from customer\nprofile allowing for edit.  Fields can be customized by passing in\ncustom `profileKeys` prop to handle edit of properties, or by passing in\nnew children, overriding default children generated from `profileKeys`\n\n**Props:**\n```\nonSubmit: (value: object) => boolean\nchildren: any\ncustomer: CustomerProfile\nprofileKeys: string[]\nstyles: any\n```\n\nCurrent profile keys handle:\n- First Name\n- Last Name\n- Phone\n- Email\n- Company\n\nThe following styles are automatically picked up from the styles prop:\n```\n.profileForm\n.fieldWrapper\n.first_name\n.first_name_label\n.last_name\n.last_name_label\n.company\n.company_label\n.phone\n.phone_label\n.email\n.email_label\n```\n\n#### AddressCard\nDisplays the address and styles according.\n\n**Props:**\n```\naddress: AddressType\nonDelete?: AddressType => void\nonEdit?: AddressType => void\n```\n\nThe following styles are automatically picked up from the styles prop:\n```\n.address\n.addressName\n.address1\n.address2\n.cityStateZip\n.country\n```\n\n#### ShippingAddressForm\n\nThe shipping address form will take a `formConfig` array to display the\nshipping address form.\n\n**Props**\n```\nonSubmit: (value: object) => boolean\nchildren?: any\nformConfig?: AddressFormField[]\nstyles?: any\nfill?: AddressType\n```\n\nThe default formConfig provided is as below:\n```\nconst defaultFormConfig = [\n  {\n    name: 'first_name',\n    label: 'First Name',\n    required: true,\n  },\n  {\n    name: 'last_name',\n    label: 'Last Name',\n    required: true,\n  },\n  {\n    name: 'company',\n    label: 'Company',\n  },\n  {\n    name: 'address1',\n    label: 'Address Line 1',\n    required: true,\n  },\n  {\n    name: 'address2',\n    label: 'Address Line 2',\n  },\n  {\n    name: 'city',\n    label: 'City',\n    required: true,\n  },\n  {\n    name: 'postal_code',\n    label: 'Postal Code',\n    required: true,\n  },\n  {\n    name: 'state_or_province',\n    label: 'State',\n    required: true,\n    component: StateSelect,\n  },\n  {\n    name: 'country_code',\n    label: 'State',\n    required: true,\n    component: CountrySelect,\n  },\n  {\n    name: 'phone',\n    label: 'Phone',\n  },\n]\n```\n\nNote that custom components can be specified for any `formConfig` field.\nCustom components will be provided with styles, an `onFieldChange`\nevent, the field config, and the current address object.  The default\ncomponent for fields is simply an `input` component.\n\nField styles that are pulled from the styles object are provided for the\nwrapper, label, and the actual input component. For example, for the\n`first_name` field, the following classes will be accepted and passed\ndown:\n```\n.first_name\n.first_name-wrapper\n.first_name-label\n```\n\nIn addition to the above styles, the following styles are also provided:\n```\n.addressForm\n.fieldWrapper\n.saveButton\n```\n\n#### CountrySelect\n\nDisplays select element with list of countries, uses the\n`country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\n```\n\n#### StateSelect\n\nDisplays select element with list of selects when given a country code\nin the address object, uses the `country-state-city` npm package.\n\n**Props**\n```\nonChange: (value: object) => void\nname: string\nvalue?: string\nclassName?: string\nid: string\naddress?: AddressType\n```\n\n#### SearchForm Component\n\n**Props**\n```\naction: string\nchildren?: any\nonChange?: (value: object) => void\nonSubmit?: (value: object) => boolean\nmethod?: string\nclasses?: string\nstyles?: object\n```\n\nDefault form config (Currently not needed but plans to expand for filters are in the works.):\n```\nconst searchFormConfig {\n  {\n    name: 'search',\n    label: 'Search',\n    type: 'search',\n  },\n}\n```\n\n**Requires**\n\n`SearchFormSubmit` component as a child of the form.\nExample: `<Widgets.SearchFormSubmit>Product Search</Widgets.SearchFormSubmit>`\n\n### Wishlists\n\n#### WishlistList\nGiven a list of wishlists to display, the `WishlistList` component\niterates over the list, displays them using passed in\n`WishlistComponent` prop, which defaults to the `WishlistRow` component\ndescribed below, and provides them with any passed in styles.  The\n`onWishlistAction` prop gets passed to each `WishlistComponent`, and\nwill get passed with `action` and `wishlist` parameters\n\n\n**Props:**\n```\nwishlists: Wishlist[]\nWishlistComponent?: any\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlists\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n```\n\n#### WishlistRow\nGiven a wishlist object, this default component will display the\nwishlist name, pass in styles down to the component, and pass through\nany actions to the `onWishlistAction` prop. The current expectation is\nthat code outside of the component will handle the actions below:\n\n```\nclick - triggered when wishlist name is clicked\nshare - triggered when share button is clicked\nedit - triggered when edit button is clicked\ndelete - triggered when delete button is clicked\n```\n\nNote that `onWishlistAction` will be called with both an action and the\nwishlist object passed into `WishlistRow`\n\n**Props:**\n```\nwishlist: Wishlist\nstyles: any\nonWishlistAction: (action: string, wishlist: Wishlist) => void\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlist\n.wishlistInfo\n.wishlistName\n.wishlistItems\n.wishlistShared\n.wishlistActions\n.shareWishlistButton\n.editWishlistButton\n.deleteWishlistButton\n```\n\n#### WishlistDetail\n\nThe `WishlistDetail` component will display the wishlist passed in,\nalong with the products in the wishlist.  Due to api reponses, when\npassing in the wishlist, a list of products must be provided that match\nthe wishlist items array.  Each product in the wishlist will be\ndisplayed using the `productComponent` prop, which defaults to the\n`WishlistProductRow` component described below.\n\n**Props:**\n```\nwishlist: Wishlist\nproducts: WishlistProduct[]\nonWishlistAction?: (action: string, wishlist: Wishlist) => void\ncurrencySettings: object\nproductComponent?: React.Component\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\n.wishlistDetail\n.wishlistDetailName\n```\n\n\n#### WishlistProductRow\n\nThe `WishlistProductRow` component displays a product from a wishlist when given\nthe product, passes in styles, and handles removal of products using the\n`onWishlistAction` pattern described above.  When the product remove\nbutton is clicked, the provided `onWishlistAction` prop will be called\nwith the `remove_product` action, and the new wishlist object without\nthe product.\n\n**Props:**\n```\nwishlist: Wishlist\nproduct: WishlistProduct\ncurrencySettings: object\nonWishlistAction: (action: string, wishlist: Wishlist) => void\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistProduct\nstyles.wishlistProductLink\nstyles.wishlistPrice\nstyles.wishlistProductRemove\n```\n\n#### CreateWishlist\n\nThe `CreateWishlist` component renders a form to create a wishlist,\nallows for passed in css modules, and propagates the `onSubmit` event\nwith the data formatted according to BigCommerce APIs.  Note that the\nevent object propagated up will contain a `data` property containing the\ndata entered in the form.\n\n**Props:**\n```\nonSubmit: (event: object) => boolean\naction: string\nstyles: any\n```\n\nThe following styles are automatically provided to the styles prop:\n```\nstyles.wishlistForm\nstyles.fieldWrapper\nstyles.nameLabel\nstyles.name\nstyles.publicLabel\nstyles.public\nstyles.saveButton\n```\n\n### Orders\n\n#### OrderList\nThe OrderList component requires a list of orders.  If a product map is\nprovided for the order list, product information for the orders will be\ndisplayed as well.  For an example of how to build the product map,\nplease check `example/src/components/orders.tsx`.  The default\n`OrderComponent` is `OrderRow`.  The\n`OrderList` component will provide all of it's props down to the\n`OrderComponent` that is passed in.\n\n**Props:**\n```\norders: Order[]\nproductMap: any\nOrderComponent?: any\nstyles?: any\nonOrderAction?: (action: string, order: Order) => void\n```\n\n**Styles:**\n```\n.orders\n```\n\n#### OrderDetail\nThe `OrderDetail` component displays the details of an order.\n\n**Props:**\n```\norder: Order\nstatusVariant: 'info' | 'danger' | 'success'\nstyles: any\n```\n\n### Helpful Hooks\n\n#### useProductData\n\nThis hook helps with fetching product data, provided that data fetching\nfunctions and a productId is passed in.  See example app for usage\nexamples.\n\n**Args:**\nproductDataFunctions: ProductDataFetchType\nproductId: string\n\n#### useProductImages\n\nThis hooks helps with fetching product images when given an image\nfetching function, and a list of products.  See example app for usage\nexamples.\n\n**Args:**\ngetProductImages: Function\nproducts: Product[]\n\n**Example:**\n```\nconst images = useProductImages(getProductImages, products)\n```\n\n`images` will be a map filled with images, and keyed by product ids.\n\n## Internationalization\nMost of the strings are rendered from the data passed as props. However, there are some that are hardcoded in the more complex components. For that use case, you have the option to pass `t` function from your own app to the `CommerceComponentsProvider` that will accept a string and return a translated string. This makes it i18n library agnostic but should work out of the box with `react-i18next`.\n\nThe `t` function signature: `(value: string, defaultValue?: string) => string`.\n\nMinimal example:\n```ts\n// app.tsx\n\nconst resources = {\n  en: {\n    translation: {\n      'Welcome to React': 'Welcome to React and react-i18next',\n    },\n  },\n}\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources,\n    lng: 'en'\n  })\n\nconst App = () => {\n  const { t } = useTranslation(); // react-i18next hook\n  return (\n    <CommerceComponentsProvider t={t}>\n      <YourApp />\n    </CommerceComponentsProvider>\n  )\n}\n```\n\n\n## License\n\nMIT © [BigCommerce](https://github.com/bigcommerce)\n","readmeFilename":"README.md","gitHead":"39171f6d526e3897bcf4625a5f43a284803a21a5","bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","_id":"unsafe-bc-react-components@0.0.8-beta.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-AjbrT3jp4WoEaHlGVXsJGJafccU/XHZ0SYB3D9MZem7kfuFzIZLA99GahruD9gGO9bqs/YtM7xlQhCvMKgkvAg==","shasum":"ded1e86efa63e79a64d03fe840c2d30c2f66f269","tarball":"https://registry.npmjs.org/unsafe-bc-react-components/-/unsafe-bc-react-components-0.0.8-beta.0.tgz","fileCount":95,"unpackedSize":5615134,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAf7MoTDs/LguWRjCWSfO7Ipgra2MJeH1R7F2NM9bOwIAiBGwT4A1hMaCi7x2Th5OfPUKp6Es4e+wNnGsQPbB19R5Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXpIbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqc8w//RjIujhh/mH8bj2LG1kdGWeO0CeT5QVrwF9Y7eQkU4KpLFpJO\r\nwz89Eg00KZ3lyhY0xQcprYE1U2iTiicKxzK/X2un4eAZj/B/11UXTd2MtVQu\r\nkTLuVf00p9/74zmwaN83kAmuvxhLEj2Xet96Gh4Gl2CmlJB2uJ0kEXHJcKmc\r\n72bSY9y0V47UbsZBTYrdV0GAa7j6QN44ybpmCad4PcNFBpLFGZeXOXZNzHQQ\r\nS5loA0T8/G3d4e6mHd3wOktrp61UkI4uZVMuyyTBh71qnXZiSAMJzGeEH/nJ\r\nV3zPqRqbnA1vIvbSkz5jM9LhsW7G+yLSsoDTjOiVo9KPg3xQ1iUgQuvZFiCy\r\nhBlTQ/UrhuNDsTgrowEqQiItAtaHsOrUIpSmyoaafDmV9ZarZQhFgSlIwse9\r\nZ5iEraPsfIA2PKCxGqhyQAf2Cr3hLzlNn9XrOjrgu0/MCB4Ljr85sGW8E48R\r\nlkRrmGDL/xVcfeKeAWXJR9ileHcRSzhvDSXnTBWgZMfdsRD/PFylD5GzhRQP\r\nBrv29kM4zp9Fb2WJLp3sIlhZ8/7si4qf4E3185HjSuPpDOnsqYXpeL6OqaEW\r\nIxc5ofGf0YWzGcbA1J+SZxA1pfrZ+yubU6xFH1626Q72JEnMr5DlEDtfpIm8\r\nw/yjccLubcgfx3CXvsU7paolQxsoQfVsSQM=\r\n=qBge\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jorgemarrero","email":"jorgems93@gmail.com"},"directories":{},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unsafe-bc-react-components_0.0.8-beta.0_1650364955441_0.9018809335731022"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-06T12:22:40.158Z","0.0.1-beta.0":"2021-05-06T12:22:40.423Z","modified":"2022-05-22T19:57:01.049Z","0.0.1-beta.1":"2021-05-06T17:43:51.912Z","0.0.1-beta.2":"2021-05-10T09:08:05.795Z","0.0.1-beta.3":"2021-05-10T09:15:57.665Z","0.0.1-beta.4":"2021-05-11T12:50:21.617Z","0.0.1-beta.5":"2021-05-11T12:56:48.292Z","0.0.1-beta.6":"2021-05-11T13:02:20.742Z","0.0.1-beta.7":"2021-05-11T13:15:21.805Z","0.0.1-beta.8":"2021-05-13T14:28:43.609Z","0.0.1-beta.10":"2021-05-13T17:26:49.456Z","0.0.1-beta.11":"2021-05-13T17:33:19.066Z","0.0.1-beta.12":"2021-05-13T17:49:27.063Z","0.0.1-beta.13":"2021-05-14T09:39:25.402Z","0.0.1-beta.14":"2021-05-14T10:05:26.231Z","0.0.1-beta.15":"2021-05-14T10:14:53.998Z","0.0.1-beta.16":"2021-05-14T10:36:43.912Z","0.0.1-beta.17":"2021-05-14T11:21:22.199Z","0.0.1-beta.18":"2021-05-14T11:28:03.697Z","0.0.1-beta.19":"2021-05-18T12:50:08.442Z","0.0.1-beta.20":"2021-05-18T13:11:04.121Z","0.0.1-beta.21":"2021-05-18T13:31:03.954Z","0.0.1-beta.22":"2021-05-18T13:37:39.349Z","0.0.1-beta.23":"2021-05-28T09:11:51.763Z","0.0.1-beta.24":"2021-05-31T14:04:19.918Z","0.0.1-beta.25":"2021-06-03T15:19:12.800Z","0.0.1-beta.30":"2021-06-15T15:59:54.993Z","0.0.1-beta.31":"2021-07-23T17:29:50.794Z","0.0.1":"2021-07-26T15:33:44.334Z","0.0.2-beta.0":"2021-07-26T15:38:59.678Z","0.0.2":"2021-07-26T15:42:32.009Z","0.0.2-beta.1":"2021-07-26T15:44:57.362Z","0.0.2-beta.2":"2021-07-29T18:01:03.971Z","0.0.2-beta.3":"2021-07-30T12:09:45.065Z","0.0.2-beta.4":"2021-08-03T16:50:58.997Z","0.0.2-beta.5":"2021-08-04T17:28:17.260Z","0.0.2-beta.6":"2021-08-12T12:20:21.138Z","0.0.2-beta.7":"2021-08-23T08:29:12.730Z","0.0.2-beta.8":"2021-08-24T14:41:47.113Z","0.0.2-beta.9":"2021-08-30T13:56:42.972Z","0.0.2-beta.10":"2021-08-31T01:14:26.187Z","0.0.2-beta.11":"2021-08-31T01:26:42.306Z","0.0.2-beta.12":"2021-08-31T01:33:38.240Z","0.0.2-beta.13":"2021-09-01T15:55:01.326Z","0.0.2-beta.14":"2021-09-02T11:06:10.872Z","0.0.2-beta.15":"2021-09-02T13:16:05.046Z","0.0.2-beta.16":"2021-09-02T14:02:11.573Z","0.0.2-beta.17":"2021-09-03T10:34:27.486Z","0.0.2-beta.18":"2021-09-10T10:56:01.931Z","0.0.2-beta.19":"2021-09-10T11:26:40.177Z","0.0.2-beta.20":"2021-09-10T11:42:42.828Z","0.0.2-beta.21":"2021-09-10T11:58:10.240Z","0.0.2-beta.22":"2021-09-10T12:26:37.983Z","0.0.2-beta.23":"2021-09-14T15:00:07.314Z","0.0.2-beta.24":"2021-09-14T15:23:14.931Z","0.0.2-beta.25":"2021-09-15T11:27:01.978Z","0.0.2-beta.26":"2021-09-15T13:43:23.078Z","0.0.2-beta.27":"2021-09-15T13:58:07.642Z","0.0.2-beta.28":"2021-09-15T16:57:57.173Z","0.0.2-beta.29":"2021-09-15T17:30:05.185Z","0.0.2-beta.30":"2021-09-16T09:48:29.995Z","0.0.2-beta.31":"2021-09-16T09:58:19.694Z","0.0.2-beta.32":"2021-09-22T08:40:14.432Z","0.0.2-beta.33":"2021-09-22T14:44:58.726Z","0.0.2-beta.34":"2021-10-01T12:02:12.020Z","0.0.2-beta.35":"2021-10-01T12:09:24.448Z","0.0.2-beta.36":"2021-11-01T11:20:49.411Z","0.0.3":"2021-11-02T15:25:23.549Z","0.0.4":"2021-11-03T14:43:28.651Z","0.0.5-beta.0":"2021-11-03T14:51:27.453Z","0.0.5-beta.1":"2021-11-09T18:44:39.925Z","0.0.5-beta.2":"2022-01-24T15:42:56.246Z","0.0.5-beta.3":"2022-01-25T17:23:27.830Z","0.0.5-beta.4":"2022-01-25T17:30:05.259Z","0.0.5-beta.5":"2022-01-25T17:37:06.599Z","0.0.5-beta.6":"2022-02-10T14:44:40.967Z","0.0.5-beta.7":"2022-03-28T15:37:36.839Z","0.0.5-beta.8":"2022-04-05T16:47:51.212Z","0.0.5":"2022-04-05T16:52:06.864Z","0.0.5-beta.9":"2022-04-05T17:15:17.369Z","0.0.5-beta.11":"2022-04-05T17:23:38.139Z","0.0.5-beta.12":"2022-04-05T17:32:23.448Z","0.0.5-beta.14":"2022-04-05T18:28:29.278Z","0.0.7":"2022-04-05T18:58:50.921Z","0.0.8-beta.0":"2022-04-19T10:42:35.736Z"},"maintainers":[{"name":"jorgemarrero","email":"jorgems93@gmail.com"}],"description":"BigCommerce theme components built for React","homepage":"https://github.com/bigcommerce/bigcommerce-react-theme-components#readme","repository":{"type":"git","url":"git+https://github.com/bigcommerce/bigcommerce-react-theme-components.git"},"bugs":{"url":"https://github.com/bigcommerce/bigcommerce-react-theme-components/issues"},"license":"MIT","readme":"","readmeFilename":""}