{"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"932a2734534751867dfbcabfc548591b1ceb350b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.5-react-debug.0.tgz","fileCount":64,"integrity":"sha512-8UuLBtJ3vuKWcZcujUF0bH6YcRnXewKdou5JLfrOIxpa6mkGpLwgOMZ5JRMvTC+Jtvwa05dCWlqG69pWS3ED8g==","signatures":[{"sig":"MEQCIBL13at9IufHHxYudZUwp6nSquDbV75/LbWFETSOkGNBAiB29j1ARVdI0+dhaOwID7udv7v8y/bj0AH+ipbevuUKCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNWwgCRA9TVsSAnZWagAALscP/1Gjzi03mFzLwchSFS0H\nY+9Nhl0a9ue4fqH2OMpMu2GTYjNY8Mpnyo5gSw8yfnSs4sjcMuZf0CcDmXOo\n/PlagZhR0y36yK9/tCIgRpxLSeDDcFo4utOR75Z2dpZIXMogNjBEVtOo7sdk\nJcNEhwOPe8PPQ09QYtRFCQjC5eqcpIDwMh25qEIBcr8p/gkH39NnTcusvdTy\nUOaMSagQhWRcO4mo9svWuyg/HgRnZmqEmppRfMgwnIflttOoINqC7hEiuRVe\nSymep242JDEDeM+1IQ5NkMBPgY+p5FvAFdHW7qbn60nzTpca2XXKCtjFg2+v\ni1APORR+GYhXIXPkGFAWqcwaUhfuHDyymnm7rhDX3XbzZ/8PRZUqCQr2+qVt\nwgdBxPiAp/Pc7P5xV17dinseJ9OPtrsYYP0oXNpvQ670AdvFu3rrVo15q9xZ\nn1KSmKjdJp2l4OATFfrpcn8fTAwYei5lU0T+G5jyC87b3bxpgl6dd5Hc2CAd\nLw1UyvqD1DPEIcE87HBRPZVsUn4rzShy3x9YK3Wxp8LnK5MAkmH4XEqprism\nD/V9SLfHEcGg0DSK+vWrcjG2ZGwDFrniAJRFu8oeBn+QPt9atWR1nXgzQIC5\nI9QQM6yOrCw9ulUA/kzuU5aOsuZga+inrwrT2P0eKAQdSjrweleVN2ILToZQ\nD+7u\r\n=Nn1s\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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](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 Vue.js\n```js\nimport { storiesOf } from '@storybook/vue';\nimport { withKnobs, text, boolean, number } from '@storybook/addon-knobs';\n\nimport MyButton from './Button.vue';\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 Vue props\n// Knobs for Vue props\nstories.add('with a button', () => ({\n components: { MyButton },\n template:\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![](docs/demo.png)\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 label = 'Fruits';\nconst options = {\n Kiwi: 'kiwi',\n Guava: 'guava',\n Watermelon: 'watermelon',\n};\nconst defaultValue = 'kiwi';\n\nconst value = radios(label, 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. It's safe to set it to `false` with frameworks like React which do escaping on their side.\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":"9f6ec6d8393eb94ab4685839ab865af11aab32a3","license":"MIT","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","keywords":["addon","storybook"],"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","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"usulpro","email":"regx@usul.su"}],"dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.5.7","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.14.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.1.5-react-debug.0","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.5-react-debug.0","@storybook/core-events":"4.1.5-react-debug.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.5-react-debug.0_1547004960019_0.24494127888708217","host":"s3://npm-registry-packages"},"_id":"@storybook/addon-knobs@4.1.5-react-debug.0","version":"4.1.5-react-debug.0"}