{"_id":"@acctglobal/skuselector","name":"@acctglobal/skuselector","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.2":{"version":"0.1.2","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"jest":{"moduleNameMapper":{"\\.(css|less|scss|sass)$":"identity-obj-proxy"},"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/stories/*"]},"name":"@acctglobal/skuselector","author":{"name":"Paulo Ferraz"},"module":"dist/skuselector.esm.js","size-limit":[{"path":"dist/skuselector.cjs.production.min.js","limit":"10 KB"},{"path":"dist/skuselector.esm.js","limit":"10 KB"}],"devDependencies":{"@babel/core":"^7.18.6","@size-limit/preset-small-lib":"^7.0.8","@storybook/addon-essentials":"^6.5.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.4","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","babel-loader":"^8.2.5","husky":"^8.0.1","identity-obj-proxy":"^3.0.0","jest":"^28.1.2","react":"^18.2.0","react-dom":"^18.2.0","react-is":"^18.2.0","size-limit":"^7.0.8","ts-jest":"^28.0.5","tsdx":"^0.14.1","tslib":"^2.4.0","typescript":"^4.7.4"},"dependencies":{},"description":"","_id":"@acctglobal/skuselector@0.1.2","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-UnLZUvTLJ1HWQi9y3SGKXXBGQAv+8swbt/UTG6m6ZlyF3QObTMod5B0msPsKmfjFKNWqK6rCgxtH4q+uWzqcjA==","shasum":"2b8a4031df594726d64efb190ce0904f2dc682eb","tarball":"https://registry.npmjs.org/@acctglobal/skuselector/-/skuselector-0.1.2.tgz","fileCount":21,"unpackedSize":21374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsV6y15EafGU4avZvKpwc+Q5lGJdBUKf32nZTuJ7Ja7gIhALslonnw9Owf9oMoQNeiOvIBmp0+3khG7YNL0iV8MGDS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixe4cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIPhAAgp8KWxUycq8NfDRihxSdIqbi1dy7gsk/soNC7BOISmlPUUHh\r\ngPgda3dtgbAZ254tE5qLD3OwYwd1iTGyymWOy6MIdU0X3lS8CICs0VkzEqOa\r\nP2wbA7wRKWR9gV/l35W3JkZDjjeHahk12vyhDISSYCb1VoDeUlx2DCiQYTAs\r\neU6FUT2uGDv5DSc04e92FQIfa/4WbsEgmY9NvuYrBgpcYQZ76MOPY1InCeKC\r\niBneqXwiIIZxGzbGP+Wboz5PNaSUHUyGo/sybTyBpyPCxMR7tQSb1XElFvGI\r\nX/yXAYyRCcJKtBRdczKY20P18eiIH3oqzSdNNZeaEpl5O/4HjwTTbO5E9NTg\r\n0HUrsop9wAflLzLkNOqzgLP6RQjFpmIcWAq2t7YCXp9g9OAYzoO9nFoHQNED\r\nbw9gubZ3USmxr1HSQ9HtBP6iNiZlExdKe8VXPqR6cWqonRqGPqrEwINmZQW8\r\nGV6zqrbYFSRB2zx/8ePJFGb1tRfzn27KzzcBRBItYneCT7zOoTKZ61zZ1TgO\r\nZ9HgShjyz/ZdFz+QE0otXFJJ6XwMmczesApcJOa/lDg5mcazM8MNKItnTKKC\r\n4TMQ/dogzOZKiuKNkIIeQp/sbCGlduA/QlOHHgPkuksTbvO4+RQk82df3F4Q\r\nLVOUfQsG9io8OLZ+r36q0ZvGgtjQg6tXNVg=\r\n=kw+Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ricardo.freitas","email":"ricardo.freitas@acct.global"},"directories":{},"maintainers":[{"name":"luiz.priolli","email":"luiz.priolli@acct.global"},{"name":"ricardo.freitas","email":"ricardo.freitas@acct.global"},{"name":"fabioacct","email":"fabio@acct.global"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/skuselector_0.1.2_1657138716409_0.36530527789542355"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-06T20:18:36.408Z","0.1.2":"2022-07-06T20:18:36.574Z","modified":"2022-07-06T20:18:36.757Z"},"maintainers":[{"name":"luiz.priolli","email":"luiz.priolli@acct.global"},{"name":"ricardo.freitas","email":"ricardo.freitas@acct.global"},{"name":"fabioacct","email":"fabio@acct.global"}],"description":"","author":{"name":"Paulo Ferraz"},"license":"MIT","readme":"# Sku Selector\n\n\n\n### About The Component\n\nThe SkuSelector component is mainly used in Product Details Pages (PDPs) to display all the SKUs available for a given product...\n\n\n\n## Getting Started\n\nThis component can be used anywhere you want in ecommerce, in a responsive and agnostic way, just passing the skus list and the sku selection function\n
\n\n![image](https://user-images.githubusercontent.com/49692070/177579830-2e9383e7-edd4-480a-947a-b274d2559aed.png)\n\n\n\n## Installation\n\nTo use Sku Selector install the package via yarn or npm and import it wherever you want to use it.\n\n- Install package\n\n```bash\nyarn add @acctglobal/skuselector or npm install\n```\n\n\n\n### Usage\n\nImport component\n\n```javascript\nimport SkuSelector from '@acctglobal/skuselector';\n```\n\nCall component passing skus list and sku select function\n\n```javascript\nexport const mockItems = [\n {\n id: 1,\n label: 'XS',\n value: 'XS',\n disabled: false,\n },\n {\n id: 2,\n label: 'S',\n value: 'S',\n disabled: true,\n },\n {\n id: 3,\n label: 'M',\n value: 'M',\n disabled: false,\n },\n];\n\nconst selectSku = (sku?: string) => {\n console.log('Select sku: ', sku);\n};\n\n;\n```\n\n\n\n### Props\n\n| Parameter | Type | Description |\n| :---------- | :------------- | :-------------------------------------------------- |\n| `items` | `Array(items)` | **Mandatory**. List of skus `items` to be displayed |\n| `selectSku` | `Function` | **Mandatory**. onClick function to the button |\n\n\n\n### Styling\n\nThere are one way to customize the component\n\n#### By data `styles`\n\n```css\n[data-sf-sku-selector-container] {\n width: 100%;\n display: flex;\n position: relative;\n justify-content: space-around;\n}\n```\n\n| Data for styles |\n| :--------------------------------------- |\n| `[data-sf-sku-selector-container]` |\n| `[data-sf-sku-selector-option]` |\n| `[data-sf-sku-selector-option]:disabled` |\n| `[data-sf-sku-selector-option-active]` |\n\n\n\n## Contributing\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n6. And don't forget to update the changelog\n\n\n\n## Contact\n\nPaulo Ferraz - paulo.ferraz@acctglobal.com\n\n","readmeFilename":"README.md"}