{"dist":{"shasum":"720cd182f8b1fa986c1d664407cc55131d6b6168","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.21.tgz","fileCount":67,"integrity":"sha512-4/QG4bXrzAKeuD3EGcqC6SSobhOVicUgkja2Xju4NKehzkPhtyPWwB8O7txKzFx8+ci9M1boMXCW2rWkB6CpEA==","signatures":[{"sig":"MEYCIQCFQyYOdU50G0j5Rj9F7hzb3MAbZ5gFH8g4YTcn5UG3LwIhAMDFZ/f03qMGPGc4YBBnzPzczEto176v9MxdlXmeFKc2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkrN8CRA9TVsSAnZWagAAhF0P/AriYTn4YVpTO1YALUeg\nETkWiE4+N0TvpWmhg5TYQbyfmcxTJrGVZRsIh6fux9XXcBi2DKbhwRWbBesu\nWoaRooMaxT+qGy1xpSuDGazmZbneIP7yFrZxleqxH8vNMgr3xTSWExOMWg0F\nb7yM6e47L20s7mHXr+Lk4KOQEU5nsKfDc4yJIEeHW01Wp9oECk17ESjbwj2L\nsyHv84YHlv8zWrb/JmSiDzsHw+LPj36gfmon4aaG/18o2kaV5OG3jmdO5ULh\npQR7d7PYQFCNzwpsmRSBRZMeUrSKxxBekXDYYmn42VuQbt6nlgGiAjLviHip\nqNiBTjZK9JpuMI0GBA4Sj81TJd/gNIWbAsOedH3GGKy3IrmT0BWvkUoif4Rb\nei9MEJil3h0mnk+F/32eK03fLtJ/3E2aWGGzVkDOYZelUjZSzHvQ/1YTPrxz\nV/d0NaPgB5wS7Z5CyK+jZ9HnJTNw3/50PJI6FOxq3muasgr4GmT7W7GGs1PA\nVjH5rX1RHSW/UwcHEDYAiFJ8R731K3kPCevCU7t0YSygeo/QSkxs7Wz6MKxj\nC0izT0rI7v/FVrrsrOM8wRrZSB+yaIsWj0tbzK4u5mOyRSMPdiDbx5TbdotM\nni8EaJZagh6rn3irlTlKyB2875h5d8prHWSpEK5lKFQGjZd9ATTbFyNqDiFk\nysCx\r\n=D1vE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"@storybook/addon-knobs","readme":"# Storybook Addon Knobs\n\nStorybook Addon Knobs allow you to edit React props dynamically using the Storybook UI.\nYou can also use Knobs as a dynamic variable inside stories in [Storybook](https://storybook.js.org).\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\nThis is how Knobs look like:\n\n[](https://storybooks-official.netlify.com/?knob-Dollars=12.5&knob-Name=Storyteller&knob-Years%20in%20NY=9&knob-background=%23ffff00&knob-Age=70&knob-Items%5B0%5D=Laptop&knob-Items%5B1%5D=Book&knob-Items%5B2%5D=Whiskey&knob-Other%20Fruit=lime&knob-Birthday=1484870400000&knob-Nice=true&knob-Styles=%7B%22border%22%3A%223px%20solid%20%23ff00ff%22%2C%22padding%22%3A%2210px%22%7D&knob-Fruit=apple&selectedKind=Addons%7CKnobs.withKnobs&selectedStory=tweaks%20static%20values&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs)\n\n> Checkout the above [Live Storybook](https://storybooks-official.netlify.com/?knob-Dollars=12.5&knob-Name=Storyteller&knob-Years%20in%20NY=9&knob-background=%23ffff00&knob-Age=70&knob-Items%5B0%5D=Laptop&knob-Items%5B1%5D=Book&knob-Items%5B2%5D=Whiskey&knob-Other%20Fruit=lime&knob-Birthday=1484870400000&knob-Nice=true&knob-Styles=%7B%22border%22%3A%223px%20solid%20%23ff00ff%22%2C%22padding%22%3A%2210px%22%7D&knob-Fruit=apple&selectedKind=Addons%7CKnobs.withKnobs&selectedStory=tweaks%20static%20values&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs) or [watch this video](https://www.youtube.com/watch?v=kopW6vzs9dg&feature=youtu.be).\n\n## Getting Started\n\nFirst of all, you need to install knobs into your project as a dev dependency.\n\n```sh\nnpm install @storybook/addon-knobs --save-dev\n```\n\nThen, configure it as an addon by adding it to your `addons.js` file (located in the Storybook config directory).\n\n```js\nimport '@storybook/addon-knobs/register';\n```\n\nNow, write your stories with knobs.\n\n### With React\n```js\nimport { storiesOf } from '@storybook/react';\nimport { withKnobs, text, boolean, number } from '@storybook/addon-knobs';\n\nconst stories = storiesOf('Storybook Knobs', module);\n\n// Add the `withKnobs` decorator to add knobs support to your stories.\n// You can also configure `withKnobs` as a global decorator.\nstories.addDecorator(withKnobs);\n\n// Knobs for React props\nstories.add('with a button', () => (\n \n));\n\n// Knobs as dynamic variables.\nstories.add('as dynamic variables', () => {\n const name = text('Name', 'Arunoda Susiripala');\n const age = number('Age', 89);\n\n const content = `I am ${name} and I'm ${age} years old.`;\n return (
{content}
);\n});\n```\n\n### With Angular\n```js\nimport { storiesOf } from '@storybook/angular';\nimport { boolean, number, text, withKnobs } from '@storybook/addon-knobs';\n\nimport { Button } from '@storybook/angular/demo';\n\nconst stories = storiesOf('Storybook Knobs', module);\n\n// \"withKnobs\" decorator should be applied before the stories using knobs\nstories.addDecorator(withKnobs);\n\n// Knobs for Angular props\nstories.add('with a button', () => ({\n component: Button,\n props: {\n text: text('text', 'Hello Storybook'), // The first param of the knob function has to be exactly the same as the component input.\n },\n}));\n\n```\n\nCategorize your knobs by assigning them a `groupId`. When a `groupId` exists, tabs will appear in the knobs storybook panel to filter between the groups. Knobs without a `groupId` are automatically categorized into the `ALL` group.\n```js\n// Knob assigned a groupId.\nstories.add('as dynamic variables', () => {\n const groupId = 'GROUP-ID1'\n const name = text('Name', 'Arunoda Susiripala', groupId);\n\n const content = `My name is ${name}.`;\n return (
{content}
);\n});\n```\n\nYou can see your Knobs in a Storybook panel as shown below.\n\n\n\n## Available Knobs\n\nThese are the knobs available for you to use. You can import these Knobs from the `@storybook/addon-knobs` module.\nHere's how to import the **text** Knob.\n\n```js\nimport { text } from '@storybook/addon-knobs';\n```\n\nJust like that, you can import any other following Knobs:\n\n### text\n\nAllows you to get some text from the user.\n\n```js\nimport { text } from '@storybook/addon-knobs';\n\nconst label = 'Your Name';\nconst defaultValue = 'Arunoda Susiripala';\nconst groupId = 'GROUP-ID1';\n\nconst value = text(label, defaultValue, groupId);\n```\n\n### boolean\n\nAllows you to get a boolean value from the user.\n\n```js\nimport { boolean } from '@storybook/addon-knobs';\n\nconst label = 'Agree?';\nconst defaultValue = false;\nconst groupId = 'GROUP-ID1';\n\nconst value = boolean(label, defaultValue, groupId);\n```\n### number\n\nAllows you to get a number from the user.\n\n```js\nimport { number } from '@storybook/addon-knobs';\n\nconst label = 'Age';\nconst defaultValue = 78;\nconst groupId = 'GROUP-ID1';\n\nconst value = number(label, defaultValue);\n```\n\nFor use with `groupId`, pass the default `options` as the third argument\n```\nconst value = number(label, defaultValue, {}, groupId);\n```\n### number bound by range\n\nAllows you to get a number from the user using a range slider.\n\n```js\nimport { number } from '@storybook/addon-knobs';\n\nconst label = 'Temperature';\nconst defaultValue = 73;\nconst options = {\n range: true,\n min: 60,\n max: 90,\n step: 1,\n};\nconst groupId = 'GROUP-ID1';\n\nconst value = number(label, defaultValue, options, groupId);\n```\n\n### color\n\nAllows you to get a colour from the user.\n\n```js\nimport { color } from '@storybook/addon-knobs';\n\nconst label = 'Color';\nconst defaultValue = '#ff00ff';\nconst groupId = 'GROUP-ID1';\n\nconst value = color(label, defaultValue, groupId);\n```\n\n### object\n\nAllows you to get a JSON object or array from the user.\n\n```js\nimport { object } from '@storybook/addon-knobs';\n\nconst label = 'Styles';\nconst defaultValue = {\n backgroundColor: 'red'\n};\nconst groupId = 'GROUP-ID1';\n\nconst value = object(label, defaultValue, groupId);\n```\n\n> Make sure to enter valid JSON syntax while editing values inside the knob.\n\n### array\n\nAllows you to get an array of strings from the user.\n\n```js\nimport { array } from '@storybook/addon-knobs';\n\nconst label = 'Styles';\nconst defaultValue = ['Red'];\nconst groupId = 'GROUP-ID1';\n\nconst value = array(label, defaultValue);\n```\n\n> While editing values inside the knob, you will need to use a separator.\n> By default it's a comma, but this can be override by passing a separator variable.\n>\n> ```js\n> import { array } from '@storybook/addon-knobs';\n>\n> const label = 'Styles';\n> const defaultValue = ['Red'];\n> const separator = ':';\n> const value = array(label, defaultValue, separator);\n> ```\n\nFor use with `groupId`, pass the default `separator` as the third argument\n```\nconst value = array(label, defaultValue, ',', groupId);\n```\n\n### select\n\nAllows you to get a value from a select box from the user.\n\n```js\nimport { select } from '@storybook/addon-knobs';\n\nconst label = 'Colors';\nconst options = {\n Red: 'red',\n Blue: 'blue',\n Yellow: 'yellow',\n Rainbow: ['red', 'orange', 'etc'],\n None: null,\n};\nconst defaultValue = 'red';\nconst groupId = 'GROUP-ID1';\n\nconst value = select(label, options, defaultValue, groupId);\n```\n\n> You can also provide options as an array like this: `['red', 'blue', 'yellow']`\n\n\n### radio buttons\n\nAllows you to get a value from a list of radio buttons from the user.\n\n```js\nimport { radios } from '@storybook/addon-knobs';\n\nconst options = {\n Kiwi: 'kiwi',\n Guava: 'guava',\n Watermelon: 'watermelon',\n };\n\nconst = radios(name, options, defaultValue);\n```\n\n### files\n\nAllows you to get a value from a file input from the user.\n\n```js\nimport { files } from '@storybook/addon-knobs';\n\nconst label = 'Images';\nconst defaultValue = [];\n\nconst value = files(label, accept, defaultValue);\n```\n\n> Multiple files can be selected, and will be returned as an array of [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)\n\n### date\n\nAllow you to get date (and time) from the user.\n\n```js\nimport { date } from '@storybook/addon-knobs';\n\nconst label = 'Event Date';\nconst defaultValue = new Date('Jan 20 2017');\nconst groupId = 'GROUP-ID1';\n\nconst value = date(label, defaultValue, groupId);\n```\n\n> Note: the default value must not change - e.g., do not do `date('Label', new Date())` or `date('Label')`\n\nThe `date` knob returns the selected date as stringified Unix timestamp (e.g. `\"1510913096516\"`).\nIf your component needs the date in a different form you can wrap the `date` function:\n\n```js\nfunction myDateKnob(name, defaultValue) {\n const stringTimestamp = date(name, defaultValue)\n return new Date(stringTimestamp)\n}\n```\n\n### button\n\nAllows you to include a button and associated handler.\n\n```js\nimport { button } from '@storybook/addon-knobs';\n\nconst label = 'Do Something';\nconst handler = () => doSomething('foobar');\nconst groupId = 'GROUP-ID1';\n\nbutton(label, handler, groupId);\n```\n\n### withKnobs options\n\nwithKnobs also accepts two optional options as story parameters.\nUsage:\n\n```js\nimport { storiesOf } from '@storybook/react';\nimport { withKnobs } from '@storybook/addon-knobs';\n\nconst stories = storiesOf('Storybook Knobs', module);\n\nstories.addDecorator(withKnobs)\nstories.add('story name', () => ..., {\n knobs: {\n timestamps: true, // Doesn't emit events while user is typing.\n escapeHTML: true // Escapes strings to be safe for inserting as innerHTML. This option is true by default in storybook for Vue, Angular, and Polymer, because those frameworks allow rendering plain HTML.\n // You can still set it to false, but it's strongly unrecommendend in cases when you host your storybook on some route of your main site or web app. \n }\n});\n```\n\n## Typescript\n\nIf you are using typescript, make sure you have the type definitions installed for the following libs:\n\n- node\n- react\n\nYou can install them using `npm install -save @types/node @types/react`, assuming you are using Typescript >2.0.\n","gitHead":"729607334cfef4a70374c3fb19d0e55b4f123cd9","license":"MIT","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"https://github.com/storybooks/storybook.git","type":"git"},"description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","licenseText":"The MIT License (MIT)\n\nCopyright (c) 2017 Kadira Inc. \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\nall copies 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\nTHE SOFTWARE.\n","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"christianalfoni","email":"christianalfoni@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"dependencies":{"qs":"^6.5.2","global":"^4.3.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.14.1","react-datetime":"^2.15.0","util-deprecate":"^1.0.2","@emotion/styled":"0.10.5","fast-deep-equal":"^2.0.1","@storybook/addons":"4.0.0-alpha.21","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.21","@storybook/core-events":"4.0.0-alpha.21","react-lifecycles-compat":"^3.0.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.17"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.21_1536340859989_0.634857077690741","host":"s3://npm-registry-packages"},"_id":"@storybook/addon-knobs@4.0.0-alpha.21","version":"4.0.0-alpha.21"}