{"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"7099160b9fea4fb81b9767c681358235f34d489f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-rc.4.tgz","fileCount":81,"integrity":"sha512-qLCipV70xnB0CR+uafjTOjQfXLkacOH7qNVzJBsnNcbo6efnCOq48HUD6FPUIOduhKH9rvr1k76zxyW7U7hEFw==","signatures":[{"sig":"MEUCIDWo+vCTA04jMDj8kPc9NMteSBBc1/iq839CFlit2nD8AiEAzzCf+k6kU2XXGzvaETqr6bL6JgWyvkkQy9aMyHhGnFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1285106},"main":"dist/index.js","name":"@storybook/addon-knobs","readme":"# Storybook Addon Knobs\n\n[](https://circleci.com/gh/storybooks/storybook)\n[](https://www.codefactor.io/repository/github/storybooks/storybook)\n[](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook) \n[](https://now-examples-slackin-rrirkqohko.now.sh/)\n[](#backers) [](#sponsors)\n\n* * *\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://git.io/vXdhZ)\n\n> Checkout the above [Live Storybook](https://git.io/vXdhZ) 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/react';\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/angular';\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 text', () => ({\n component: Button,\n props: {\n text: text('text', 'Hello Button'), // 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```\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\n> In the case of Vue, use these imports:\n>\n> ```js\n> import { storiesOf } from '@storybook/vue';\n> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/vue';\n> ```\n>\n> In the case of React-Native, use these imports:\n>\n> ```js\n> import { storiesOf } from '@storybook/react-native';\n> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';\n> ```\n>\n> In the case of Angular, use these imports:\n>\n> ```js\n> import { storiesOf } from '@storybook/angular';\n> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/angular';\n> ```\n\nYou can see your Knobs in a Storybook panel as shown below.\n\n\n\n### Additional Links\n\n- Introduction blog post.\n- Watch this video on how to use knobs\n- [Live Storybook with Knobs](https://goo.gl/uX9WLf)\n- Have a look at this [sample Storybook repo](https://github.com/kadira-samples/storybook-knobs-example).\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/react';\n\nconst label = 'Your Name';\nconst defaultValue = 'Arunoda Susiripala';\nconst groupId = 'GROUP-ID1';\n\nconst value = text(label, defaultValue, groupId);\n```\n### boolean\n\nAllows you to get a boolean value from the user.\n\n```js\nimport { boolean } from '@storybook/addon-knobs/react';\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/react';\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/react';\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/react';\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/react';\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/react';\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/react';\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/react';\n\nconst label = 'Colors';\nconst options = {\n red: 'Red',\n blue: 'Blue',\n yellow: 'Yellow',\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### selectV2\n\nIn v4 this will replace `select`. The value from the select now uses the values from the `options` object.\n\n```js\nimport { selectV2 } 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 = selectV2(label, options, defaultValue, groupId);\n```\n\n### date\n\nAllow you to get date (and time) from the user.\n\n```js\nimport { date } from '@storybook/addon-knobs/react';\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 vs withKnobsOptions\n\nIf you feel like this addon is not performing well enough there is an option to use `withKnobsOptions` instead of `withKnobs`.\nUsage:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nconst stories = storiesOf('Storybook Knobs', module);\n\nstories.addDecorator(withKnobsOptions({\n debounce: { wait: number, leading: boolean}, // Same as lodash debounce.\n timestamps: true // Doesn't emit events while user is typing.\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","license":"MIT","scripts":{"prepare":"node ../../scripts/prepare.js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"homepage":"https://github.com/storybooks/storybook#readme","deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.1.0","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","maintainers":[{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"arunoda","email":"arunoda.susiripala@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":"mthuret","email":"mlthutrix@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"}],"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.21.0","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.1","react-color":"^2.14.0","babel-runtime":"^6.26.0","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/components":"3.4.0-rc.4","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16","raw-loader":"^0.5.1","style-loader":"^0.20.3","@storybook/react":"3.4.0-rc.4"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.0-rc.4_1522297586498_0.42457985935995946","host":"s3://npm-registry-packages"},"_id":"@storybook/addon-knobs@3.4.0-rc.4","version":"3.4.0-rc.4"}