{"_id":"@burrow/storybook-addon-knobs","name":"@burrow/storybook-addon-knobs","dist-tags":{"latest":"6.3.1-0"},"versions":{"6.3.1-0":{"name":"@burrow/storybook-addon-knobs","author":{"name":"Giancarlo Otarola","email":"giancarlo.robledo@burrow.com"},"version":"6.3.1-0","description":"Storybook addon for editing props","keywords":["storybook-addons","test"],"repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-knobs.git"},"license":"MIT","main":"dist/index","scripts":{"clean":"rimraf ./dist","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","test":"jest","storybook":"start-storybook -p 6006","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","build-storybook":"build-storybook","prerelease":"node check-metadata.js","release":"npm run build && auto shipit --base-branch next"},"dependencies":{"copy-to-clipboard":"^3.3.1","core-js":"^3.8.2","escape-html":"^1.0.3","fast-deep-equal":"^3.1.3","global":"^4.4.0","lodash":"^4.17.20","prop-types":"^15.7.2","qs":"^6.10.0","react-colorful":"^5.1.2","react-lifecycles-compat":"^3.0.4","react-select":"^3.2.0"},"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","@emotion/jest":"^11.3.0","@storybook/react":"^6.4.0","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.0.0","@testing-library/user-event":"^13.2.1","@types/escape-html":"^1.0.1","@types/lodash":"^4.14.168","@types/react-lifecycles-compat":"^3.0.1","@types/react-select":"^3.1.2","@types/webpack-env":"^1.16.0","auto":"^10.3.0","babel-loader":"^8.1.0","chalk":"^2.4.2","concurrently":"^5.3.0","jest":"^27.0.6","react":"^17.0.1","react-dom":"^17.0.1","rimraf":"^3.0.2","typescript":"^3.9.7"},"peerDependencies":{"@storybook/addons":"^6.4.0","@storybook/api":"^6.4.0","@storybook/components":"^6.4.0","@storybook/core-events":"^6.4.0","@storybook/theming":"^6.4.0","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":"Knobs","unsupportedFrameworks":["react-native"]},"gitHead":"f3647e2863bec44042dc1d3fb99c37d72b49321f","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"homepage":"https://github.com/storybookjs/addon-knobs#readme","_id":"@burrow/storybook-addon-knobs@6.3.1-0","_nodeVersion":"14.21.1","_npmVersion":"6.14.17","dist":{"integrity":"sha512-mUN5yJOyd4W0Kt3cu2SbxEGLfgJ7eMauvWbfIPtB0444c624YLTDzxQtzZE8jargQkAiA3IxwSvCnbueDfAOHg==","shasum":"db3129f63e0e2692c6258ba8cf744abca8742077","tarball":"https://registry.npmjs.org/@burrow/storybook-addon-knobs/-/storybook-addon-knobs-6.3.1-0.tgz","fileCount":71,"unpackedSize":216890,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOmRRKq9J0s+0Els++92cNyJxVEZWmNB7RlMlT5/pXjwIhAL1ENxTzBdK0HkF5ZYkRzZefdFSIR212WLaHVIF74JZ3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjr0Q1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT3Q//TSa+00xYe6hxg0P5SEy8krRFLXo4L1uyfivZn3vHMRgnET4g\r\nbjGzyrxP3dY7MxIn5R2Ewb+GgaE3QGvLTEVI4Pm5D+XJZ2fWnc9PwuHXKzK5\r\nLCQqA8aD/NoXTJxn+mjSgPyAE3SmpahIPkJUwMeVRlAIdazMgb8eIq0s7C0P\r\ngJYA7yQI+gGo9We8o1XqJvmfZ0JyeVuqLb984Q+e31gnZDk8eRAIQVzT2yfN\r\nhQ82C7zqBD92wevdiMHvScXfmnYwBoC8laUwojNLgggRBID8FW4kBPogLbgm\r\nly2JnyDDdyb4sc2Zc/3utcPML2btPaDbs27I8Arqg73hkgB+6VSU08eVM6m6\r\nENqJpf8bchjaY00Po+J7a8ztEmU4sGC6UtnKcBX2Jktsxq6JAjYYyA4T71RK\r\n2PrElamogZjjdllTv0W0I1zFoCR+W9sBoUtfyBlsnEl4aX2M81WUFm8E1Jbg\r\nmGvwHGUP2NlWO34s4LhugGrT8NGLAIFU5RCj9wETVFK/3cSw6bOwJx+zWPg7\r\nTMrHGlJHE3uqamQnmKiEsWRZMU42XcPg0K8591IoUEMe7Ns9Ebp6QkLBJWs1\r\nCpJmuF3N4Y+LPML+q/vtS2shAKJ1jzQxzDLvgl+94/9pAzY8MOO8wvuxOvqQ\r\nIc5WfQyhI6goaTGIvfh/lkrFrfVQmUjz2AU=\r\n=36WX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"burrow-dev","email":"engineering@burrow.com"},"directories":{},"maintainers":[{"name":"burrow-dev","email":"engineering@burrow.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-knobs_6.3.1-0_1672430644931_0.48051497015007616"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-30T20:04:04.861Z","6.3.1-0":"2022-12-30T20:04:05.118Z","modified":"2022-12-30T20:04:05.304Z"},"maintainers":[{"name":"burrow-dev","email":"engineering@burrow.com"}],"description":"Storybook addon for editing props","homepage":"https://github.com/storybookjs/addon-knobs#readme","keywords":["storybook-addons","test"],"repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-knobs.git"},"author":{"name":"Giancarlo Otarola","email":"giancarlo.robledo@burrow.com"},"bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"license":"MIT","readme":"# Storybook Addon Knobs (deprecated)\n\n> We are deprecating Knobs in favor of @storybook/addon-controls.\n>\n> Discussion: https://github.com/storybookjs/storybook/discussions/15060\n\nStorybook Addon Knobs allow you to edit 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 what Knobs looks 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\nwithin `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['@storybook/addon-knobs'],\n};\n```\n\nNow, write your stories with Knobs.\n\n### With React\n\n```js\nimport React from 'react';\nimport { withKnobs, text, boolean, number } from '@storybook/addon-knobs';\n\nexport default {\n  title: 'Storybook Knobs',\n  decorators: [withKnobs],\n};\n// Add the `withKnobs` decorator to add knobs support to your stories.\n// You can also configure `withKnobs` as a global decorator.\n\n// Knobs for React props\nexport const withAButton = () => (\n  <button disabled={boolean('Disabled', false)}>{text('Label', 'Hello Storybook')}</button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\n  const name = text('Name', 'James');\n  const age = number('Age', 35);\n  const content = `I am ${name} and I'm ${age} years old.`;\n\n  return <div>{content}</div>;\n};\n```\n\n### With Vue.js\n\nMyButton.story.js:\n\n```js\nimport { storiesOf } from '@storybook/vue';\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\n\nimport MyButton from './MyButton.vue';\n\nexport default {\n  title: 'Storybook Knobs',\n  decorators: [withKnobs],\n};\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.\nexport const exampleWithKnobs = () => ({\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\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\n```js\nimport { storiesOf } from '@storybook/angular';\nimport { boolean, number, text, withKnobs } from '@storybook/addon-knobs';\n\nimport { Button } from '@storybook/angular/demo';\n\nexport default {\n  title: 'Storybook Knobs',\n  decorators: [withKnobs],\n};\n\nexport const withKnobs = () => ({\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### With Ember\n\n```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport { hbs } from 'ember-cli-htmlbars';\n\nexport default {\n  title: 'StoryBook with Knobs',\n  decorators: [withKnobs],\n};\n\nexport const button = () => ({\n  template: hbs`\n    <button disabled={{disabled}}>{{label}}</button>\n  `,\n  context: {\n    label: text('label', 'Hello Storybook'),\n    disabled: boolean('disabled', false),\n  },\n});\n```\n\n## Categorization\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```js\nexport const inGroups = () => {\n  const personalGroupId = 'personal info';\n  const generalGroupId = 'general info';\n\n  const name = text('Name', 'James', personalGroupId);\n  const age = number('Age', 35, { min: 0, max: 99 }, personalGroupId);\n  const message = text('Hello!', 35, generalGroupId);\n  const content = `\n    I am ${name} and I'm ${age} years old.\n    ${message}\n  `;\n\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 = 'James';\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\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\n```js\nconst value = number(label, defaultValue, {}, groupId);\n```\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 is a comma, but this can be overridden 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\n```js\nconst value = array(label, defaultValue, ',', groupId);\n```\n\n### select\n\nIt allows 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\nOptions can also be an array:\n\n```js\nimport { select } from '@storybook/addon-knobs';\nconst label = 'Cats';\nconst options = ['linus', 'eleanor', 'lover'];\nconst defaultValue = 'eleanor';\nconst groupId = 'GROUP-ID2';\nconst value = select(label, options, defaultValue, groupId);\n```\n\nOptions can also be an array OF objects:\n\n```js\nconst label = 'Dogs';\nconst arrayOfObjects = [\n  {\n    label: 'Sparky',\n    dogParent: 'Matthew',\n    location: 'Austin',\n  },\n  {\n    label: 'Juniper',\n    dogParent: 'Joshua',\n    location: 'Austin',\n  },\n];\nconst defaultValue = arrayOfObjects[0];\nconst groupId = 'GROUP-ID3';\nconst value = select(label, arrayOfObjects, defaultValue, groupId);\n```\n\n### radio buttons\n\nIt allows 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';\nconst groupId = 'GROUP-ID1';\n\nconst value = radios(label, options, defaultValue, groupId);\n```\n\n### options\n\nConfigurable UI for selecting a value from a set of options.\n\n```js\nimport { optionsKnob } 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = optionsKnob(label, valuesObj, defaultValue, optionsObj, groupId);\n```\n\nAlternatively you can use this import:\n\n```\nimport { optionsKnob as options } from '@storybook/addon-knobs';\n\n...\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\n```\n\n> The display property for `optionsObj` accepts:\n>\n> - `radio`\n> - `inline-radio`\n> - `check`\n> - `inline-check`\n> - `select`\n> - `multi-select`\n\n### files\n\nIt allows 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 accept = '.xlsx, .pdf';\nconst defaultValue = [];\nconst groupId = 'GROUP-ID1';\n\nconst value = files(label, accept, defaultValue, groupId);\n```\n\n> You can optionally specify a [list of file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) which the file input should accept.\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\nAllows 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\nIt allows 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.\nYou can prevent this 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 { withKnobs } from '@storybook/addon-knobs';\n\nexport default {\n  title: 'Storybook Knobs',\n  decorators: [withKnobs],\n};\n\nexport const defaultView = () => <div />;\ndefaultView.parameters = {\n  knobs: {\n    // Doesn't emit events while user is typing.\n    timestamps: true,\n\n    // 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 discouraged to set to true in cases when you host your storybook on some route of your main site or web app.\n    escapeHTML: true,\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: (_assuming you are using Typescript >2.0._)\n\n```sh\nyarn add @types/node @types/react --dev\n```\n","readmeFilename":"README.md"}