{"_id":"storybook-addon-breakpoints","_rev":"11-c76ede6776cd17db05a2a5d42d764d52","name":"storybook-addon-breakpoints","dist-tags":{"latest":"1.0.0","canary":"0.0.7-canary.2.061b3f8.0"},"versions":{"0.0.1":{"name":"storybook-addon-breakpoints","version":"0.0.1","description":"Storybook addon to display breakpoint sizes and their according name mappings","keywords":["storybook-addons","style","test"],"repository":{"type":"git","url":"git+https://github.com/feerglas/storybook-addon-breakpoints.git"},"author":{"name":"Yves Tscherry"},"license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 6006","start":"concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","prerelease":"zx scripts/prepublish-checks.mjs","release":"yarn build && auto shipit","eject-ts":"zx scripts/eject-typescript.mjs"},"devDependencies":{"@babel/cli":"^7.12.1","@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","@babel/preset-typescript":"^7.13.0","@storybook/addon-essentials":"^6.3.6","@storybook/react":"^6.3.6","auto":"^10.3.0","babel-loader":"^8.1.0","boxen":"^5.0.1","concurrently":"^6.2.0","dedent":"^0.7.0","prettier":"^2.3.1","prop-types":"^15.7.2","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2","typescript":"^4.2.4","zx":"^1.14.1"},"peerDependencies":{"@storybook/addons":"^6.3.6","@storybook/api":"^6.3.6","@storybook/components":"^6.3.6","@storybook/core-events":"^6.3.6","@storybook/theming":"^6.3.6","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Show Breakpoints in Storybook","supportedFrameworks":["react","vue","angular"],"icon":"https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"},"gitHead":"169c94dec7fbb6b69ca6111c1cd7a0e947481d9b","bugs":{"url":"https://github.com/feerglas/storybook-addon-breakpoints/issues"},"homepage":"https://github.com/feerglas/storybook-addon-breakpoints#readme","_id":"storybook-addon-breakpoints@0.0.1","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-fjPIt5NwkmbBiHa2Za8nJfq4OyjPArLAMn0+ab5qEU2s50RB9hzO9az+nuoDwlKPyRt/T7E2BldcGn8yE9Pgew==","shasum":"3fe09e34682d3956ba88356fae4eb5a34d0bf1b0","tarball":"https://registry.npmjs.org/storybook-addon-breakpoints/-/storybook-addon-breakpoints-0.0.1.tgz","fileCount":44,"unpackedSize":70775,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDe+Q17Joqvs//c+2r8GnakqiwjKBpxUg6XV9syslpRPwIhAJV5ZAKXcd+D31gz/kfs+/FBLI9tnkVIxWV8FTfwllB1"}]},"_npmUser":{"name":"feerglas","email":"feerglas@hotmail.com"},"directories":{},"maintainers":[{"name":"feerglas","email":"feerglas@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-breakpoints_0.0.1_1634149633432_0.39067290993453097"},"_hasShrinkwrap":false},"0.0.3":{"name":"storybook-addon-breakpoints","version":"0.0.3","description":"Storybook addon to display breakpoint sizes and their according name mappings","keywords":["storybook-addons","style","test"],"repository":{"type":"git","url":"git+https://github.com/feerglas/storybook-addon-breakpoints.git"},"author":{"name":"Yves Tscherry"},"license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 6006","start":"concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","prerelease":"zx scripts/prepublish-checks.mjs","release":"yarn build && auto shipit","eject-ts":"zx scripts/eject-typescript.mjs"},"devDependencies":{"@babel/cli":"^7.12.1","@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","@babel/preset-typescript":"^7.13.0","@storybook/addon-essentials":"^6.3.6","@storybook/react":"^6.3.6","auto":"^10.3.0","babel-loader":"^8.1.0","boxen":"^5.0.1","concurrently":"^6.2.0","dedent":"^0.7.0","prettier":"^2.3.1","prop-types":"^15.7.2","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2","typescript":"^4.2.4","zx":"^1.14.1"},"peerDependencies":{"@storybook/addons":"^6.3.6","@storybook/api":"^6.3.6","@storybook/components":"^6.3.6","@storybook/core-events":"^6.3.6","@storybook/theming":"^6.3.6","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Show Breakpoints in Storybook","supportedFrameworks":["react","vue","angular"],"icon":"https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"},"gitHead":"ca980015ebda3e2ad1a0f15d7dfbabdbfedd9b5b","bugs":{"url":"https://github.com/feerglas/storybook-addon-breakpoints/issues"},"homepage":"https://github.com/feerglas/storybook-addon-breakpoints#readme","_id":"storybook-addon-breakpoints@0.0.3","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-C7U/5dCW1P+VNIND6j2YSgBVV8RMHxxf7Lr/7LCT2gASl3dbHqQ/raPsbEWpjcIb2IHy8NYm1QwQg/zHk0RodQ==","shasum":"067cae4873d273e3af7fbd9830572516e26f64ec","tarball":"https://registry.npmjs.org/storybook-addon-breakpoints/-/storybook-addon-breakpoints-0.0.3.tgz","fileCount":32,"unpackedSize":35519,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAPqKHVc6Ur53eOc5mLrw9i+fkf2lKQ768XUia/QII+TAiEAvRsfYBGipk+CVXnzfD6Xm3p8WU+nJk2vjBUxwaJEl1g="}]},"_npmUser":{"name":"feerglas","email":"feerglas@hotmail.com"},"directories":{},"maintainers":[{"name":"feerglas","email":"feerglas@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-breakpoints_0.0.3_1634216847797_0.9055006315420495"},"_hasShrinkwrap":false},"0.0.4":{"name":"storybook-addon-breakpoints","version":"0.0.4","description":"Storybook addon to display breakpoint sizes and their according name mappings","keywords":["storybook-addons","style","test"],"repository":{"type":"git","url":"git+https://github.com/feerglas/storybook-addon-breakpoints.git"},"author":{"name":"Yves Tscherry"},"license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 6006","start":"concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","prerelease":"zx scripts/prepublish-checks.mjs","release":"yarn build && auto shipit","eject-ts":"zx scripts/eject-typescript.mjs"},"devDependencies":{"@babel/cli":"^7.12.1","@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","@babel/preset-typescript":"^7.13.0","@storybook/addon-essentials":"^6.3.6","@storybook/react":"^6.3.6","auto":"^10.3.0","babel-loader":"^8.1.0","boxen":"^5.0.1","concurrently":"^6.2.0","dedent":"^0.7.0","prettier":"^2.3.1","prop-types":"^15.7.2","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2","typescript":"^4.2.4","zx":"^1.14.1"},"peerDependencies":{"@storybook/addons":"^6.3.6","@storybook/api":"^6.3.6","@storybook/components":"^6.3.6","@storybook/core-events":"^6.3.6","@storybook/theming":"^6.3.6","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Show Breakpoints in Storybook","supportedFrameworks":["react","vue","angular"],"icon":"https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"},"gitHead":"13ace9fc64af9abdb88109448bf8178d0ed461f9","bugs":{"url":"https://github.com/feerglas/storybook-addon-breakpoints/issues"},"homepage":"https://github.com/feerglas/storybook-addon-breakpoints#readme","_id":"storybook-addon-breakpoints@0.0.4","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Aj3DCpnUHO0UIt5G1WfzQbUI/e3RBlNZVWRYlhT+74bRm4fZ0PlZ07YiWZ1E5r7yVsGrJbiRq5dk3IgsixtAaQ==","shasum":"bbbe07a76bfc3ac517832867355216c1e59ccd41","tarball":"https://registry.npmjs.org/storybook-addon-breakpoints/-/storybook-addon-breakpoints-0.0.4.tgz","fileCount":32,"unpackedSize":36134,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJ9kTatP1ySvNuX2L+lkoCXj1CtnQe1qteVvigtNJ/CAIhAJo3Rkn3e8M2kEeplpah/4geoburxGrOMmkXSRfuoxwv"}]},"_npmUser":{"name":"feerglas","email":"feerglas@hotmail.com"},"directories":{},"maintainers":[{"name":"feerglas","email":"feerglas@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-breakpoints_0.0.4_1634217527045_0.5463189296574014"},"_hasShrinkwrap":false},"0.0.5":{"name":"storybook-addon-breakpoints","version":"0.0.5","description":"Storybook addon to display breakpoint sizes and their according name mappings","keywords":["storybook-addons","style","test"],"repository":{"type":"git","url":"git+https://github.com/feerglas/storybook-addon-breakpoints.git"},"author":{"name":"Yves Tscherry"},"license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 6006","start":"env NODE_ENV=devonly concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","prerelease":"zx scripts/prepublish-checks.mjs","release":"yarn build && auto shipit","eject-ts":"zx scripts/eject-typescript.mjs"},"devDependencies":{"@babel/cli":"^7.12.1","@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","@babel/preset-typescript":"^7.13.0","@storybook/addon-essentials":"^6.3.6","@storybook/react":"^6.3.6","auto":"^10.3.0","babel-loader":"^8.1.0","boxen":"^5.0.1","concurrently":"^6.2.0","dedent":"^0.7.0","prettier":"^2.3.1","prop-types":"^15.7.2","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2","typescript":"^4.2.4","zx":"^1.14.1"},"peerDependencies":{"@storybook/addons":"^6.3.6","@storybook/api":"^6.3.6","@storybook/components":"^6.3.6","@storybook/core-events":"^6.3.6","@storybook/theming":"^6.3.6","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Show Breakpoints in Storybook","supportedFrameworks":["react","vue","angular"],"icon":"https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"},"gitHead":"40706e920e33a64b0940ccc74e368a636a8a2109","bugs":{"url":"https://github.com/feerglas/storybook-addon-breakpoints/issues"},"homepage":"https://github.com/feerglas/storybook-addon-breakpoints#readme","_id":"storybook-addon-breakpoints@0.0.5","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-frCFY7/GtXAw/hxocTVJr5ctvhNfAZjWZdWswAmuqf6NoSlYkF+qAmOMzNHtbXpHw/oqC9bp0BExl5H6LFzEng==","shasum":"6af7df8e72ad7a4113d34aa1877ac2f3b9c6daaf","tarball":"https://registry.npmjs.org/storybook-addon-breakpoints/-/storybook-addon-breakpoints-0.0.5.tgz","fileCount":32,"unpackedSize":36426,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/IukcYCm8QFhc4PyCg2OZsKon8MBo+zN/IeKhSxvKtwIhANPwjqrETPpn0O5cE211WuLtMmAExEhbY36/aWObV1yd"}]},"_npmUser":{"name":"feerglas","email":"feerglas@hotmail.com"},"directories":{},"maintainers":[{"name":"feerglas","email":"feerglas@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-breakpoints_0.0.5_1634219214302_0.7765698823146154"},"_hasShrinkwrap":false},"0.0.6-canary.1.fa6dc80.0":{"name":"storybook-addon-breakpoints","version":"0.0.6-canary.1.fa6dc80.0","description":"Storybook addon to display breakpoint sizes and their according name mappings","keywords":["storybook-addons","style","breakpoints","breakpoint","design system"],"homepage":"https://github.com/feerglas/storybook-addon-breakpoints","bugs":{"url":"https://github.com/feerglas/storybook-addon-breakpoints/issues"},"repository":{"type":"git","url":"git+https://github.com/feerglas/storybook-addon-breakpoints.git"},"author":{"name":"Yves Tscherry","email":"feerglas@hotmail.com"},"license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","lint":"eslint --ignore-path .gitignore --ext .js,.tsx,.ts .","test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 6006","start":"env NODE_ENV=devonly concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","prerelease":"zx scripts/prepublish-checks.mjs","release":"yarn lint && yarn build && auto shipit","eject-ts":"zx scripts/eject-typescript.mjs"},"devDependencies":{"@babel/cli":"^7.12.1","@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","@babel/preset-typescript":"^7.13.0","@storybook/addon-essentials":"^6.3.6","@storybook/react":"^6.3.6","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","auto":"^10.3.0","babel-loader":"^8.1.0","boxen":"^5.0.1","concurrently":"^6.2.0","dedent":"^0.7.0","eslint":"^8.0.1","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.25.2","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^4.2.0","prettier":"^2.3.1","prop-types":"^15.7.2","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2","typescript":"^4.2.4","zx":"^1.14.1"},"peerDependencies":{"@storybook/addons":"^6.3.6","@storybook/api":"^6.3.6","@storybook/components":"^6.3.6","@storybook/core-events":"^6.3.6","@storybook/theming":"^6.3.6","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Breakpoints","supportedFrameworks":["react","vue","angular"],"icon":"https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"},"readme":"# Storybook Breakpoints Addon\n\n[![npm package version](https://img.shields.io/npm/v/storybook-addon-breakpoints)](https://www.npmjs.com/package/storybook-addon-breakpoints)\n\nA [Storybook](https://storybook.js.org) addon to see the actual width of the Storybook iFrame. If you provide mappings for your breakpoints, we even show you the currently active Breakpoint name 🤗\n\n![Demo](demo.gif)\n\n## Installation\n\n```bash\nnpm install --save-dev storybook-addon-breakpoints\n```\n\nwithin [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-breakpoints'],\n};\n```\n\n## Configuration\n\n### Default configuration\n\nWithout any configuration, the addon shows an overlay with the current width of the Storbook component view.\n\n### Breakpoints\n\nYou can pass an object with information about your breakpoints. We use this information to show the name of the corresponding breakpoint in the overlay.\n\nTo do so, you have to add the breakpoints to the `breakpoints` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters) in your stories like so:\n\n```js\nexport default {\n  title: 'title-of-my-story',\n  parameters: {\n    breakpoints: {\n      breakpointNames: {\n        'small': '500',\n        'medium': '1000',\n        'large': '1500'\n      }\n    }\n  }\n};\n```\n\nTo configure the addon for all stories, set the `breakpoints` parameter in [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering):\n\n```js\nexport const parameters = {\n  breakpoints: {\n    breakpointNames: {\n      'small': '500',\n      'medium': '1000',\n      'large': '1500'\n    }\n  }\n};\n```\n\nThe keys of the object `breakpointNames` are the names that we show in the overlay. The corresponding values are represent the upper limit of each breakpoint. For the example above, this means the following:\n- small breakpoint: from 0 to 500 pixels\n- medium breakpoint: from 501 to 1000 pixels\n- large breakpoint: from 1001 to 1500 pixels\n\n### Debouncing\n\nIt can be ressource intensive to make the calculations to display the breakpoints on every pixel resize. To improve performance, we support debouncing on window resize.\n\n```js\nexport const parameters = {\n  breakpoints: {\n    breakpointNames: {...},\n    debounce: 200\n  }\n};\n```\n\nIn the example above, we make the calculations for the breakpoints at maximum every 200ms on resize.\n","readmeFilename":"README.md","gitHead":"fa6dc806f46a6391ca28f0adc9716b8297a03294","_id":"storybook-addon-breakpoints@0.0.6-canary.1.fa6dc80.0","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-5ell0QTEQXp3otz2trzaN8EOz5UTtzmtPCv9Xm3F6tFINrWLeq/L9MvYJz9OT7jqOxBOcxdx0S+1927RD71ONQ==","shasum":"a361dcd475f442b0756b0d4c2d552638a52154c6","tarball":"https://registry.npmjs.org/storybook-addon-breakpoints/-/storybook-addon-breakpoints-0.0.6-canary.1.fa6dc80.0.tgz","fileCount":35,"unpackedSize":42379,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2v1lglCmxf+D+BgjDU1wjTpokbV1ASM06Zxc8lVV7YgIgPOOHC1B2PArR/tIdRjq+HnN/MHhtCTLd1rm6WdIm/9A="}]},"_npmUser":{"name":"feerglas","email":"feerglas@hotmail.com"},"directories":{},"maintainers":[{"name":"feerglas","email":"feerglas@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-breakpoints_0.0.6-canary.1.fa6dc80.0_1634240278203_0.9017269308767968"},"_hasShrinkwrap":false},"0.0.6":{"name":"storybook-addon-breakpoints","version":"0.0.6","description":"Storybook addon to display breakpoint sizes and their according name mappings","keywords":["storybook-addons","style","breakpoints","breakpoint","design system"],"homepage":"https://github.com/feerglas/storybook-addon-breakpoints","bugs":{"url":"https://github.com/feerglas/storybook-addon-breakpoints/issues"},"repository":{"type":"git","url":"git+https://github.com/feerglas/storybook-addon-breakpoints.git"},"author":{"name":"Yves Tscherry","email":"feerglas@hotmail.com"},"license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","lint":"eslint --ignore-path .gitignore --ext .js,.tsx,.ts .","test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 6006","start":"env NODE_ENV=devonly concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","prerelease":"zx scripts/prepublish-checks.mjs","release":"yarn lint && yarn build && auto shipit","eject-ts":"zx scripts/eject-typescript.mjs"},"devDependencies":{"@babel/cli":"^7.12.1","@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","@babel/preset-typescript":"^7.13.0","@storybook/addon-essentials":"^6.3.6","@storybook/react":"^6.3.6","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","auto":"^10.3.0","babel-loader":"^8.1.0","boxen":"^5.0.1","concurrently":"^6.2.0","dedent":"^0.7.0","eslint":"^8.0.1","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.25.2","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^4.2.0","prettier":"^2.3.1","prop-types":"^15.7.2","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2","typescript":"^4.2.4","zx":"^1.14.1"},"peerDependencies":{"@storybook/addons":"^6.3.6","@storybook/api":"^6.3.6","@storybook/components":"^6.3.6","@storybook/core-events":"^6.3.6","@storybook/theming":"^6.3.6","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Breakpoints","supportedFrameworks":["react","vue","angular"],"icon":"https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"},"gitHead":"7ee5a48c43d462851442307ccd2c6c139f6f8804","_id":"storybook-addon-breakpoints@0.0.6","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Eox/WsXp20qJsjvKyUylda85X8/TFS0ktZai00/rWGElHDUCWOPDmR5iONfhriQ+RRvVhVYKaXJh81t/QPKgRg==","shasum":"619674d21c67ae0e3aa2ccb781742f75a8c25002","tarball":"https://registry.npmjs.org/storybook-addon-breakpoints/-/storybook-addon-breakpoints-0.0.6.tgz","fileCount":35,"unpackedSize":42631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwSBLYRr8Njrk8AaV3cd5lio9TsDVNTjGLcGeEjdxyBgIhAOBvS0KJSl0uVC30Qmp819qVOMjzdNevJ/bcAX8megxf"}]},"_npmUser":{"name":"feerglas","email":"feerglas@hotmail.com"},"directories":{},"maintainers":[{"name":"feerglas","email":"feerglas@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-breakpoints_0.0.6_1634240458112_0.7499163405830354"},"_hasShrinkwrap":false},"0.0.7-canary.2.b750b0a.0":{"name":"storybook-addon-breakpoints","version":"0.0.7-canary.2.b750b0a.0","description":"Storybook addon to display breakpoint sizes and their according name mappings","keywords":["storybook-addons","style","layout","css","design","breakpoints","breakpoint","design system"],"homepage":"https://github.com/feerglas/storybook-addon-breakpoints","bugs":{"url":"https://github.com/feerglas/storybook-addon-breakpoints/issues"},"repository":{"type":"git","url":"git+https://github.com/feerglas/storybook-addon-breakpoints.git"},"author":{"name":"Yves Tscherry","email":"feerglas@hotmail.com"},"license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","lint":"eslint --ignore-path .gitignore --ext .js,.tsx,.ts .","test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 6006","start":"env NODE_ENV=devonly concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","release":"yarn lint && yarn build && auto shipit"},"devDependencies":{"@babel/cli":"^7.12.1","@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","@babel/preset-typescript":"^7.13.0","@storybook/addon-essentials":"^6.3.6","@storybook/react":"^6.3.6","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","auto":"^10.3.0","babel-loader":"^8.1.0","boxen":"^5.0.1","concurrently":"^6.2.0","dedent":"^0.7.0","eslint":"^8.0.1","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.25.2","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^4.2.0","prettier":"^2.3.1","prop-types":"^15.7.2","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2","typescript":"^4.2.4","zx":"^1.14.1"},"peerDependencies":{"@storybook/addons":"^6.3.6","@storybook/api":"^6.3.6","@storybook/components":"^6.3.6","@storybook/core-events":"^6.3.6","@storybook/theming":"^6.3.6","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Breakpoints","supportedFrameworks":["react","vue","angular"],"icon":"https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"},"readme":"# Storybook Breakpoints Addon\n\n[![npm package version](https://img.shields.io/npm/v/storybook-addon-breakpoints)](https://www.npmjs.com/package/storybook-addon-breakpoints)\n\nA [Storybook](https://storybook.js.org) addon to see the actual width of the Storybook iFrame. If you provide mappings for your breakpoints, we even show you the currently active Breakpoint name 🤗\n\n![Demo](demo.gif)\n\n## Installation\n\n```bash\nnpm install --save-dev storybook-addon-breakpoints\n```\n\nwithin [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-breakpoints'],\n};\n```\n\n## Configuration\n\n### Default configuration\n\nWithout any configuration, the addon shows an overlay with the current width of the Storbook component view.\n\n### Breakpoints\n\nYou can pass an object with information about your breakpoints. We use this information to show the name of the corresponding breakpoint in the overlay.\n\nTo do so, you have to add the breakpoints to the `breakpoints` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters) in your stories like so:\n\n```js\nexport default {\n  title: 'title-of-my-story',\n  parameters: {\n    breakpoints: {\n      breakpointNames: {\n        'small': '500',\n        'medium': '1000',\n        'large': '1500'\n      }\n    }\n  }\n};\n```\n\nTo configure the addon for all stories, set the `breakpoints` parameter in [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering):\n\n```js\nexport const parameters = {\n  breakpoints: {\n    breakpointNames: {\n      'small': '500',\n      'medium': '1000',\n      'large': '1500'\n    }\n  }\n};\n```\n\nThe keys of the object `breakpointNames` are the names that we show in the overlay. The corresponding values are represent the upper limit of each breakpoint. For the example above, this means the following:\n- small breakpoint: from 0 to 500 pixels\n- medium breakpoint: from 501 to 1000 pixels\n- large breakpoint: from 1001 to 1500 pixels\n\n### Debouncing\n\nIt can be ressource intensive to make the calculations to display the breakpoints on every pixel resize. To improve performance, we support debouncing on window resize.\n\n```js\nexport const parameters = {\n  breakpoints: {\n    breakpointNames: {...},\n    debounce: 200\n  }\n};\n```\n\nIn the example above, we make the calculations for the breakpoints at maximum every 200ms on resize.\n","readmeFilename":"README.md","gitHead":"b750b0acd772e0fa4bebee89e67f54b7f1ca8859","_id":"storybook-addon-breakpoints@0.0.7-canary.2.b750b0a.0","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-6S0mUtt1+cLtfeInmoXgpo8TGF3f7ur5XXxIH6BbsDh8XCaNnaCvvXaJaaQl/I+Bb7FcFDSR5d580W94l/y22g==","shasum":"b2930d70453eec2b8564628145d148efcd027e4c","tarball":"https://registry.npmjs.org/storybook-addon-breakpoints/-/storybook-addon-breakpoints-0.0.7-canary.2.b750b0a.0.tgz","fileCount":35,"unpackedSize":42584,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOLyaFngGKlalswGfYeL+L93rvHuOQ160/jyaar9gvdwIhALN4iLaYd6nwJzvnSHnLBMXXzy2viBRxp9XVUPyjyvR4"}]},"_npmUser":{"name":"feerglas","email":"feerglas@hotmail.com"},"directories":{},"maintainers":[{"name":"feerglas","email":"feerglas@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-breakpoints_0.0.7-canary.2.b750b0a.0_1634241400676_0.37479564734557846"},"_hasShrinkwrap":false},"0.0.7-canary.2.061b3f8.0":{"name":"storybook-addon-breakpoints","version":"0.0.7-canary.2.061b3f8.0","description":"Storybook addon to display breakpoint sizes and their according name mappings","keywords":["storybook-addons","style","layout","css","design","breakpoints","breakpoint","design system"],"homepage":"https://github.com/feerglas/storybook-addon-breakpoints","bugs":{"url":"https://github.com/feerglas/storybook-addon-breakpoints/issues"},"repository":{"type":"git","url":"git+https://github.com/feerglas/storybook-addon-breakpoints.git"},"author":{"name":"Yves Tscherry","email":"feerglas@hotmail.com"},"license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","lint":"eslint --ignore-path .gitignore --ext .js,.tsx,.ts .","test":"echo \"Error: no test specified\" && exit 1","semantic-release":"semantic-release","storybook":"start-storybook -p 6006","start":"env NODE_ENV=devonly concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","release":"yarn lint && yarn build && auto shipit","prepare":"husky install"},"devDependencies":{"@babel/cli":"^7.12.1","@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","@babel/preset-typescript":"^7.13.0","@commitlint/cli":"^13.2.1","@commitlint/config-conventional":"^13.2.0","@semantic-release/changelog":"^6.0.0","@semantic-release/exec":"^6.0.1","@semantic-release/git":"^10.0.0","@storybook/addon-essentials":"^6.3.6","@storybook/react":"^6.3.6","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","auto":"^10.3.0","babel-loader":"^8.1.0","boxen":"^5.0.1","concurrently":"^6.2.0","dedent":"^0.7.0","eslint":"^8.0.1","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.25.2","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^4.2.0","husky":"^7.0.2","prettier":"^2.3.1","prop-types":"^15.7.2","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2","semantic-release":"^18.0.0","typescript":"^4.2.4","zx":"^1.14.1"},"peerDependencies":{"@storybook/addons":"^6.3.6","@storybook/api":"^6.3.6","@storybook/components":"^6.3.6","@storybook/core-events":"^6.3.6","@storybook/theming":"^6.3.6","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Breakpoints","supportedFrameworks":["react","vue","angular"],"icon":"https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"},"readme":"# Storybook Breakpoints Addon\n\n[![npm package version](https://img.shields.io/npm/v/storybook-addon-breakpoints)](https://www.npmjs.com/package/storybook-addon-breakpoints)\n\nA [Storybook](https://storybook.js.org) addon to see the actual width of the Storybook iFrame. If you provide mappings for your breakpoints, we even show you the currently active Breakpoint name 🤗\n\n![Demo](demo.gif)\n\n## Installation\n\n```bash\nnpm install --save-dev storybook-addon-breakpoints\n```\n\nwithin [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-breakpoints'],\n};\n```\n\n## Configuration\n\n### Default configuration\n\nWithout any configuration, the addon shows an overlay with the current width of the Storbook component view.\n\n### Breakpoints\n\nYou can pass an object with information about your breakpoints. We use this information to show the name of the corresponding breakpoint in the overlay.\n\nTo do so, you have to add the breakpoints to the `breakpoints` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters) in your stories like so:\n\n```js\nexport default {\n  title: 'title-of-my-story',\n  parameters: {\n    breakpoints: {\n      breakpointNames: {\n        'small': '500',\n        'medium': '1000',\n        'large': '1500'\n      }\n    }\n  }\n};\n```\n\nTo configure the addon for all stories, set the `breakpoints` parameter in [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering):\n\n```js\nexport const parameters = {\n  breakpoints: {\n    breakpointNames: {\n      'small': '500',\n      'medium': '1000',\n      'large': '1500'\n    }\n  }\n};\n```\n\nThe keys of the object `breakpointNames` are the names that we show in the overlay. The corresponding values are represent the upper limit of each breakpoint. For the example above, this means the following:\n- small breakpoint: from 0 to 500 pixels\n- medium breakpoint: from 501 to 1000 pixels\n- large breakpoint: from 1001 to 1500 pixels\n\n### Debouncing\n\nIt can be ressource intensive to make the calculations to display the breakpoints on every pixel resize. To improve performance, we support debouncing on window resize.\n\n```js\nexport const parameters = {\n  breakpoints: {\n    breakpointNames: {...},\n    debounce: 200\n  }\n};\n```\n\nIn the example above, we make the calculations for the breakpoints at maximum every 200ms on resize.\n","readmeFilename":"README.md","gitHead":"061b3f87730a51df2e2f4fe9a354999a29011324","_id":"storybook-addon-breakpoints@0.0.7-canary.2.061b3f8.0","_nodeVersion":"14.18.0","_npmVersion":"7.24.2","dist":{"integrity":"sha512-P0B4j94wjC3JG93u48x0yLVYNHigxjE8ej9cL2W8Tq+KQpf0//U5ZN/ynamI27zw9kUJ/Wyq2oWkpEnmaiX9nw==","shasum":"bfe8831b72130fb9261a05f0c8d6bc240aec4905","tarball":"https://registry.npmjs.org/storybook-addon-breakpoints/-/storybook-addon-breakpoints-0.0.7-canary.2.061b3f8.0.tgz","fileCount":35,"unpackedSize":38350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHYQXj1YAvG7MpAjaFG3tEnarOFOoZJlAgzMh0ImD7mcAiATHCmG/aRtmWdRzcvvVivbyH/coOALsR3oQ55a/J+T6A=="}]},"_npmUser":{"name":"feerglas","email":"feerglas@hotmail.com"},"directories":{},"maintainers":[{"name":"feerglas","email":"feerglas@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-breakpoints_0.0.7-canary.2.061b3f8.0_1634242475125_0.4150956780396349"},"_hasShrinkwrap":false},"0.0.7":{"name":"storybook-addon-breakpoints","version":"0.0.7","description":"Storybook addon to display breakpoint sizes and their according name mappings","keywords":["storybook-addons","style","layout","css","design","breakpoints","breakpoint","design system"],"homepage":"https://github.com/feerglas/storybook-addon-breakpoints","bugs":{"url":"https://github.com/feerglas/storybook-addon-breakpoints/issues"},"repository":{"type":"git","url":"git+https://github.com/feerglas/storybook-addon-breakpoints.git"},"author":{"name":"Yves Tscherry","email":"feerglas@hotmail.com"},"license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","lint":"eslint --ignore-path .gitignore --ext .js,.tsx,.ts .","test":"echo \"Error: no test specified\" && exit 1","semantic-release":"semantic-release","storybook":"start-storybook -p 6006","start":"env NODE_ENV=devonly concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","prepare":"husky install"},"devDependencies":{"@babel/cli":"^7.12.1","@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","@babel/preset-typescript":"^7.13.0","@commitlint/cli":"^13.2.1","@commitlint/config-conventional":"^13.2.0","@semantic-release/changelog":"^6.0.0","@semantic-release/exec":"^6.0.1","@semantic-release/git":"^10.0.0","@storybook/addon-essentials":"^6.3.6","@storybook/react":"^6.3.6","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","auto":"^10.3.0","babel-loader":"^8.1.0","boxen":"^5.0.1","concurrently":"^6.2.0","dedent":"^0.7.0","eslint":"^8.0.1","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.25.2","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^4.2.0","husky":"^7.0.2","prettier":"^2.3.1","prop-types":"^15.7.2","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2","semantic-release":"^18.0.0","typescript":"^4.2.4","zx":"^1.14.1"},"peerDependencies":{"@storybook/addons":"^6.3.6","@storybook/api":"^6.3.6","@storybook/components":"^6.3.6","@storybook/core-events":"^6.3.6","@storybook/theming":"^6.3.6","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Breakpoints","supportedFrameworks":["react","vue","angular"],"icon":"https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"},"gitHead":"af815d86a420c05409ecd6a0621c09fa576445e6","_id":"storybook-addon-breakpoints@0.0.7","_nodeVersion":"14.17.1","_npmVersion":"7.24.2","dist":{"integrity":"sha512-aIIr0ueAxOoxy3KsjbcawfE18D/pjTUZSWzL4guoYeoGca8UPco32cnpwYAksMqhzkToxIzsOBJNHVv4SLhvuw==","shasum":"d041777f92fd98979c0cc4628644e3546db18d7e","tarball":"https://registry.npmjs.org/storybook-addon-breakpoints/-/storybook-addon-breakpoints-0.0.7.tgz","fileCount":35,"unpackedSize":38274,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFa1+UZU/eoDKhe0hX9Z1DxSpZ2QNaf2tUmqgMRe93+iAiAJrI/9XSJv76Yz5kmA81woSFF+eqtcJaFugukhtzR2ZA=="}]},"_npmUser":{"name":"feerglas","email":"feerglas@hotmail.com"},"directories":{},"maintainers":[{"name":"feerglas","email":"feerglas@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-breakpoints_0.0.7_1634243842265_0.9000841250964635"},"_hasShrinkwrap":false},"1.0.0":{"name":"storybook-addon-breakpoints","version":"1.0.0","description":"Storybook addon to display breakpoint sizes and their according name mappings","keywords":["storybook-addons","style","layout","css","design","breakpoints","breakpoint","design system"],"homepage":"https://github.com/feerglas/storybook-addon-breakpoints","bugs":{"url":"https://github.com/feerglas/storybook-addon-breakpoints/issues"},"repository":{"type":"git","url":"git+https://github.com/feerglas/storybook-addon-breakpoints.git"},"author":{"name":"Yves Tscherry","email":"feerglas@hotmail.com"},"license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","lint":"eslint --ignore-path .gitignore --ext .js,.tsx,.ts .","test":"echo \"Error: no test specified\" && exit 1","semantic-release":"semantic-release","storybook":"start-storybook -p 6006","start":"env NODE_ENV=devonly concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","prepare":"husky install"},"devDependencies":{"@babel/cli":"^7.12.1","@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.5","@babel/preset-typescript":"^7.13.0","@commitlint/cli":"^13.2.1","@commitlint/config-conventional":"^13.2.0","@semantic-release/changelog":"^6.0.0","@semantic-release/exec":"^6.0.1","@semantic-release/git":"^10.0.0","@storybook/addon-essentials":"^6.3.6","@storybook/react":"^6.3.6","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","babel-loader":"^8.1.0","boxen":"^5.0.1","concurrently":"^6.2.0","dedent":"^0.7.0","eslint":"^8.0.1","eslint-config-airbnb":"^18.2.1","eslint-plugin-import":"^2.25.2","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^4.2.0","husky":"^7.0.2","prettier":"^2.3.1","prop-types":"^15.7.2","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2","semantic-release":"^18.0.0","typescript":"^4.2.4","zx":"^1.14.1"},"peerDependencies":{"@storybook/addons":"^6.3.6","@storybook/api":"^6.3.6","@storybook/components":"^6.3.6","@storybook/core-events":"^6.3.6","@storybook/theming":"^6.3.6","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Breakpoints","supportedFrameworks":["react","vue","angular"],"icon":"https://raw.githubusercontent.com/feerglas/storybook-addon-breakpoints/HEAD/icons/storybook-addon-breakpoints-transparent.svg"},"gitHead":"08c3509cddd6ab56b9612ab51637c4f3054d5ae1","_id":"storybook-addon-breakpoints@1.0.0","_nodeVersion":"14.17.1","_npmVersion":"7.24.2","dist":{"integrity":"sha512-sa9EBIpNyOK3yEaGwGGlceh2vFStlJqtVYeo8e2QZCKNHVBQLpP+1GAPTBLzK2359K4FlWyLgF6A97XAy6X+4A==","shasum":"41287428624de16397e716b50063fb0ae7e35407","tarball":"https://registry.npmjs.org/storybook-addon-breakpoints/-/storybook-addon-breakpoints-1.0.0.tgz","fileCount":35,"unpackedSize":38317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh28JNCRA9TVsSAnZWagAAgF0QAJjrkPscwyFOJTmeG1oc\nK5Ft57dflUZgiC3X3VL9TcPBwBv7hYQHhuYEj1P26TWplpAitvQhmCphQuAR\ndlLek3Ap3apPSbe4brNVKMkgNkYTNSilkG9NsbRXJsJeWTV0QZVaMHMVtLdK\nli4wmlRR8hd8Db7wX9wwirFryQYGaws8E5KwKpSbeeyPiAiB2Ai4eQjzo6+X\nPFCp0iaCyXvH2JkY57X8fjZR77IwB8darwwzOCkPnedYDJaozquPdMvqxKMo\nMLmmvdwnGqdazUjygRvnUqycp6ihwLzxGaUfqD4Vz9RHHNMSVPpQ/dRHcNu2\npsY7NDGHMB0VCj6ateq7pw1Q1IeOESNC2dSQRVGH9NQWzV3CNGTYc8V+mXHt\neuQ4ZoWvijezuEmZQPMgSvoprtugCL5T1S8Ahu0uIrqbBxMIEwzRrkQOS+gv\nuiKMKe48dX8hMK2ZsQ17PXcf7q+ydXe8SwtxkK59asf735X/Kd8R1OMir7Sk\nzQQHCu2ZtTH4yj8Ae6e3W2G1RuvtX/SIVFiDwD35ME8bSjRViEVQw5paL/Eq\nPC7Zx6wB6qxnrGKQYyht7oR8F71CjP9iRXsxgnIknTjrFppw2n9Lx/lcS6os\nGmge1GYgzNvpAgF6T6xfdo/3Xh+gqvfNmCHq0jV3lxkzYNhi1mcYtFS17PTR\nDh4S\r\n=2ULt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5h2fAAuJ/w6pRpxFj8zmZufejfbXCyV8f8H5UnksCRwIhALa3BcToy8jGqp4WiIUs8vF88kWwJKgJjEs1mIO9euCb"}]},"_npmUser":{"name":"feerglas","email":"feerglas@hotmail.com"},"directories":{},"maintainers":[{"name":"feerglas","email":"feerglas@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-breakpoints_1.0.0_1634296839458_0.9329336262464134"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-13T18:27:13.381Z","0.0.1":"2021-10-13T18:27:13.607Z","modified":"2022-05-18T19:01:49.911Z","0.0.3":"2021-10-14T13:07:27.943Z","0.0.4":"2021-10-14T13:18:47.191Z","0.0.5":"2021-10-14T13:46:54.480Z","0.0.6-canary.1.fa6dc80.0":"2021-10-14T19:37:58.450Z","0.0.6":"2021-10-14T19:40:58.336Z","0.0.7-canary.2.b750b0a.0":"2021-10-14T19:56:40.868Z","0.0.7-canary.2.061b3f8.0":"2021-10-14T20:14:35.291Z","0.0.7":"2021-10-14T20:37:22.411Z","1.0.0":"2021-10-15T11:20:39.646Z"},"maintainers":[{"name":"feerglas","email":"feerglas@hotmail.com"}],"description":"Storybook addon to display breakpoint sizes and their according name mappings","homepage":"https://github.com/feerglas/storybook-addon-breakpoints","keywords":["storybook-addons","style","layout","css","design","breakpoints","breakpoint","design system"],"repository":{"type":"git","url":"git+https://github.com/feerglas/storybook-addon-breakpoints.git"},"author":{"name":"Yves Tscherry","email":"feerglas@hotmail.com"},"bugs":{"url":"https://github.com/feerglas/storybook-addon-breakpoints/issues"},"license":"MIT","readme":"# Storybook Breakpoints Addon\n\n[![npm package version](https://img.shields.io/npm/v/storybook-addon-breakpoints)](https://www.npmjs.com/package/storybook-addon-breakpoints)\n\nA [Storybook](https://storybook.js.org) addon to see the actual width of the Storybook iFrame. If you provide mappings for your breakpoints, we even show you the currently active Breakpoint name 🤗\n\n![Demo](demo.gif)\n\n## Installation\n\n```bash\nnpm install --save-dev storybook-addon-breakpoints\n```\n\nwithin [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-breakpoints'],\n};\n```\n\n## Configuration\n\n### Default configuration\n\nWithout any configuration, the addon shows an overlay with the current width of the Storybook component view.\n\n### Breakpoints\n\nYou can pass an object with information about your breakpoints. We use this information to show the name of the corresponding breakpoint in the overlay.\n\nTo do so, you have to add the breakpoints to the `breakpoints` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters) in your stories like so:\n\n```js\nexport default {\n  title: 'title-of-my-story',\n  parameters: {\n    breakpoints: {\n      breakpointNames: {\n        'small': '0',\n        'medium': '500',\n        'large': '1000'\n      }\n    }\n  }\n};\n```\n\nTo configure the addon for all stories, set the `breakpoints` parameter in [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering):\n\n```js\nexport const parameters = {\n  breakpoints: {\n    breakpointNames: {\n      'small': '0',\n      'medium': '500',\n      'large': '1000'\n    }\n  }\n};\n```\n\nThe keys of the object `breakpointNames` are the names that we show in the overlay. The corresponding values represent the lower starting point of each breakpoint. In the example above, this means the following:\n- small breakpoint: from 0 to 499 pixels\n- medium breakpoint: from 500 to 999 pixels\n- large breakpoint: from 1000 pixels on\n\n### Debouncing\n\nIt can be ressource intensive to make the calculations to display the breakpoints on every pixel resize. To improve performance, we support debouncing on window resize. Use to `debounceTimeout` key as follows:\n\n```js\nexport const parameters = {\n  breakpoints: {\n    breakpointNames: {...},\n    debounceTimeout: 200\n  }\n};\n```\n\nIn the example above, we make the calculations for the breakpoints at maximum every 200ms on resize.\n","readmeFilename":"README.md"}