{"bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4d96c85845872ab1c268dae7373c638f09523e7d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.4.tgz","fileCount":104,"integrity":"sha512-d5BrIkdd0T9DG+8GFmG/KxyuNMrBD4yQgubctydvwg3J52n13/gVA/h1up+uEJMUls1S1cP2lDwCmNa602043A==","signatures":[{"sig":"MEQCIHEDHzpT3eYyJeAslsw4LcB9xwTDXm+4ZTj2GJMpnywWAiAwhN2/wz2acho6ddIvts8i6iJlTiNtXQLp0RxUgpXdQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1361753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMpzQCRA9TVsSAnZWagAAAQQP/jui+2POvgdeAWXX8WPW\n3mCw18EZDU1P6SDmAiSP4QaF+jGxMLdfV6x+mvZUNav38rlXejRw19mgkSdX\nZtKStlaOfua1ugOfp/o8VobwG1dVZt1naD9eEaJr5kPXdL90iy16fXCBl5Eo\n9n0W+2yGHlN8GROYOOm+lHPX9d32KlEks8O0LJ+kmAqBpAjhBRCYaLUtmz5W\nrJFAlweF2cb+slP8adqlPskcnviWlpXPlShZyfSXJLPvFt1Y6HtugVmbAHkm\nswKq4wLFXeFcDFFvVvuO6E5jN6OaBLhnUIt1ZbjhHppHXzzWLcKwCqz49Cer\nikZXK1IqIde/6ItKwXQc06ARl10SdgAwJ8ZfF/RYE6ufmJURwO0izcdshS9R\nMRaQ8WdyP436ClZo7NRAgTDic1HP7iEJGc9wnf5qytbcPrvWniHGsoYLK5UL\nqheYLy5EFS6quJqRq4UFi+Nkg5TGLWcQ+At8oVP1LL44Ru8uuAYBywyaUC7b\nIPGego0cvoQYHo9Sk4Z14nL3xgYR0fAQeVKjZ4RXqFPLT4sRbhyJNdgifKs3\nSvnUD3cfKdhy98SIG688kv9q0QFOpEmJII1C9EvxzCoSUFwt7iU+xr0uSFuV\n7C4/xKKhKfdG45ZIIWAsZ6JpVma/1A+xytXvfOk5+EPUegiqA4U/yaYAIP3s\nNJ7y\r\n=7h83\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"@storybook/addon-knobs","types":"dist/index.d.ts","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/storybookjs/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\nyarn add @storybook/addon-knobs --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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Storybook')}\n  </button>\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 (<div>{content}</div>);\n});\n```\n\n### With Vue.js\nMyButton.story.js:\n```js\nimport { storiesOf } from '@storybook/vue';\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\n\nimport MyButton from './MyButton.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// Assign `props` to the story's component, calling\n// knob methods within the `default` property of each prop,\n// then pass the story's prop data to the component’s prop in\n// the template with `v-bind:` or by placing the prop within\n// the component’s slot.\nstories.add('with a button', () => ({\n  components: { MyButton },\n  props: {\n    isDisabled: {\n      default: boolean('Disabled', false)\n    },\n    text: {\n      default: text('Text', 'Hello Storybook')\n    }\n  },\n  template: `<MyButton :isDisabled=\"isDisabled\">{{ text }}</MyButton>`\n}));\n```\n\nMyButton.vue:\n```vue\n<template>\n  <button :disabled=\"isDisabled\">\n    <slot></slot>\n  </button>\n</template>\n\n<script>\nexport default {\n  props: {\n    isDisabled: {\n      type: Boolean,\n      default: false\n    }\n  }\n}\n</script>\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 (<div>{content}</div>);\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### options\n\nConfigurable UI for selecting a value from a set of options. \n\n```js\nimport { optionsKnob as options } from '@storybook/addon-knobs';\n\nconst label = 'Fruits';\nconst valuesObj = {\n  Kiwi: 'kiwi',\n  Guava: 'guava',\n  Watermelon: 'watermelon',\n};\nconst defaultValue = 'kiwi';\nconst optionsObj = {\n  display: 'inline-radio'\n};\n\nconst value = options(label, valuesObj, defaultValue, optionsObj);\n```\n> The display property for `optionsObj` accepts:\n> - `radio`\n> - `inline-radio`\n> - `check`\n> - `inline-check`\n> - `select`\n> - `multi-select`\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\nButton knobs cause the story to re-render after the handler fires, you can prevent\nthis by having the handler return false.\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:\n*assuming you are using Typescript >2.0.*\n\n```sh\nyarn add @types/node @types/react --dev\n```\n\n","gitHead":"bd77e15c32f641b4bd40f430d5b928db594c7696","license":"MIT","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","keywords":["addon","storybook"],"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v8.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"kylesuss","email":"susskyle@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"}],"_nodeVersion":"8.16.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.11","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.4","@storybook/client-api":"5.2.0-beta.4","@storybook/components":"5.2.0-beta.4","@storybook/core-events":"5.2.0-beta.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-beta.4_1563598031891_0.8142324886125516","host":"s3://npm-registry-packages"},"_id":"@storybook/addon-knobs@5.2.0-beta.4","version":"5.2.0-beta.4"}