{"_id":"@cipherdevnl/storybook-addon-pseudo-states","_rev":"1-4c0dcd2e52178127fdd7147c93385972","name":"@cipherdevnl/storybook-addon-pseudo-states","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cipherdevnl/storybook-addon-pseudo-states","version":"1.0.0","description":"CSS pseudo states for Storybook","keywords":["storybook-addons","pseudo states","style","test"],"repository":{"type":"git","url":"git+https://github.com/cipherdevnl/storybook-addon-pseudo-states.git"},"author":{"name":"ghengeveld"},"license":"MIT","main":"dist/cjs/preset.js","module":"dist/esm/preset.js","scripts":{"clean":"rimraf ./dist","start":"concurrently \"yarn storybook --no-manager-cache --quiet\" \"yarn build:dist --watch\"","storybook":"start-storybook -p 6006","build:dist":"babel ./src --out-dir ./dist/cjs && BABEL_ESM=\"true\" babel ./src --out-dir ./dist/esm","build:storybook":"build-storybook","prepublish":"yarn clean && yarn build:dist","release":"auto shipit --base-branch=main"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.12.1","@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","@storybook/react":"^6.1.14","auto":"^10.16.8","babel-loader":"^8.1.0","concurrently":"^5.3.0","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2"},"peerDependencies":{"@storybook/addons":"^6.1.14","@storybook/api":"^6.1.14","@storybook/components":"^6.1.14","@storybook/core-events":"^6.1.14","@storybook/theming":"^6.1.14","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"storybook":{"displayName":"Pseudo States","unsupportedFrameworks":["react-native"],"icon":"https://user-images.githubusercontent.com/321738/105224055-f6c29c00-5b5c-11eb-83c9-ba28a7fbadf2.gif"},"auto":{"plugins":["npm","released"]},"gitHead":"65f91c1f2609a1d85c7b5573659420094a907486","bugs":{"url":"https://github.com/cipherdevnl/storybook-addon-pseudo-states/issues"},"homepage":"https://github.com/cipherdevnl/storybook-addon-pseudo-states#readme","_id":"@cipherdevnl/storybook-addon-pseudo-states@1.0.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-MTvlvDSnjcur3xAZwutFV2+oIEVG6Ct6tmwntuDQG7ABzcTb1NakJGTX8JjYXP5/Fm5LHs0H2BygUbXh5/8jpg==","shasum":"2dff93280d0cdc51074bbfa22fd65186c3b1aa04","tarball":"https://registry.npmjs.org/@cipherdevnl/storybook-addon-pseudo-states/-/storybook-addon-pseudo-states-1.0.0.tgz","fileCount":15,"unpackedSize":41237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKdMZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9BxAAnq9fHjPatXoQPAiyDlenVJNC/LmRWNk+bTf/hz8aP2onmlnP\r\nCIkNUHgI9sg3Wh3SxGsXw57M9L/+sgNmhAZ2l7EPdP6of6IiybrDi4nSnPTJ\r\n15aGP1ALIP+ZRIKXtpNIpLnY51wUc8cLxSDDaiu79xv0VNPe8OWv7xaD2FYk\r\nuOx41HYtw9Aktrhcamf0NragNMwZWpg5SxgC7YpCy8mn/AwVcGOIfi8yUIWb\r\nENlEs/iVc6KWURhpBl5IXayNYOT6Jxs3Pygtu6/WU12b8IfVasis6bqStQDw\r\n7VqvIW3dPU+0DjZH2r9XgXdn+LqSGCg4XoxETeKYeeZoUvoHyAXkf9RQ4T0N\r\nR/xp6RIMK+gZde1fytgy1JKFZO0ipAg76dMJ9nJZqAvrC4up9BVUFF6XdcSt\r\nzSYlvQABrMC3aqNO/qGtlkaeUcEN4s0UfsFR2cG3nvs3MzNseVP2zPdb7ZyH\r\n1ejmK0y2bwNAPGuen+z5svJsEWRaEqDD4tcsoYLjIxq6TA66to40k8eGPzI5\r\nfY77BA+g5X5RDPUGf/+jY5axzWq416lqEP5uFdipAbj3KPhyyW9CAvd4/fWp\r\nIMrVJHKdYKvo94tSMqUXZBcZ9vXQzT6t9j0DAsSU94WNjicoNIuoy+OPSPbp\r\nFmLNqWJimR+BUB99WlyqZX3svcUjG7fAhm8=\r\n=oUT/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbZ49qYRVSKobTEk7XrMrDr+puMetZvej4sccp9sxNiwIgWoC1JDFT4G+laWfrPOIoM2XH9jcAaGo9gX2sz5sCzrA="}]},"_npmUser":{"name":"cipherdevnl","email":"bradley@fam-zeggelaar.nl"},"directories":{},"maintainers":[{"name":"cipherdevnl","email":"bradley@fam-zeggelaar.nl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-pseudo-states_1.0.0_1646908185641_0.41278920370279004"},"_hasShrinkwrap":false}},"time":{"created":"2022-03-10T10:29:45.575Z","1.0.0":"2022-03-10T10:29:45.825Z","modified":"2022-04-04T23:00:17.957Z"},"maintainers":[{"name":"cipherdevnl","email":"bradley@fam-zeggelaar.nl"}],"description":"CSS pseudo states for Storybook","homepage":"https://github.com/cipherdevnl/storybook-addon-pseudo-states#readme","keywords":["storybook-addons","pseudo states","style","test"],"repository":{"type":"git","url":"git+https://github.com/cipherdevnl/storybook-addon-pseudo-states.git"},"author":{"name":"ghengeveld"},"bugs":{"url":"https://github.com/cipherdevnl/storybook-addon-pseudo-states/issues"},"license":"MIT","readme":"\"\"\n\n# Storybook Pseudo States\n\nToggle CSS pseudo states for your components in Storybook.\n\n[![Published on npm](https://badgen.net/npm/v/storybook-addon-pseudo-states)](https://www.npmjs.com/package/storybook-addon-pseudo-states)\n[![Tested with Chromatic](https://badgen.net/badge/tested%20with/chromatic/fc521f)](https://www.chromatic.com/builds?appId=6008aabce49a640021858011)\n\n

\n \"\"\n

\n\n## Introduction\n\nThis addon attempts to \"force\" your components' pseudo states. It rewrites all document stylesheets to add a class name selector to any rules that target a pseudo-class (`:hover`, `:focus`, etc.). The tool then allows you to toggle these class names on the story container (`#root`). Additionally, you can set the `pseudo` property on your story `parameters` to set a default value for each pseudo class. This makes it possible to test such states with [Chromatic](https://www.chromatic.com/).\n\n### Limitations\n\nBecause this addon rewrites your stylesheets rather than toggle the actual browser behavior like DevTools does, it won't render any of the default user agent (browser) styles. Unfortunately there's no JavaScript API to toggle real pseudo states without using a browser extension.\n\n## Getting Started\n\nThis addon requires Storybook 6.1 or later. Install the latest with `npx sb upgrade --prerelease`\n\nFirst, install the addon:\n\n```sh\nnpm i -D storybook-addon-pseudo-states\n```\n\nThen, add `\"storybook-addon-pseudo-states\"` to the `addons` array in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):\n\n```js\nmodule.exports = {\n addons: [\"storybook-addon-pseudo-states\"],\n}\n```\n\n### Setting default story states\n\nYou can have your stories automatically use a specific set of pseudo states, by setting the `pseudo` property on `parameters`:\n\n```js\nexport const Hover = () => \nHover.parameters = { pseudo: { hover: true } }\n```\n\nThis is what enables snapshot testing your pseudo states in [Chromatic](https://www.chromatic.com/).\n","readmeFilename":"README.md"}