{"_id":"@andex/theme-provider","_rev":"1-3a1823617658b7e60851f9584c14421e","name":"@andex/theme-provider","dist-tags":{"latest":"1.11.0"},"versions":{"1.10.0":{"name":"@andex/theme-provider","version":"1.10.0","description":"Use your styled-components themes on your favourite storybook","main":"index.js","types":"index.d.ts","scripts":{"lint":"eslint 'src/**/*.ts' 'src/**/*.tsx'","storybook":"cd example && npm run storybook","watch:tsc":"tsc -w","dev":"concurrently --kill-others \"npm run watch:tsc\" \"npm run storybook\"","build":"rimraf dist && tsc && cp ./package.json README.md dist","test":"jest","bundle-size":"bundlesize","release":"semantic-release --debug","publish-storybook":"cd example && npm i && npm i --save themeprovider-storybook@latest && npm run build-storybook"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"bundlesize":[{"path":"dist/**/*.{js,d.ts}","maxSize":"10 KB","compression":"none"}],"dependencies":{"global":"^4.4.0","qss":"^2.0.3","react-json-view":"^1.21.3","styled-react-modal":"^2.0.1"},"peerDependencies":{"@storybook/addons":"^5.x.x || ^6.x.x || ^7.x.x","@storybook/react":"^5.x.x || ^6.x.x || ^7.x.x","react":"^16.x || ^17.x || ^18.x","styled-components":"^4.x.x || ^5.x.x || ^6.x.x"},"devDependencies":{"@babel/core":"^7.11.4","@babel/preset-env":"^7.11.0","@commitlint/cli":"^9.1.2","@commitlint/config-conventional":"^9.1.2","@semantic-release/changelog":"^5.0.1","@semantic-release/git":"^9.0.0","@storybook/addon-docs":"^6.0.16","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/enzyme":"3.1.10","@types/enzyme-adapter-react-16":"^1.0.6","@types/jest":"^26.0.10","@types/node":"^14.6.0","@types/react":"^16.9.46","@types/react-dom":"^16.9.8","@types/sinon":"4.3.1","@types/styled-components":"^5.1.2","@types/styled-react-modal":"^1.2.0","@typescript-eslint/eslint-plugin":"^3.10.0","@typescript-eslint/parser":"^3.10.0","awesome-typescript-loader":"^5.2.1","babel-loader":"^8.1.0","bundlesize":"^0.18.0","concurrently":"^5.3.0","core-js":"^3.6.5","cz-conventional-changelog":"^3.2.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.3","enzyme-to-json":"^3.5.0","eslint":"^7.7.0","eslint-plugin-react":"^7.20.6","fork-ts-checker-webpack-plugin":"^5.1.0","husky":"^4.2.5","jest":"^26.4.2","react":"^16.12.0","react-dom":"^16.13.1","react-scripts":"^3.4.3","rimraf":"^3.0.2","semantic-release":"^17.1.1","sinon":"^9.0.3","styled-components":"^5.0.1","ts-jest":"^26.2.0","ts-loader":"^8.0.3","typescript":"^4.1.3"},"repository":{"type":"git","url":"https://github.com/semoal/themeprovider-storybook.git"},"keywords":["storybook","styled-components","emotion","themeprovider","themeprovider-storybook","theme-provider","react","typescript"],"author":{"email":"Sergio Moreno"},"license":"MIT","bugs":{"url":"https://github.com/semoal/themeprovider-storybook/issues"},"homepage":"https://github.com/semoal/themeprovider-storybook#readme","config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"husky":{"hooks":{"prepare-commit-msg":"exec < /dev/tty && git cz --hook || true","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"licenseText":"MIT License\n\nCopyright (c) 2019 Sergio M\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@andex/theme-provider@1.10.0","dist":{"shasum":"0e43c38379c5ec604f97254b1522a26de24d50da","integrity":"sha512-U+7SZIW+2vWA1Sn9Ipsye9PtQExXGQ/HMMWAV9O32vaux+8YkeumgSzzuac69xKtv0W8W2BLHsxiAQf187eAjQ==","tarball":"https://registry.npmjs.org/@andex/theme-provider/-/theme-provider-1.10.0.tgz","fileCount":16,"unpackedSize":818206,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUaSlEQZe9Dh6642IZ0wYCM14U62iPrv+uN6R96kpvBAIgYfy6z3jtwXGGnS+wQJrajvZw+QyWxPRXRQT4o7oXRRY="}]},"_npmUser":{"name":"natedotv2","email":"nathanirikefe@gmail.com"},"directories":{},"maintainers":[{"name":"natedotv2","email":"nathanirikefe@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/theme-provider_1.10.0_1697882382618_0.9883685080114211"},"_hasShrinkwrap":false},"1.11.0":{"name":"@andex/theme-provider","version":"1.11.0","description":"Use your styled-components themes on your favourite storybook","main":"index.js","types":"index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/"},"bundlesize":[{"path":"dist/**/*.{js,d.ts}","maxSize":"10 KB","compression":"none"}],"dependencies":{"global":"^4.4.0","qss":"^2.0.3","react-json-view":"^1.21.3","styled-react-modal":"^2.0.1"},"peerDependencies":{"@storybook/addons":"^5.x.x || ^6.x.x || ^7.x.x","@storybook/react":"^5.x.x || ^6.x.x || ^7.x.x","react":"^16.x || ^17.x || ^18.x","styled-components":"^4.x.x || ^5.x.x || ^6.x.x"},"devDependencies":{"@babel/core":"^7.11.4","@babel/preset-env":"^7.11.0","@commitlint/cli":"^9.1.2","@commitlint/config-conventional":"^9.1.2","@semantic-release/changelog":"^5.0.1","@semantic-release/git":"^9.0.0","@storybook/addon-docs":"^6.0.16","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@types/enzyme":"3.1.10","@types/enzyme-adapter-react-16":"^1.0.6","@types/jest":"^26.0.10","@types/node":"^14.6.0","@types/react":"^16.9.46","@types/react-dom":"^16.9.8","@types/sinon":"4.3.1","@types/styled-components":"^5.1.2","@types/styled-react-modal":"^1.2.0","@typescript-eslint/eslint-plugin":"^3.10.0","@typescript-eslint/parser":"^3.10.0","awesome-typescript-loader":"^5.2.1","babel-loader":"^8.1.0","bundlesize":"^0.18.0","concurrently":"^5.3.0","core-js":"^3.6.5","cz-conventional-changelog":"^3.2.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.3","enzyme-to-json":"^3.5.0","eslint":"^7.7.0","eslint-plugin-react":"^7.20.6","fork-ts-checker-webpack-plugin":"^5.1.0","global":"^4.4.0","husky":"^4.2.5","jest":"^26.4.2","qss":"^2.0.3","react":"^16.12.0","react-dom":"^16.13.1","react-json-view":"^1.21.3","react-scripts":"^3.4.3","rimraf":"^3.0.2","semantic-release":"^17.1.1","sinon":"^9.0.3","styled-components":"^5.0.1","ts-jest":"^26.2.0","ts-loader":"^8.0.3","typescript":"^4.1.3"},"repository":{"type":"git","url":"git+https://github.com/semoal/themeprovider-storybook.git"},"keywords":["storybook","styled-components","emotion","themeprovider","themeprovider-storybook","theme-provider","react","typescript"],"author":{"email":"Sergio Moreno"},"license":"MIT","bugs":{"url":"https://github.com/semoal/themeprovider-storybook/issues"},"homepage":"https://github.com/semoal/themeprovider-storybook#readme","config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"husky":{"hooks":{"prepare-commit-msg":"exec < /dev/tty && git cz --hook || true","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"scripts":{"lint":"eslint 'src/**/*.ts' 'src/**/*.tsx'","storybook":"cd example && npm run storybook","watch:tsc":"tsc -w","dev":"concurrently --kill-others \"npm run watch:tsc\" \"npm run storybook\"","build":"rimraf dist && tsc && cp ./package.json README.md dist","test":"jest","bundle-size":"bundlesize","release":"semantic-release --debug","publish-storybook":"cd example && npm i && npm i --save themeprovider-storybook@latest && npm run build-storybook"},"_id":"@andex/theme-provider@1.11.0","_integrity":"sha512-3P5zXGLdlxOtnDRbePAwJgcrEhKVagByu22/jcO5k+Lq7Bx2JiZC+PdN+WRdpo2Kx0b4y2Yq85EknUkGmGuWRg==","_resolved":"/private/var/folders/jg/2gy93h9x0kqdjzvp1b1h2c7m0000gn/T/01e461e35b1c5cb79eca740a0da9e1ca/andex-theme-provider-1.11.0.tgz","_from":"file:andex-theme-provider-1.11.0.tgz","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-3P5zXGLdlxOtnDRbePAwJgcrEhKVagByu22/jcO5k+Lq7Bx2JiZC+PdN+WRdpo2Kx0b4y2Yq85EknUkGmGuWRg==","shasum":"788b55a70237eb86ecee5c5953c1d5e222dfffbb","tarball":"https://registry.npmjs.org/@andex/theme-provider/-/theme-provider-1.11.0.tgz","fileCount":35,"unpackedSize":61712,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTQ3GbIezWWJAJp9LosXIWaz7r8tpLfdfwnPx2rGCq2QIhAJ4ffyvvHkWH18eWIK+GAvuvUch7t/w9zDx36IwUUITY"}]},"_npmUser":{"name":"natedotv2","email":"nathanirikefe@gmail.com"},"directories":{},"maintainers":[{"name":"natedotv2","email":"nathanirikefe@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/theme-provider_1.11.0_1697952552917_0.5692436998152868"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-21T09:59:42.530Z","1.10.0":"2023-10-21T09:59:42.859Z","modified":"2023-10-22T05:29:13.339Z","1.11.0":"2023-10-22T05:29:13.162Z"},"maintainers":[{"name":"natedotv2","email":"nathanirikefe@gmail.com"}],"description":"Use your styled-components themes on your favourite storybook","homepage":"https://github.com/semoal/themeprovider-storybook#readme","keywords":["storybook","styled-components","emotion","themeprovider","themeprovider-storybook","theme-provider","react","typescript"],"repository":{"type":"git","url":"git+https://github.com/semoal/themeprovider-storybook.git"},"author":{"email":"Sergio Moreno"},"bugs":{"url":"https://github.com/semoal/themeprovider-storybook/issues"},"license":"MIT","readme":"# Storybook SC ThemeProvider\n\n![GitHub package.json version](https://img.shields.io/github/package-json/v/semoal/themeprovider-storybook.svg)\n![CircleCI (all branches)](https://img.shields.io/circleci/project/github/semoal/themeprovider-storybook.svg)\n![GitHub last commit](https://img.shields.io/github/last-commit/semoal/themeprovider-storybook.svg)\n![npm](https://img.shields.io/npm/dy/themeprovider-storybook.svg)\n![GitHub](https://img.shields.io/github/license/semoal/themeprovider-storybook.svg)\n![BundleSize](https://img.shields.io/bundlephobia/min/themeprovider-storybook)\n[![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](semanticrelease)\n\nThis addon helps you to display a Styled-Components ThemeProvider or a custom one in your [Storybook](https://storybook.js.org).\n\n- Works on Storybook 5.x.x and 6.x.x (latest release)\n- Switches background color.\n- Works on iframes or visual regression testing.\n- Allows passing a custom implementation of your own theme provider.\n- Displays a popup with all the current keys of the theme. [If you want, you can disable it](#disable-popup)\n- You can copy individually a value from the theme.\n\n![Screenshot](https://i.imgur.com/y1Je5xR.gif)\n\n## Getting Started\n\nFirst, install the addon\n\n```sh\nyarn add themeprovider-storybook --dev\nnpm install --save-dev themeprovider-storybook\n```\n\nAdd this line to your addons array inside `main.js` file (create this file inside your storybook config directory if needed).\n\n```js\nmodule.exports = {\n  addons: [\n    \"themeprovider-storybook/register\"\n  ]\n}\n```\n\n### Set options globally\n\nImport and use the `withThemesProvider` function in your `preview.js` file.\n\n```js\nimport { withThemesProvider } from \"themeprovider-storybook\";\n\n// Options:\nconst themes = [\n  {\n    name: 'Theme1' // Required it's used for displaying the button label,\n    backgroundColor: '#fff' // Optional, it's used for setting dynamic background color on storybook\n    ..., // Your theme keys (Check example if you need some help)\n  },\n  {\n    name: 'Theme2' // Required it's used for displaying the button label,\n    backgroundColor: '#000'// Optional, it's used for setting dynamic background color on storybook\n    ..., // Your theme keys (Check example if you need some help)\n  }\n]\n\nexport const decorators = [withThemesProvider(themes)];\n```\n\n### Examples\n\n| version | documentation |\n|----------|:-------------:|\n| For Storybook v5.x.x  | [OLD readme](./v5_example/README.md) |\n| For Storybook v6.x.x  | [Current readme](./README.md) |\n\n\n### Disable popup\n\n```jsx\nexport const decorators = [withThemesProvider(themes, { disableThemePreview: true })];\n```\n\n### How to use your own implementation of ThemeProvider\n\nThanks to @ckknight suggestion, you can easily use your own context for themeprovider.\n\n> This is just an example of a custom theme provider, probably this is not a working, just for suggesting purposes.\n```jsx\nconst ThemeContext: Context<Theme | void> = React.createContext();\nconst ThemeConsumer = ThemeContext.Consumer;\n\nexport default function SomeCustomImplementationOfThemeProvider(props: Props) {\n  const outerTheme = useContext(ThemeContext);\n  const themeContext = useMemo(() => mergeTheme(props.theme, outerTheme), [\n    props.theme,\n    outerTheme,\n  ]);\n\n  if (!props.children) {\n    return null;\n  }\n\n  return <ThemeContext.Provider value={themeContext}>{props.children}</ThemeContext.Provider>;\n}\n```\n\nOn config.js file of Storybook, just pass a `CustomThemeProvider`\n```jsx\nimport { DEFAULT_SETTINGS } from \"themeprovider-storybook\"\nimport { SomeCustomImplementationOfThemeProvider } from \"src/app/CustomThemeProvider.jsx\"\n\naddDecorator(\n  withThemesProvider(\n    themes,\n    DEFAULT_SETTINGS,\n    SomeCustomImplementationOfThemeProvider\n  )\n);\n```\n\nalso you can pass inside settings object the custom implementation of your theme provider.\n\n```jsx\nimport { SomeCustomImplementationOfThemeProvider } from \"src/app/CustomThemeProvider.jsx\"\n\naddDecorator(\n  withThemesProvider(\n    themes,\n    { customThemeProvider: SomeCustomImplementationOfThemeProvider },\n  )\n);\n```\n\n`SomeCustomImplementationOfThemeProvider` must admit a `theme` as prop.\n","readmeFilename":"README.md"}