{"_id":"@storybook/addon-knobs","_rev":"881-d90ef36d09cf3fe2b4475c22f12b58ed","name":"@storybook/addon-knobs","dist-tags":{"debug":"6.0.28-alpha.3","canary":"6.4.1--canary.f87792d.0","next":"7.0.2-next.0","latest":"8.0.1"},"versions":{"3.0.0-alpha.0":{"name":"@storybook/addon-knobs","version":"3.0.0-alpha.0","license":"MIT","_id":"@storybook/addon-knobs@3.0.0-alpha.0","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"d373ee40e8647f92e2a394aa562cedfb44e01617","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.0.0-alpha.0.tgz","integrity":"sha512-v3fT3RIB0PNhnF4QtdIhyteuP2/LyH2Aq3qKl3mdLsG6nDoxhjIP4A/UGK94R4Eg0jEeydpvegwPenIqttG24A==","signatures":[{"sig":"MEQCIHr/bBjiesk4Y7YFLTiBkyoD8QItpBTMiNAJQdMFvnwIAiAAve+9u5D52HAi1EhLTA2sn6/6CvKCPVpZFnM1ufMFEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"d373ee40e8647f92e2a394aa562cedfb44e01617","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.6.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"6.10.0","dependencies":{"moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","@storybook/react":"^3.0.0-alpha.0","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.0.0-alpha.0.tgz_1495051422250_0.2774798555765301","host":"packages-12-west.internal.npmjs.com"}},"3.0.0-alpha.1":{"name":"@storybook/addon-knobs","version":"3.0.0-alpha.1","license":"MIT","_id":"@storybook/addon-knobs@3.0.0-alpha.1","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"a54ca43148fc4d54faa941720c110723bac1461c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.0.0-alpha.1.tgz","integrity":"sha512-CApGgu2rZrNSQLP2Frcc0UkAtQSS3z8lgWGYj9cjrbiVDhULA15OqtrNe0jHAxV2547eKyWRpRhUjrA6K2D2RA==","signatures":[{"sig":"MEUCIBtRut7QbEEuLSc6EPZDNKQjQbRdcJ05fiTXg5WtEgotAiEAgXyxmyCHp4sLHeE11laImO77oUF/61AtdslymwBxRSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"a54ca43148fc4d54faa941720c110723bac1461c","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.2.0","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.9.0","dependencies":{"moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","@storybook/react":"^3.0.0-alpha.1","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.0.0-alpha.1.tgz_1495226475797_0.4666382905561477","host":"s3://npm-registry-packages"}},"3.0.0-alpha.3":{"name":"@storybook/addon-knobs","version":"3.0.0-alpha.3","license":"MIT","_id":"@storybook/addon-knobs@3.0.0-alpha.3","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"afd01c24525e43d90116a1dfef365ba32e2466aa","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.0.0-alpha.3.tgz","integrity":"sha512-3smRjAQ58di/p3G43PWgEgGDsWlBrmXEZ68cQHeM8GwMs/ua+JdvjzFl3kNfITxa2MB2EhUUMFNhm/UZgMOeAg==","signatures":[{"sig":"MEUCIAKSb5PBzV69D9PXSwoRhGB1WrfBOlY0QTEqDHmydNPmAiEAu6OICCARtrrcqOBOTZFUSckLRyU/KWadzagL6AR51bo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"afd01c24525e43d90116a1dfef365ba32e2466aa","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.6.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.9.0","dependencies":{"moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","@storybook/react":"^3.0.0-alpha.3","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.0.0-alpha.3.tgz_1495389866935_0.8584067462943494","host":"s3://npm-registry-packages"}},"3.0.0-alpha.4":{"name":"@storybook/addon-knobs","version":"3.0.0-alpha.4","license":"MIT","_id":"@storybook/addon-knobs@3.0.0-alpha.4","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0022582f07da333e1614aa7332f9f8acfe8cbfd6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.0.0-alpha.4.tgz","integrity":"sha512-+sYTGL4YNJcrW/6xoBMGd/keMS05dW0SzwCOkPW6kHg5saQRf7F+4GtnSNq0qLcG1vqlHsO6+KuuJOVOJJYzcQ==","signatures":[{"sig":"MEYCIQDmlQ0zg+sXU/zch1K6UzSK/dIL0C2Ddl8qgZobIRqt5gIhAP9E1V+D5UStL22lIoFPuHtWtfRNDunr0rVd7RhJcVkN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"0022582f07da333e1614aa7332f9f8acfe8cbfd6","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.6.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.9.0","dependencies":{"moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","@storybook/react":"^3.0.0-alpha.4","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.0.0-alpha.4.tgz_1495490990886_0.3879312889184803","host":"s3://npm-registry-packages"}},"3.0.0-rc.0":{"name":"@storybook/addon-knobs","version":"3.0.0-rc.0","license":"MIT","_id":"@storybook/addon-knobs@3.0.0-rc.0","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"07efbda4cbcdfec6b5eeef9d88c8e4a8598d9d88","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.0.0-rc.0.tgz","integrity":"sha512-rwkWTc1wH5Qa62LQKNOKhl9TghGpbhIR9rDE4tG6zMbyKM8U496PNL/cpAd/gIXV7mFOeNyRHIDgtakiRgydzg==","signatures":[{"sig":"MEQCIEQ8JRI16RrmGl5HNy2JDWJIQqtttzZtS3cB/vX/Za1QAiA/hLaDXmt2/FxudycwRPqS4Oxo1vEwgcvy1lz0TXiMBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"07efbda4cbcdfec6b5eeef9d88c8e4a8598d9d88","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.6.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.9.0","dependencies":{"moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","lodash.debounce":"^4.0.8","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","@storybook/react":"^3.0.0-rc.0","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.0.0-rc.0.tgz_1495729754682_0.6993375378660858","host":"s3://npm-registry-packages"}},"3.0.0-rc.2":{"name":"@storybook/addon-knobs","version":"3.0.0-rc.2","license":"MIT","_id":"@storybook/addon-knobs@3.0.0-rc.2","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"10f99d95a7520dd848d6cf0a34d6859280f0b219","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.0.0-rc.2.tgz","integrity":"sha512-2MCyoUp2Tih4iUBy1cAQyS1SdJp/Z8opTBeRVbT6SE4SsbPwzJaSr8rN9BBPtpv4DP0WvcsKhvzNS/Zaj1ZfEA==","signatures":[{"sig":"MEYCIQCai5yn7p68Owz3LCPKpNP6clbjO4Gda0Hrj4HERSvd9wIhAPX837ka2znlC9oeJanlj0VFLv/+cTkbuzyU7oB/RYsi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"10f99d95a7520dd848d6cf0a34d6859280f0b219","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.6.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.9.0","dependencies":{"moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","lodash.debounce":"^4.0.8","@storybook/addons":"*","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.0.0-rc.2.tgz_1495885624739_0.28767704498022795","host":"s3://npm-registry-packages"}},"3.0.0-rc.3":{"name":"@storybook/addon-knobs","version":"3.0.0-rc.3","license":"MIT","_id":"@storybook/addon-knobs@3.0.0-rc.3","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"4f86b524288a8141d0f9528b5259738395107a4c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.0.0-rc.3.tgz","integrity":"sha512-gzdLT6MczGYFu/rW2x5LDhm11FzsGeSDa6LU1Cjtjpv4GHufyaOrPSbfG6Y1fV+cV4vCMB8yXuNNwzxL2Yzjrw==","signatures":[{"sig":"MEUCIQD6vLoVrg4dPTv2Ej6OxxYBLTVSnHiBfTwaQpUHrmz5MQIgZAsgvbhKOWWmujnrd16SWLXjbuM7JzEBIrnSYvuxBK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"4f86b524288a8141d0f9528b5259738395107a4c","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"3.10.10","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"6.10.2","dependencies":{"moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","lodash.debounce":"^4.0.8","@storybook/addons":"*","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.0.0-rc.3.tgz_1496133992006_0.8743377404753119","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@storybook/addon-knobs","version":"3.0.0","license":"MIT","_id":"@storybook/addon-knobs@3.0.0","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"1ed2f26dd72a5f5de43d47ce5094f715d9670c85","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.0.0.tgz","integrity":"sha512-46QhTrLNCIdtpLPKTYkWZoucYZN36kzxZWMKvXwzEAjqsrO7INf2rX7aDVHHIvE22SsfJcf2dzOn73JwSsbWkg==","signatures":[{"sig":"MEUCIQDO2+dOHoaJC2d7kNuOYyS8g9rbH3EHK0dkTdtutLwy5QIgMB35QafRRyGikEDZ6xV4MKbCbRU3JXSfOTyAtQEcgLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"1ed2f26dd72a5f5de43d47ce5094f715d9670c85","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"3.10.10","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"6.10.2","dependencies":{"moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","lodash.debounce":"^4.0.8","@storybook/addons":"*","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.0.0.tgz_1496151595662_0.22065106313675642","host":"s3://npm-registry-packages"}},"3.0.1":{"name":"@storybook/addon-knobs","version":"3.0.1","license":"MIT","_id":"@storybook/addon-knobs@3.0.1","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"fed58275b33bcc0a0d9f6d3dd9427319b71ad84c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.0.1.tgz","integrity":"sha512-kxekDEj8MlNJIy+rp1tz/8OTJGuhtUk4qGSK4rlCfrhZWnNd9vVIMTG1sZ0nmwE87VeWxof1tS9kClkEIyZCmg==","signatures":[{"sig":"MEUCIAFCrNv1JRLAFgjqSTx1VL0SxXcuZIwvlsVM2CX5d5VlAiEAnR9DMbNy6OrGV5BHyPUUZmSUeho/y4wuwpGNqO7QGkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"fed58275b33bcc0a0d9f6d3dd9427319b71ad84c","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"3.10.10","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"6.10.2","dependencies":{"moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","lodash.debounce":"^4.0.8","@storybook/addons":"*","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.0.1.tgz_1496667552587_0.19261535489931703","host":"s3://npm-registry-packages"}},"3.1.2":{"name":"@storybook/addon-knobs","version":"3.1.2","license":"MIT","_id":"@storybook/addon-knobs@3.1.2","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"4378791460cfabf16c31e4bbcef9b9a6613b4109","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.1.2.tgz","integrity":"sha512-tSoyqAbI1rvm4Bnt3zkAKkYCC00dXyIwo2ODNBgIrgtuuWv5VcyFcklovSO+1YWEW8LI4UEPma5gCaTHXuL0Ow==","signatures":[{"sig":"MEUCIDvvrYRMsxFKWXvEMRbRzZbhCaQMOqrAjrkknOiw+pSEAiEAvxtkhK1qIUXYXShCIO0KBMv98/ThPlGnbCteW7pB+sA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"4378791460cfabf16c31e4bbcef9b9a6613b4109","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"3.10.10","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"6.10.2","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","lodash.debounce":"^4.0.8","@storybook/addons":"^3.1.2","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.1.2.tgz_1497009291893_0.11947054183110595","host":"s3://npm-registry-packages"}},"3.2.0-alpha.0":{"name":"@storybook/addon-knobs","version":"3.2.0-alpha.0","license":"MIT","_id":"@storybook/addon-knobs@3.2.0-alpha.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"97f8d24770806617829cf3e33c0629bc945c67a4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.0-alpha.0.tgz","integrity":"sha512-7/uCDRwyPFO524vdhYf6eCuJVlbNjNxyczclOyzt4BJyNFneg7dqhPerfVx7KGcyTB+vmND6o4yAhf4hunUVvA==","signatures":[{"sig":"MEQCIAOSIgl430h3IiI14fR/+QId6U9EI9WHnLdawEm40fWWAiABxnufDl4xCOwv5phcSD619eGQaa/V22UtrIeVHg4SXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"97f8d24770806617829cf3e33c0629bc945c67a4","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"3.10.10","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"6.9.3","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.1.2","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"2.3.4","react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.0-alpha.0.tgz_1497972990649_0.3949956900905818","host":"s3://npm-registry-packages"}},"3.1.5":{"name":"@storybook/addon-knobs","version":"3.1.5","license":"MIT","_id":"@storybook/addon-knobs@3.1.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"e9961ded10b7a7b01e337b0968730c1dcc02728e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.1.5.tgz","integrity":"sha512-+6Ifo9FBIE+4gmTfQttZcJ9T0/0ANWfufxmN55Gdqg/u0xWYyPtcU3hYRG0Js/m4xUMR6qQa/uQCNXxsC5XRiw==","signatures":[{"sig":"MEYCIQCeCqNJ+2+PNskmyIbvDk4f8v0GvNCfmrx84N7O8SlntwIhAJFR0Ro4cvcjKv6z0BzUDV+s2KSrU8x/5CnPoYapjaSd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.0.3","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.0.0","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","lodash.debounce":"^4.0.8","@storybook/addons":"^3.1.5","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.1.5.tgz_1498113465347_0.9369878359138966","host":"s3://npm-registry-packages"}},"3.1.6":{"name":"@storybook/addon-knobs","version":"3.1.6","license":"MIT","_id":"@storybook/addon-knobs@3.1.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"ead1e705a778b67c959d93f809c21025e5066123","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.1.6.tgz","integrity":"sha512-SfKSC4z1GxCEskN40hQTpfG4L2BOKlb/zRdb4uP2gZNdbUM0y2zIxCbrqCYsTGgkWLgXFsHkd44rWULl4lDX0Q==","signatures":[{"sig":"MEYCIQCFowcQEw3JOJnYXczoqvEO46H9HveFrk7u07P3bwR7HgIhAId+e1VOJOocARAybA/ZIefibS5e//fKRlnihMmGQ8gn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.0.3","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.0.0","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","lodash.debounce":"^4.0.8","@storybook/addons":"^3.1.6","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.1.6.tgz_1498458842077_0.6498780224937946","host":"s3://npm-registry-packages"}},"3.2.0-alpha.5":{"name":"@storybook/addon-knobs","version":"3.2.0-alpha.5","license":"MIT","_id":"@storybook/addon-knobs@3.2.0-alpha.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2345a757cb6f2fbc04be0dc5dc7f750eb2962bab","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.0-alpha.5.tgz","integrity":"sha512-R5Pyn4rquRYrPn8gfAu6lpK2y2tmlG29GGS381G3tEcw2jeeU52tx4fYKk8HpTGkKcyASZDueVLO99F680VrZA==","signatures":[{"sig":"MEYCIQC6s8e796rF/xmEiP6GfmjF51pcoVCQhs5cFlxKcdCs0wIhALTvFcOmJA6V1sieWAM+kpJMjSlOSf5j7nYqdbwKT3Df","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.0.3","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.1.3","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.1.6","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"2.3.4","react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.0-alpha.5.tgz_1499016193601_0.7682160786353052","host":"s3://npm-registry-packages"}},"3.2.0-alpha.7":{"name":"@storybook/addon-knobs","version":"3.2.0-alpha.7","license":"MIT","_id":"@storybook/addon-knobs@3.2.0-alpha.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"193269df3ab729d3e17c6a219a2e79d94b1a2e34","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.0-alpha.7.tgz","integrity":"sha512-0w/GvMHpLmm+07lY0uGn3CT16fjRWS1taxrKMHfo3IGTDsmgih0ADQSGdvQMJ7S9TkbWxJ06e3r37YMfb/8scQ==","signatures":[{"sig":"MEUCIHqCsAcICI3NrxGSJNWXmACWC/McQWcc2VCOZPkBG3s5AiEAzT/o8XYTk7oBrjcdlnjtFEvAX1CQxeUDQj91R0pVI7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"193269df3ab729d3e17c6a219a2e79d94b1a2e34","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"3.10.10","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"6.10.2","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.1.6","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"2.3.4","react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.0-alpha.7.tgz_1499330396022_0.7765848140697926","host":"s3://npm-registry-packages"}},"3.1.8":{"name":"@storybook/addon-knobs","version":"3.1.8","license":"MIT","_id":"@storybook/addon-knobs@3.1.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"665954395e495fdf31e34f75433e1b8ec2781c2e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.1.8.tgz","integrity":"sha512-/7k3AwOHDN+Qiuolr1w7gKl7pY52j7yLVc4Qmpzvg/ZAt8YrRPs049b3tA1O1b3H27XGgmkhRYPv1XXhvEeovw==","signatures":[{"sig":"MEQCIBcsX5hY1QsAKKn2Qq2nr5aPp1aWN/ehAub5WYcHOhCcAiAmr6P574UUxwBMFbH3kafVn+JDEgrWz0dST5lxetogBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"665954395e495fdf31e34f75433e1b8ec2781c2e","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"3.10.10","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"6.10.2","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","lodash.debounce":"^4.0.8","@storybook/addons":"^3.1.6","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.1.8.tgz_1499332666009_0.6854393468238413","host":"s3://npm-registry-packages"}},"3.1.9":{"name":"@storybook/addon-knobs","version":"3.1.9","license":"MIT","_id":"@storybook/addon-knobs@3.1.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"8d783141d0b87ab520f7d01e5b9383ad5f7bf357","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.1.9.tgz","integrity":"sha512-/908RyG5apXAbcpSXl411082tKoZbrrwDFY3p4tIPwH2k/TBM5FovO7WpyD5PyXEbWaxaL1COADNg2P5EKlcfQ==","signatures":[{"sig":"MEYCIQDNu5NMimiNQFIcD1vVQ6PAIS/WjJkYvThII7oN/4WVuwIhAPEiDieBR3A9W4yHJz7QQ4v5bhP79jPlLSjNujhdwfhy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"8d783141d0b87ab520f7d01e5b9383ad5f7bf357","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"typings":"./storybook-addon-knobs.d.ts","_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.2.0","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.8","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","lodash.debounce":"^4.0.8","@storybook/addons":"^3.1.6","react-textarea-autosize":"^4.3.0"},"devDependencies":{"react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.1.9.tgz_1500238233157_0.7016119170002639","host":"s3://npm-registry-packages"}},"3.2.0-alpha.8":{"name":"@storybook/addon-knobs","version":"3.2.0-alpha.8","license":"MIT","_id":"@storybook/addon-knobs@3.2.0-alpha.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"d797c640f564d42033407a60f9246273fad90a72","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.0-alpha.8.tgz","integrity":"sha512-ktGDpF3E0UduVxeqHj6vWS84CzXgZUOCS71MBw0KtTXB53p4lMlmMc8rg/3IcVe5FBG661fWEu8G0xNIDgXB9Q==","signatures":[{"sig":"MEYCIQDaQdcjIIDvTeWC9jpVMPTqcfOdw4Rw8gjlCAPT06mNXgIhAM0odWipw2Z5TH7WG+BApumPLA8MYr/L4Q9FpEf9JGGD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"d797c640f564d42033407a60f9246273fad90a72","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.2.0","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.10","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.0-alpha.8","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.1","react":"^15.5.4","react-dom":"^15.5.4","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.0-alpha.8.tgz_1500582655055_0.7941917355637997","host":"s3://npm-registry-packages"}},"3.2.0-alpha.10":{"name":"@storybook/addon-knobs","version":"3.2.0-alpha.10","license":"MIT","_id":"@storybook/addon-knobs@3.2.0-alpha.10","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"aa7e40a463140ee4cad7ba626af356053147911b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.0-alpha.10.tgz","integrity":"sha512-OlnquC4IV5+XAg6q/aT93h1g+BlXUz0u3aATf7Om/Cb96NMQVA6n2qV6awKGBuxd/Enr8FmjMRpPCaXV+Zwn7g==","signatures":[{"sig":"MEYCIQCp+sNkr7uuVhi2mlySFnfmVwKmi5CMDFjvCY87VfhFAAIhAPC3k1rF6RhkmPp5g4eTeqfk0x/ubh3bCTgsMz6ikUzc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"aa7e40a463140ee4cad7ba626af356053147911b","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.2.0","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.10","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.0-alpha.10","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.1","react":"^15.6.1","react-dom":"^15.6.1","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.0-alpha.10.tgz_1501142877353_0.28203871683217585","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@storybook/addon-knobs","version":"3.2.0","license":"MIT","_id":"@storybook/addon-knobs@3.2.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"675b6648034996b1c2aa57fd6d318155d7e511bc","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.0.tgz","integrity":"sha512-JFCCMU/tywIYxvIIHA5v3LnIPooitQeeeixqdAYlw0YQX+8QZ9cNugxKMWvMqBkUk3CUmK+waDGyBdfTM28HBA==","signatures":[{"sig":"MEUCIGw4O6Oi06DKLkBvXHbpq8glOwQeGbncnw0jaq/H/5AeAiEAogtIoAqcLge03891VoYa831Qe9WrzoWuTxyBkeU1XaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"675b6648034996b1c2aa57fd6d318155d7e511bc","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.2.0","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.10","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.0","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.1","react":"^15.6.1","react-dom":"^15.6.1","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.0.tgz_1501510410456_0.1804128426592797","host":"s3://npm-registry-packages"}},"3.2.5":{"name":"@storybook/addon-knobs","version":"3.2.5","license":"MIT","_id":"@storybook/addon-knobs@3.2.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2b9d5e0042054a115691510145c8b7cb84d847c1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.5.tgz","integrity":"sha512-TZcmmYNnWGpyhK3JM+msfomiFdofiEB004+P6I09avtjpBL/1q7/Hk0KVG8Wx+4uDLfn3X9HgnZn+8ktpzchzQ==","signatures":[{"sig":"MEQCIFEqwU7wRX/J6mAcTlhyHWCx6wJMwNO4Zf1qsnSPIU4nAiBDzGZgWK6IJibuPyzPjHUfLz7yqrwoTg585i9zXOJ+ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"2b9d5e0042054a115691510145c8b7cb84d847c1","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.2.0","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.10","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.0","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.1","react":"^15.6.1","react-dom":"^15.6.1","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.5.tgz_1502945474245_0.1881813418585807","host":"s3://npm-registry-packages"}},"3.2.6-alpha.0":{"name":"@storybook/addon-knobs","version":"3.2.6-alpha.0","license":"MIT","_id":"@storybook/addon-knobs@3.2.6-alpha.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"cd785b8c46d9c8de1600d5fe75ba7a5ffb410c3f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.6-alpha.0.tgz","integrity":"sha512-fxEBcfbAFyvg4fZ3YoA0yZw02MZ1/9e50k4IcdleExd778FyUX2NvtnRPxoZO3WyK80C0nO6Fn1iuUGdeGbP8g==","signatures":[{"sig":"MEQCIGemN9P+CDFDQqK/LWCzcSgvaAbgqIkLLUOs7u0j9HCsAiBnXGMHB0bc03M4nKqxyUv0ohdB+Q/PNW4Cyl6xHCE3+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.0.3","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.1.3","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.10","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.6-alpha.0","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.2","react":"^15.6.1","react-dom":"^15.6.1","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.6-alpha.0.tgz_1503387193477_0.03611047146841884","host":"s3://npm-registry-packages"}},"3.2.6":{"name":"@storybook/addon-knobs","version":"3.2.6","license":"MIT","_id":"@storybook/addon-knobs@3.2.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"6cfa8ab0634306eb4ff0823ba982dcffdd40c62f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.6.tgz","integrity":"sha512-YoNtg56yV296wGfuG72PcWL9VF9er5uzf+wqWMRQTHhvFclZUgmVscmrxXuJVUChAtdKFR8iwTuqKP+KWuswaw==","signatures":[{"sig":"MEYCIQD2yS6N/mhs1OmK8qwDlHUQczF17I04mT9CcnmM0EaLTwIhANpvjJeRl0vic2/7GNKFVRv+sMVHgqhlCNtmSauMggGd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.0.3","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.1.3","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.10","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.6","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.2","react":"^15.6.1","react-dom":"^15.6.1","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.6.tgz_1503425013222_0.20895156147889793","host":"s3://npm-registry-packages"}},"3.2.7":{"name":"@storybook/addon-knobs","version":"3.2.7","license":"MIT","_id":"@storybook/addon-knobs@3.2.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"08f7f482f473c2f1fe5821165c203d942dc2e9bd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.7.tgz","integrity":"sha512-tOxhMdQi/vv8hHj6ytvW11o9oYnD3k4OoDfYUkXd7tHjQ/zUU5egnvqZNJt7GGPfD6uKelvDaU0vd7Af9R9bFg==","signatures":[{"sig":"MEYCIQDP/qo/lVX1nlKGXk3IlkRKPHWHX5JIAuhW+sZ2FD24sQIhANmsxX5Npt5pdITrjJ8iHTjifiyKCJF+LOCEajiitBLU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"08f7f482f473c2f1fe5821165c203d942dc2e9bd","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.2.0","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.10","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.6","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.2","react":"^15.6.1","react-dom":"^15.6.1","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.7.tgz_1503505441605_0.6192624985706061","host":"s3://npm-registry-packages"}},"3.2.8":{"name":"@storybook/addon-knobs","version":"3.2.8","license":"MIT","_id":"@storybook/addon-knobs@3.2.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"eb4821409e62f2f886d7ae9333bcc95e4b0714eb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.8.tgz","integrity":"sha512-9OnPYtnLAWPXTJxjDgBSuNPAZKGqb1JHhvRWxX6ICxcKgoU3CeqHWmfTo2Y9dmQD6fIE//FIrK9KWG1yDzBexw==","signatures":[{"sig":"MEUCIDSYML4QO1N/Bbyeh7vHzXMgrTWqJZoiGEcXfnDqy5ORAiEAzg2WRPo3etiyDk39CL3UlPyFJ9PXXJP3qTBXMgwEOmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"eb4821409e62f2f886d7ae9333bcc95e4b0714eb","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.2.0","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.10","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.6","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.2","react":"^15.6.1","react-dom":"^15.6.1","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.8.tgz_1503521731264_0.45757559803314507","host":"s3://npm-registry-packages"}},"3.3.0-alpha.0":{"name":"@storybook/addon-knobs","version":"3.3.0-alpha.0","license":"MIT","_id":"@storybook/addon-knobs@3.3.0-alpha.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"f4f29311b17c07cee1dc6f9808cd6ae37e966bd7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.0-alpha.0.tgz","integrity":"sha512-nlMGj+L1qkF3G5+CzIVuCRPZIoUSqfkHFgncGxc0Zid3VMR2MdIWsjx+d0Fdb0l4YjCJ9jImeAe0Xgdx1qxbFg==","signatures":[{"sig":"MEYCIQC6SjsW+cXyOGHHXewKI9QzLx1nhAx2L19yfDNhUimfuwIhAN/6HPIUaZOJ7pn2+eTsXrxUBNQPH8EsW3c0zD+pgYav","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","_from":".","_shasum":"f4f29311b17c07cee1dc6f9808cd6ae37e966bd7","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"4.2.0","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.10","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.3.0-alpha.0","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.2","react":"^15.6.1","react-dom":"^15.6.1","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.0-alpha.0.tgz_1504730827413_0.4849846684373915","host":"s3://npm-registry-packages"}},"3.2.10":{"name":"@storybook/addon-knobs","version":"3.2.10","license":"MIT","_id":"@storybook/addon-knobs@3.2.10","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3d0fa57b834dd25258ef0fce18e661530929c89c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.10.tgz","integrity":"sha512-BiGWCYSYHUN8VOiIoJC7f5CRMKZgCCxDnWyYlywcUelkvRe3QFmZd0yC6Xh2zUm9wWg7jF1ItBL9lUAKB9PKKA==","signatures":[{"sig":"MEQCIGmlKa6b6rpqGUPCqCPnilO2ZE/8pcmhXFLu398jdbRhAiAadxORpuZsuQNk78O0IOLB7fuFQtFd0mC4+UNXz486DA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","scripts":{"start":"./example/prepublish.sh","storybook":"start-storybook -p 9010","prepublish":"node ../../scripts/prepublish.js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.4.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.1.3","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.5.10","react-color":"^2.11.4","babel-runtime":"^6.23.0","react-datetime":"^2.8.10","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.10","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.2","react":"^15.6.1","react-dom":"^15.6.1","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^15.0.21","style-loader":"^0.17.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.10.tgz_1506116610109_0.18448308762162924","host":"s3://npm-registry-packages"}},"3.2.12":{"name":"@storybook/addon-knobs","version":"3.2.12","license":"MIT","_id":"@storybook/addon-knobs@3.2.12","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"b944fe59d12b82de9366436b59d67f40ee905a44","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.12.tgz","integrity":"sha512-Xnd54kx47boM5Xl0sVMqblcki3Z8Z9hS8CIWz5CCJCfxQKx7mhFtcOmHrIqUH2oUZhhFSj+aFrRx1zPcFcPaZQ==","signatures":[{"sig":"MEUCIQCmoNnIGFAecebqKg7NB1uJRNxBb/4YImv8SBrBMs62KgIgehZ6VZvEYoDAZ3JFpWtnLgCunWyk9/0OFAaZD6wk3Og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.4.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.1.3","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.10.3","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.12","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.2","react":"^16.0.0","react-dom":"^16.0.0","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^16.0.0","style-loader":"^0.18.2","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.12.tgz_1506983498985_0.5425655429717153","host":"s3://npm-registry-packages"}},"3.3.0-alpha.2":{"name":"@storybook/addon-knobs","version":"3.3.0-alpha.2","license":"MIT","_id":"@storybook/addon-knobs@3.3.0-alpha.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"e7a76253703eb203b1dd1710117863f48c381e73","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.0-alpha.2.tgz","integrity":"sha512-1SM00FNNIdJsBRb9PZvLeTGJx4tQPAa99qbyDUzpIccOm1cGG/tuoacRHOh6dRlxj4rK43cPHl1+FvL28dVN0g==","signatures":[{"sig":"MEYCIQCbm86cir6hTbE2iTwBvhFc6XYSZSmE+c8sDNSa9ac1kQIhAKU2QNKuZWfa4+iNP50+FEQcQOfXLrgTrZVJFEoyIgx8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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":{},"_nodeVersion":"8.1.3","dependencies":{"global":"^4.3.2","moment":"^2.18.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.10.3","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.3.0-alpha.2","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.4.2","react":"^16.0.0","react-dom":"^16.0.0","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.12","@types/react":"^16.0.0","style-loader":"^0.18.2","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.0-alpha.2.tgz_1507061547156_0.5168422684073448","host":"s3://npm-registry-packages"}},"3.2.13":{"name":"@storybook/addon-knobs","version":"3.2.13","license":"MIT","_id":"@storybook/addon-knobs@3.2.13","maintainers":[{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"8fcf89f0e6e8363e91f621465fda4f478ea0253c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.13.tgz","integrity":"sha512-JfX+o4fIEEBpeVufS4vrA3pKbQ1XK5wLR2CffU0NWSvwudVmadeTMTv2/5QMonYRMBNy4zaSgfv2KIiq7I6xGw==","signatures":[{"sig":"MEUCIQDdcKeLR1XJIkob5O4Y5m3QpcGAcGaK9MRNEwF4M8hKNAIgaoeSCtA1d4PY5bbhzDfWuFo7N4kswukA/ulkxGKbtTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.4.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.1.3","dependencies":{"global":"^4.3.2","moment":"^2.19.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.10.3","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.13","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.5.2","react":"^16.0.0","react-dom":"^16.0.0","raw-loader":"^0.5.1","typescript":"^2.2.2","@types/node":"^7.0.46","@types/react":"^16.0.15","style-loader":"^0.19.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.13.tgz_1508528754710_0.428678366355598","host":"s3://npm-registry-packages"}},"3.2.14":{"name":"@storybook/addon-knobs","version":"3.2.14","license":"MIT","_id":"@storybook/addon-knobs@3.2.14","maintainers":[{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2934275dfbe3f940d4be3732af1c8f2b80ee7639","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.14.tgz","integrity":"sha512-GlY0Ef03+rXKGiMcATqEDfgG7CKaoD0HDZov6y5NstVOhbEda169AXBPwgHXfziKaPNc7SmaoEsYLgfy/aRy1w==","signatures":[{"sig":"MEQCIFchKwHmaxOAP5+dCiA134IeOn55LtRIpGgXM5WWcSttAiAj5BldJt8Z8Qo1tUNnep4F7NLeBJHn/PpEsqk+ADw50g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.4.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.1.3","dependencies":{"global":"^4.3.2","moment":"^2.19.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.10.3","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.14","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.5.2","react":"^16.0.0","react-dom":"^16.0.0","raw-loader":"^0.5.1","typescript":"^2.6.1","@types/node":"^7.0.46","@types/react":"^16.0.19","style-loader":"^0.19.0","git-url-parse":"^6.2.2","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.14.tgz_1509520949411_0.9801958773750812","host":"s3://npm-registry-packages"}},"3.3.0-alpha.3":{"name":"@storybook/addon-knobs","version":"3.3.0-alpha.3","license":"MIT","_id":"@storybook/addon-knobs@3.3.0-alpha.3","maintainers":[{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"ea33dfb44dd67afbc80c57922ec60cc62143f97a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.0-alpha.3.tgz","integrity":"sha512-wdlu/6LYqa6j765V5kmGeeGC/42C7/YHJfttPYZ74ZCaDpgxIEXMAwC5oYdUan1EKiyWpwcz2vUT3tTFlO/sKQ==","signatures":[{"sig":"MEQCIE7TGSbDRwydOc0/PhwpRk8duJ3lCwtD6sr16s0wFj4tAiAyDC3UjvFUL26Ou+qMZmPAc0gFLRcldBTlFksXkGweAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.19.1","deep-equal":"^1.0.1","insert-css":"^1.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","@angular/core":"^5.0.0-beta.7","babel-runtime":"^6.26.0","react-datetime":"^2.10.3","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.3.0-alpha.3","react-textarea-autosize":"^4.3.0"},"devDependencies":{"vue":"^2.5.2","react":"^16.0.0","react-dom":"^16.0.0","raw-loader":"^0.5.1","style-loader":"^0.19.0"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.0-alpha.3.tgz_1510027082465_0.007247780682519078","host":"s3://npm-registry-packages"}},"3.2.15":{"name":"@storybook/addon-knobs","version":"3.2.15","license":"MIT","_id":"@storybook/addon-knobs@3.2.15","maintainers":[{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c9619c33bec490ad972415689ba019ede53d8bf4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.15.tgz","integrity":"sha512-ln0KwxAsteoACwd2dNruEQKtEp86tgP1qXaK5xrWFjEvB2KL9C+RzRGkeOclRWvcz8PedZ3EZLwt6q1cVEpCFg==","signatures":[{"sig":"MEUCIQCrtboUTdiIntAf2nTCDyqDaaNz+yt+IdgmB46wmmUdRAIgS5u3yOJLgbbiNXcqhDJtVdas6CijCFvbYCZ+G99Tdbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.5.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.19.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.10.3","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.15","react-textarea-autosize":"^5.2.0"},"devDependencies":{"vue":"^2.5.3","react":"^16.0.0","react-dom":"^16.0.0","raw-loader":"^0.5.1","typescript":"^2.6.1","@types/node":"^8.0.50","@types/react":"^16.0.21","style-loader":"^0.19.0","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.15.tgz_1510281679418_0.5749053303152323","host":"s3://npm-registry-packages"}},"3.2.16":{"name":"@storybook/addon-knobs","version":"3.2.16","license":"MIT","_id":"@storybook/addon-knobs@3.2.16","maintainers":[{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c19747656a969e5b960e4edeb54e5d5f4198609b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.16.tgz","integrity":"sha512-m0y2B0tRE4W4H/dUdqFW5sPf3UQAxATKEwPHJ2CBQ6wmsR7tzPQC6Igig6hYBr4mwFtpZRwEh96aCtB/+VZ/JA==","signatures":[{"sig":"MEYCIQCyuBjq6EN9FPJ3SQvGBlNZUQeU9c4Wmjswm6JVywRJ5QIhAOj+UG2TFNYXYHXW+FPaQA0Xtw1WX/sN0SZqc6pSHYUs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.5.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.19.2","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.16","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.3","raw-loader":"^0.5.1","typescript":"^2.6.1","@types/node":"^8.0.52","@types/react":"^16.0.23","style-loader":"^0.19.0","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.16.tgz_1510797869467_0.26904368167743087","host":"s3://npm-registry-packages"}},"3.3.0-alpha.4":{"name":"@storybook/addon-knobs","version":"3.3.0-alpha.4","license":"MIT","_id":"@storybook/addon-knobs@3.3.0-alpha.4","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"5f18fccd199a3a9f62359d744bc12fe270a8ada0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.0-alpha.4.tgz","integrity":"sha512-xY3DNj0jJlkh8InlIBm0G6kk+QQldCufI+8doQZc5kwyiFnRLjRNeOeefLNtuXApuvB1YxJ6p6/j/J4S/bIp3Q==","signatures":[{"sig":"MEQCIHHqlZ/esMVI7cv6A5Pc/lcRQUbNgqqh0721dHDN98e3AiA4NXM6RwDVJTzpi333y1TqAOnUaJp9H71T7BFUCIL0Jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.19.2","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","@angular/core":"^5.0.0-beta.7","babel-runtime":"^6.26.0","react-datetime":"^2.11.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.3.0-alpha.4","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.8","raw-loader":"^0.5.1","style-loader":"^0.19.0"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.0-alpha.4.tgz_1511349386564_0.20275906519964337","host":"s3://npm-registry-packages"}},"3.2.17":{"name":"@storybook/addon-knobs","version":"3.2.17","license":"MIT","_id":"@storybook/addon-knobs@3.2.17","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"337320c704f9bf53217278aa7a7d442c3428fcf3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.17.tgz","integrity":"sha512-uSUiWr7bV3Yy98GEtGEjTfrs86Slv0nffcJty0UBEVO22CgiiWz997IwR9/mF9vAcPo68FcZVPqvfcMg0+W4Vg==","signatures":[{"sig":"MEUCIQCBubLErQaVagvKQ1uGa3m3X1KvW4inqMaSocND3la1OwIgVjGIzaxYpOJ+jDH1FBeQkoPy5Y6jfV2Rgh8Py/vtKVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.5.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.19.2","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.17","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.8","raw-loader":"^0.5.1","typescript":"^2.6.1","@types/node":"^8.0.53","@types/react":"^16.0.25","style-loader":"^0.19.0","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.17.tgz_1512331207061_0.03563492000102997","host":"s3://npm-registry-packages"}},"3.2.18":{"name":"@storybook/addon-knobs","version":"3.2.18","license":"MIT","_id":"@storybook/addon-knobs@3.2.18","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"fc924d5cc85f13d1b983236537b061565e11b0ea","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.18.tgz","integrity":"sha512-VkLi/ELWRZPCmHH13VfvxGFJ78rDjiepT4WNWmNVpXe2XoHJJw85HLyOGnWxEDmLd7Bfxv9aCaY4BPwzjxzi+A==","signatures":[{"sig":"MEQCIExNrH5AUWtEm62RN3MojCuRPuES55R7btFkUtPWvdOlAiBmy72qg0OD0oEn+26Ozv8tULLSYZ8Kw9RmgxJFkt7qnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.5.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.0","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.18","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.11","raw-loader":"^0.5.1","typescript":"^2.6.2","@types/node":"^8.5.1","@types/react":"^16.0.30","style-loader":"^0.19.1","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.18.tgz_1513634395876_0.37743929168209434","host":"s3://npm-registry-packages"}},"3.3.0-alpha.5":{"name":"@storybook/addon-knobs","version":"3.3.0-alpha.5","license":"MIT","_id":"@storybook/addon-knobs@3.3.0-alpha.5","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"85fcdf51eb70bd0075434a88dd56659f9f3512cf","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.0-alpha.5.tgz","integrity":"sha512-AfQSC0Fdvr/bQ4w+2hmoT8Ao/KGRwDorI0kBebFPfBrV98jttXOYT5sTYF7k2KUtsMCgE1KkET2y2gukNSdpuw==","signatures":[{"sig":"MEUCIGqJa2G0y2dPtGNsSQXttUF5bhki/2ubkBxDQLC9rNuOAiEA59mSCNQmh4F2cQRKmivvCnHHQ+xiSEJG9A0XePnYOa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.12","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@angular/core":"=>4.0.0","@storybook/addons":"^3.3.0-alpha.4"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.0-alpha.5.tgz_1514048804532_0.9877268236596137","host":"s3://npm-registry-packages"}},"3.3.0-alpha.6":{"name":"@storybook/addon-knobs","version":"3.3.0-alpha.6","license":"MIT","_id":"@storybook/addon-knobs@3.3.0-alpha.6","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"51a00f5165c0b41e2139cbba3eb36602070e1d9a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.0-alpha.6.tgz","integrity":"sha512-p9lHDXw9aDZ+K4K7MFMicRhph/gpPtg9k6NSO2JYE8JZ6ubSXn+PLttA8G9NtB5xwn6zVB9jj560kc0N73pMfA==","signatures":[{"sig":"MEUCID9zf2feugDL5JQ37S8+Fd6MZ6UE0omrn443ZMFp3enfAiEAoNg9Ky4fzwQzNI7su7KTCARB9O/2KnPxZyK3ks+WD/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.12","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@angular/core":"=>4.0.0","@storybook/addons":"^3.3.0-alpha.4"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.0-alpha.6.tgz_1514049966187_0.10437581944279373","host":"s3://npm-registry-packages"}},"3.2.19":{"name":"@storybook/addon-knobs","version":"3.2.19","license":"MIT","_id":"@storybook/addon-knobs@3.2.19","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"ac9aeb3f7853dfe6bea4ae41e4ccbac22434bda9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.19.tgz","integrity":"sha512-6cyG3nWnh5aYD2lzL6uvwbzQBpfi4HEgIUbhXmhdH84WEQPuqOr1p4izSBrDmhGcSUCpRO/HJYU5WYXXTr0PRA==","signatures":[{"sig":"MEYCIQDwbcASepbJ0rxi4mr1xhj6Qz36GEwR+Mk+Eue7sVyckwIhAM8a8jcdCf1Ry1EsxekOZlfDKu4YqXqXd4bZkb2hgqc2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.5.1","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"^3.2.19","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","typescript":"^2.6.2","@types/node":"^8.5.2","@types/react":"^16.0.31","style-loader":"^0.19.1","typescript-definition-tester":"^0.0.5"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.2.19.tgz_1514051986676_0.753590642940253","host":"s3://npm-registry-packages"}},"3.3.0-rc.0":{"name":"@storybook/addon-knobs","version":"3.3.0-rc.0","license":"MIT","_id":"@storybook/addon-knobs@3.3.0-rc.0","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"db8c66f3ac28870c3528ba437a416f33970d3b8e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.0-rc.0.tgz","integrity":"sha512-mL7iOrbLQdSufxwAl3vVXDeYpsdOlkzdyfvU04D/aRBDBl+s9TNgK3g9+8b54ekgpPNzduWr/V367Z5lpeUy4w==","signatures":[{"sig":"MEYCIQC3zKF9x5iPchJ1c0INnDvSEL2aKh5tMSb0L8fok/DYCQIhAMj123zwtw8N3NIWeafPuGfql8MmF5uZCjzOUsCrDiL3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@angular/core":"=>4.0.0","@storybook/addons":"^3.3.0-alpha.6"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.0-rc.0.tgz_1514089254098_0.6750170364975929","host":"s3://npm-registry-packages"}},"3.3.0-rc.1":{"name":"@storybook/addon-knobs","version":"3.3.0-rc.1","license":"MIT","_id":"@storybook/addon-knobs@3.3.0-rc.1","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"5567bb4f6d722cf6964b4c7d02a4f0689f569378","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.0-rc.1.tgz","integrity":"sha512-YrEeNQusItr2Mr+v/CwvMpcPL5bLBvRUpwPl7acgYBiRI7A/TxI+dwL8boh3dHZxiT7r0gdWQ9x2OA/znYci3g==","signatures":[{"sig":"MEUCIQD6veWAicwR3boMDz56rlt7uRD3HDS+7ovBYMeA4/EsegIgQEVS0p80YCyuRnhmYk53Qem15EyhnuccELVCDtaBeBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","lodash-es":"^4.17.4","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@angular/core":">=4.0.0","@storybook/addons":"^3.3.0-alpha.6"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.0-rc.1.tgz_1514310581535_0.37043106532655656","host":"s3://npm-registry-packages"}},"3.3.0":{"name":"@storybook/addon-knobs","version":"3.3.0","license":"MIT","_id":"@storybook/addon-knobs@3.3.0","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0e8d0ea89597d6f071a371d395226fa433d8f281","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.0.tgz","integrity":"sha512-hfIdkJLSGfoCB8u6bSGq6K42YHBQrM4H3Jv+vQx7SmNmnPb1gbKiRQrGcKEvmRd1r7T9a6SclqQAzdyMuKBiEg==","signatures":[{"sig":"MEQCIBwUIshoWVgwpmN0EBbPN/pFvk34daZRtEWBr7TDamt9AiBtMaf3bJGqH2ChvJSRg228sCiXUpla8wK/HpOY4y8LZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","lodash-es":"^4.17.4","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@angular/core":">=4.0.0","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.0.tgz_1514332706160_0.8207887646276504","host":"s3://npm-registry-packages"}},"3.3.1":{"name":"@storybook/addon-knobs","version":"3.3.1","license":"MIT","_id":"@storybook/addon-knobs@3.3.1","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"238912e4c8b97b899ca3f048c579892ff047130f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.1.tgz","integrity":"sha512-XWqQVcXKZJnH+mSO6R4n4g1y3zJ9uf2KsVsN5yBZR1XkdySjHKLJpEhxhS6iudCCpaiReROg03SVMvoaVHZVxA==","signatures":[{"sig":"MEUCIBL5fTSb4UH2HENze6jbocMZpLZRpj+rGuHwWXsWFyakAiEA91i1X0au3oLFazaWLnp9C0TzrzA91mMCxq2nLw6kvdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","lodash-es":"^4.17.4","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@angular/core":">=4.0.0","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.1.tgz_1514345450961_0.7272183359600604","host":"s3://npm-registry-packages"}},"3.3.2":{"name":"@storybook/addon-knobs","version":"3.3.2","license":"MIT","_id":"@storybook/addon-knobs@3.3.2","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"758e327538ca7fddc3686f089da1c4001671a0d4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.2.tgz","integrity":"sha512-Coymh3Z3GruP/DNpGCLELkq0oltyPhEJBjUoBd6zgt9+fU7/PUuC1x634wHHoDgPo/a1Y2gku94i8R1YnEqaPQ==","signatures":[{"sig":"MEUCIQC8yrmDIYlddDqq3d2X131BqGAPJytKdFVtSuRn0OMFUgIgS6ODubNVGyas8Tzs7LtiQsbIznbRghVg1SkBkdDctaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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":{},"_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","lodash-es":"^4.17.4","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@angular/core":">=4.0.0","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.2.tgz_1514430695035_0.6748081145342439","host":"s3://npm-registry-packages"}},"3.3.3":{"name":"@storybook/addon-knobs","version":"3.3.3","license":"MIT","_id":"@storybook/addon-knobs@3.3.3","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"69935137fff7f8bca79586c2a23b2c0dc6fab896","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.3.tgz","integrity":"sha512-OOpXtwHmC5v8cvvGNJuVhGrXeMRj3efnXq03b9Ni7nXs35td8+jiUiDZtlDkNHH/fbupKO3VzyR6UBYwYVotEw==","signatures":[{"sig":"MEYCIQDPgjXJ95ZO3IGFguGhywbvSp9uGj2E7Pu9CxaWmEOIbAIhALQKGkf0dUW+z9JxfqYX5HwqM+9sWg6qEBqurxxRAfGK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@angular/core":">=4.0.0","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.3.tgz_1514480787826_0.382423352682963","host":"s3://npm-registry-packages"}},"3.3.4":{"name":"@storybook/addon-knobs","version":"3.3.4","license":"MIT","_id":"@storybook/addon-knobs@3.3.4","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"ddca6c2c3672273670937ad6ced8fdc14f7a2c13","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.4.tgz","integrity":"sha512-jZAlEMtk2MxX2AgCjxxmvzhM+KYII6ZMFFbySx6sPYUK5W5AtasuzqCoqHU76+WgkoGIASuGsGUUqKzs7k42+g==","signatures":[{"sig":"MEQCIGaN4mLM54QOfmD/Ey97qHNRGF5RwpMYoDodpvn9xlvUAiB0APE8+ummKRhlVg245ooEx1kc2JYnzbFOqAj+92GB8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.4.tgz_1515329728571_0.9477628299500793","host":"s3://npm-registry-packages"}},"3.4.0-alpha.0":{"name":"@storybook/addon-knobs","version":"3.4.0-alpha.0","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-alpha.0","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"666d1ee5f5a8ef7b4dfe89d0a490df27adc8cf18","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-alpha.0.tgz","integrity":"sha512-Vzp5eqI0aLrATBsqA31qM/XWB2jUoThJWJBCLJgx2vj3Bq1vF01g3wihfJhOYh+9WJxLenTqPxQVfxTLG39H8A==","signatures":[{"sig":"MEUCIQD/eiUKCVmRUpACkvWPnMLvRqjLazkC90qICSHBce3cKgIgCZIE3G5XhCY5KWgQfO1xgSeeT9an0I61bITa+qBg+zI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.4.0-alpha.0.tgz_1515341082676_0.07911726459860802","host":"s3://npm-registry-packages"}},"3.3.5":{"name":"@storybook/addon-knobs","version":"3.3.5","license":"MIT","_id":"@storybook/addon-knobs@3.3.5","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"cd6175986eeb7a262aa46416fb5a2ee5e92a762e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.5.tgz","integrity":"sha512-L2TFgTozrl6KaPUIXPxBz/xLgMho9gOoQx8A0Vi2iYIGGcGwENzgdgh3+cip+p1sT4VNIU943a78NI/ExlzWjA==","signatures":[{"sig":"MEUCIQDRAcLYlEc84gaVFemPkjMHUEhqC0SqGH4KxZ3nQzi7hAIgAsDoy6inG57I8myyDCaL2MMND1P5be6I7lALqPNbtI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.5.tgz_1515382951070_0.8972657679114491","host":"s3://npm-registry-packages"}},"3.3.6":{"name":"@storybook/addon-knobs","version":"3.3.6","license":"MIT","_id":"@storybook/addon-knobs@3.3.6","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"e842924be06c7d5d0c413d89983bef4f5140d2cc","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.6.tgz","integrity":"sha512-pplsxznZ2B5JyRRsgU45ao7X/Bo5pinvRcfrQib2zBfFtG58NnEYOuzJz8Vq/p9r/Nt6/g4ETFU4lO8uAlbOUw==","signatures":[{"sig":"MEYCIQDDkscsEcVvD8H4+4DpHr7Mmffkp5Pg9n2APzANe3WhpAIhAPTRSYiNUSBnhb4R6yL2IVFhFAEYcstL4ufHMYC5a2Tc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.6.tgz_1515408115056_0.7190510504879057","host":"s3://npm-registry-packages"}},"3.3.7":{"name":"@storybook/addon-knobs","version":"3.3.7","license":"MIT","_id":"@storybook/addon-knobs@3.3.7","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"d541de3d897987e21c10e25a5ae6a74c3606320e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.7.tgz","integrity":"sha512-Dr4Ws/q0QXtuoZ0+1dz9lIVMl4hKsoTwFVQN9U9FXaX5LBpeekI7FsD84ELLoNvNp624j1H0o0JCyniAfCy/uw==","signatures":[{"sig":"MEYCIQD3siSpsO/z+JGcyWPqB3C+nwNE1liIjP4XcdhPAMoM6AIhAOq9GeUPXBPeLvx3nBrSWUdWjiraqEaNh8o9+jiTLoX0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.7.tgz_1515566173056_0.060732016107067466","host":"s3://npm-registry-packages"}},"3.4.0-alpha.1":{"name":"@storybook/addon-knobs","version":"3.4.0-alpha.1","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-alpha.1","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"174c13239f69eeebc34ecfd3ac3019ec0c57b776","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-alpha.1.tgz","integrity":"sha512-NlHaOffLAt9/dhSsL7FnpOuBs1/A2zLBO2N4rJ3uBM4uy6l2cMxSj303SGTBh527n6QI3EmMxkPnBVRnmXW2hA==","signatures":[{"sig":"MEQCIGbHMpYLeGeL1ejsoDPvUzoAD8h8umd6Og2cDgVXP63IAiAs8urC+6ENRf56mhU/w+VuaoNPH7gl8Dd9enWR+7yMZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.4.0-alpha.1.tgz_1515568111230_0.6122320552822202","host":"s3://npm-registry-packages"}},"3.3.8":{"name":"@storybook/addon-knobs","version":"3.3.8","license":"MIT","_id":"@storybook/addon-knobs@3.3.8","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"1c8b7a97ad64c7159c4dc4b3c9bfbc3e774aaca7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.8.tgz","integrity":"sha512-RwqvtyxiVRCoamjXkUwDVQMKpuABM6WkAhoID61ytZQCbMLQtcweIfjv5+x+n3e4Ozsm6QJ/HIRSWQIcQSsgKw==","signatures":[{"sig":"MEUCIQCGa7X42ctCh8AjiR3rleS3qB2OKax5nT2dM4/g332zigIgfKU7V8/UjDSVoon1f+ptU6HV5azHCZN229yI7Q6RvVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.8.tgz_1515673072947_0.4892334521282464","host":"s3://npm-registry-packages"}},"3.4.0-alpha.2":{"name":"@storybook/addon-knobs","version":"3.4.0-alpha.2","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-alpha.2","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"a93e86f0e3a34c02952140844827c4382bd96d15","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-alpha.2.tgz","integrity":"sha512-HKrNfyyWEvMhWspGeDQEnP2tZmIceB4ASZaLbgJa5PcyXjFC38CHplZBw3Dvhje3oTPYOkJxu80wyYTkOPtVFg==","signatures":[{"sig":"MEQCICIFiu4c0mfBzm9qW2w+k26sJYY+nnmswdFW1s76HuriAiAd0Vg2pY7Cg7NeEkx6VWcl6geBmqQTXF369v7F7Lew1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.4.0-alpha.2.tgz_1515674803016_0.21890126075595617","host":"s3://npm-registry-packages"}},"3.3.9":{"name":"@storybook/addon-knobs","version":"3.3.9","license":"MIT","_id":"@storybook/addon-knobs@3.3.9","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"855575557868a97c00ce8de8e2e6960f1580f21c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.9.tgz","integrity":"sha512-1tFK5ef81bWwesUA6bAGGijDdnk0e+INHHOUJfT6AO6AXfqpFjFtUD7wQnekgYbTmydjJK8JlvhaIJNY94RTAA==","signatures":[{"sig":"MEYCIQCVWR/DDAudN+qf8B5qi03fXgOeuhWDR+Ea5jAe2VCz3wIhAOuj5clDjaqWm3/ntwtnT5kRJS0LF0S7DI23MHRnetIa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.9.tgz_1515828720536_0.5562459374777973","host":"s3://npm-registry-packages"}},"3.4.0-alpha.3":{"name":"@storybook/addon-knobs","version":"3.4.0-alpha.3","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-alpha.3","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"1608ace57b2a9a9826558d2d87841d19dcc1f03d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-alpha.3.tgz","integrity":"sha512-dDBMSJWO9vordas8Jo6DuoSRpJci0GPUJg6l5erGGpdl5KGLCFnTYp4ZRaTbMRaRoJoGJl3VhdMFgE2hJrpdaw==","signatures":[{"sig":"MEUCIQD+mRk6coaaof52jPiuI/GiqKDzZuz5cmjKPsYSp/59KQIgAOH+F5+k/Q8N0KB2ShQDo0ZUkEEFcXicAZg/3wSCrIE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.4.0-alpha.3.tgz_1515847287580_0.4101708997040987","host":"s3://npm-registry-packages"}},"3.4.0-alpha.4":{"name":"@storybook/addon-knobs","version":"3.4.0-alpha.4","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-alpha.4","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"5ae2dc9a7929dba0e9b576e4db589a887e9fe0c8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-alpha.4.tgz","integrity":"sha512-QDvHR3J1wSf9XrEebEvJpeNZPECs4JBAWnyrVF34inYpRN59e6NrrJslnu51P0vcNA1bBDfp/EZ8SO7rTfikKA==","signatures":[{"sig":"MEYCIQDFs2NFD04Ww+9g83bfX+s1Uh4xoopOOkUOpanPakzcUQIhAKxPtxfkocH311/l3mkIIp/tzc9J0FG5q7T3bLplVLAo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.4.0-alpha.4.tgz_1515848654321_0.31538757029920816","host":"s3://npm-registry-packages"}},"3.3.10":{"name":"@storybook/addon-knobs","version":"3.3.10","license":"MIT","_id":"@storybook/addon-knobs@3.3.10","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"25f32cd3d32a1667dc9d8ae484ddfd6223fcffef","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.10.tgz","integrity":"sha512-fxxO9qpi4RLMn9KWgt55dkt/FNQjt0kZC0nN62aTFCc1mpKJSfN5zGEZYkmvWaJeRESZn4Z7IWVYugHuOa0vXg==","signatures":[{"sig":"MEQCIAlpUrKITM1naT5h2+sK6N7XG8tUG1gDPQCEkZbTFOenAiBq/0BGvmLGYffoaY8XXWICPoDtPcHt6UCHG/wKvCmpqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.10.tgz_1516361294033_0.2240237684454769","host":"s3://npm-registry-packages"}},"3.4.0-alpha.5":{"name":"@storybook/addon-knobs","version":"3.4.0-alpha.5","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-alpha.5","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"76625657a071afdcc827c90e9f57af48527bcfdb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-alpha.5.tgz","integrity":"sha512-MBlI10kPppE2k2psT170Plu+nFm2czaagGoGovh/XAvRKSbJRjAlTjWn7JmIe7IDEtp1FApc8uNzre4b9Tpe8w==","signatures":[{"sig":"MEYCIQChcV20/dbOoqM4z9WEs65j4B8f0GzHR0+n8ueTAA9vhQIhAJ1G5SST1ecNJ4s1A+TIjV8L3AuSuboJ8n2FU+baTIQe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.4.0-alpha.5.tgz_1516366356698_0.8350572725757957","host":"s3://npm-registry-packages"}},"3.3.11":{"name":"@storybook/addon-knobs","version":"3.3.11","license":"MIT","_id":"@storybook/addon-knobs@3.3.11","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"ab53a627f9517d922e1a1f6b874bd76ae2fc3b08","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.11.tgz","integrity":"sha512-Eg+fl1uxmWuexjpOJVsTRvqhsXOpUh1/6C8f1j3N6AQvU9qbqYWM3/eRQI/1tQ7sqeOsohjMYJrdBIL7liLggQ==","signatures":[{"sig":"MEYCIQDXiNXVcNgh2tkIO60r5pJ6/bnpE717tZiFW8wJ4+af8QIhAMzAc8Ftrch/qshJuEVLlaoxuDdhV6ZJ2mcBw3HhTQiy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.11.tgz_1517035258593_0.7840332402847707","host":"s3://npm-registry-packages"}},"3.4.0-alpha.6":{"name":"@storybook/addon-knobs","version":"3.4.0-alpha.6","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-alpha.6","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"b363cfa61fe94d56d73d9d9f5d04ce2f652de14b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-alpha.6.tgz","integrity":"sha512-iUOyiH9CsCtse6gaswpghegNNkb8/swUB7mUtphVerpI2SgMWsldt3qYq0jRVKVKeEN6eWL9hlJOYjgTM9ZqSw==","signatures":[{"sig":"MEUCIDOk9BGnkW2xPtN/7Obf0Fw4tlQDNUVVxE/MHZHF/r25AiEAwxkx7LAYFsm+fLgNN8yA9QsStf3LK06Ff38FBKyI6c0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.4.0-alpha.6.tgz_1517037392422_0.9177587630692869","host":"s3://npm-registry-packages"}},"3.3.12":{"name":"@storybook/addon-knobs","version":"3.3.12","license":"MIT","_id":"@storybook/addon-knobs@3.3.12","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"371c3d5b50bd0220a7f0d18e5c20794fb6292545","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.12.tgz","integrity":"sha512-EgOZc18ePmy9mn8HDhyzWdWs8UYF5E0LMu05Xp/ZEz7hXVqDLhlFxJxfRoyMlTR8v4Sb4/z5/cv0R59tbEjBXA==","signatures":[{"sig":"MEQCIBV5l7+ETUl05VnrCHcmseWo4sClQipr8ir1RxzS4hO8AiAS/eBzmt3pitArLs1OfRJu+mlZc0EA/M6Jl0rkFky6Gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.3.12.tgz_1517624624929_0.036872036987915635","host":"s3://npm-registry-packages"}},"3.4.0-alpha.7":{"name":"@storybook/addon-knobs","version":"3.4.0-alpha.7","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-alpha.7","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"d8aa783c7a3a00123569b9e84c4e95b2ee8d4477","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-alpha.7.tgz","integrity":"sha512-tFroExjnI9Wm8sPvBoBQVNaQav6jUt5djPCUD8BadY4gKbmFQ+ljuJRJl/Z78gqJVyZPxY5c3vCfI7PcXNQgcg==","signatures":[{"sig":"MEUCICeUZ22im+tUCUEeXz0UIhlSauN9578WoogvF6gWzHzBAiEA5pfrYaQr/7V7gL6SLuf5h0ShDm3YoQRaWQbT2yllJ94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.12.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.20.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs-3.4.0-alpha.7.tgz_1517626509120_0.44582720240578055","host":"s3://npm-registry-packages"}},"3.3.13":{"name":"@storybook/addon-knobs","version":"3.3.13","license":"MIT","_id":"@storybook/addon-knobs@3.3.13","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"21e1bf22dfb83a62c74223f6e01620225dbff219","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.13.tgz","fileCount":72,"integrity":"sha512-TxC8RxPM0SYDJDaCpFxRPsqfvfsNKqcIourpgLBV23VBpORpgFQeXBXLTmMx8TjEmsb5Gn+CyHlIFvOnBMUBcA==","signatures":[{"sig":"MEUCIQClOXW0s1CSZg+0r7qMd19uWMGCmV7cxWOz6PNO/EfdNQIgKuvorzNmbFssGU/t9s3+TkRmGKLpTHD4GuNYndwhmNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1257257},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.3.13_1518329558755_0.8655438292501776","host":"s3://npm-registry-packages"}},"3.4.0-alpha.8":{"name":"@storybook/addon-knobs","version":"3.4.0-alpha.8","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-alpha.8","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"a930cd5a75f57e1c76a85144b36056f53ec30f67","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-alpha.8.tgz","fileCount":78,"integrity":"sha512-bhpAPjeWZO05iiH53xz+qTMb0MvO94qMuWldeZImDvt5EQ2so5M2rhPvmmThRJyDgjs44sVN24ZAR6rNL9oqTQ==","signatures":[{"sig":"MEUCIQC5Z37rEcS3x8dUSa/k5YH7GHw0tDrxUb2ZA9f7TtjpgAIgRNdjJU1Cqv41fHU9SVcwT7khSJu7KSk0zFfTEykV0YY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1269697},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)\n\nThis addon works with Storybook for:\n[React](https://github.com/storybooks/storybook/tree/master/app/react).\n[React Native](https://github.com/storybooks/storybook/tree/master/app/react-native).\n[Vue](https://github.com/storybooks/storybook/tree/master/app/vue).\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\nThis addon works with Storybook for:\n- [React](https://github.com/storybooks/storybook/tree/master/app/react)\n- [React Native](https://github.com/storybooks/storybook/tree/master/app/react-native)\n- [Vue](https://github.com/storybooks/storybook/tree/master/app/vue)\n\nThis is how Knobs look like:\n\n[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](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```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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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> 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![](docs/demo.png)\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';\n\nconst value = text(label, defaultValue);\n```\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;\n\nconst value = boolean(label, defaultValue);\n```\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;\n\nconst value = number(label, defaultValue);\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/react';\n\nconst label = 'Temperature';\nconst defaultValue = 73;\nconst options = {\n   range: true,\n   min: 60,\n   max: 90,\n   step: 1,\n};\n\nconst value = number(label, defaultValue, options);\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';\n\nconst value = color(label, defaultValue);\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};\n\nconst value = object(label, defaultValue);\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']\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\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';\n\nconst value = select(label, options, defaultValue);\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';\n\nconst value = selectV2(label, options, defaultValue)\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 value = date(label, defaultValue);\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');\nbutton(label, handler);\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","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.13.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.20.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.0-alpha.8_1518332253363_0.9287811129638841","host":"s3://npm-registry-packages"}},"3.3.14":{"name":"@storybook/addon-knobs","version":"3.3.14","license":"MIT","_id":"@storybook/addon-knobs@3.3.14","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"129b8273006906236882de7c4a8daba416bc9c48","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.14.tgz","fileCount":72,"integrity":"sha512-Q95OnyfdZzoSTbPZoN0BWHBcGmU0JEA8ClAILfhEbMygRWw/2NElfIO2Lm0W+NSY7+DB0P2fL54UEJwBXbLGVA==","signatures":[{"sig":"MEYCIQDIkaiMglUuxur7NqPk0aJC3b2ij9349BNjSrK1F1lU/AIhAImms/JF+1aDR+okCQY2SEboHMsMNGNiR6rygxQr0Wg4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1257257},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.3.14_1519202323437_0.8966108074964989","host":"s3://npm-registry-packages"}},"3.4.0-alpha.9":{"name":"@storybook/addon-knobs","version":"3.4.0-alpha.9","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-alpha.9","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"7e316eb6055718033b240fc3bae20c7f9533f0e8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-alpha.9.tgz","fileCount":81,"integrity":"sha512-+zwPlIHdLkrO5FjNzmVWVWIoqrc3d2cJA5a9bp67EkFI55skMgW8QKNm5xgU0AGnajhNMsqzBLBPx/5xQnNeNg==","signatures":[{"sig":"MEUCIBf4EC2sjcJF2LmQOkNNJUfoyTyrVSuCtyX3mDAuqqwTAiEAmRvrzJuZ3iOysuJExhLmJ+38G7SptMWBS4AlXeMp4No=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284494},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](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```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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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\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 (<div>{content}</div>);\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![](docs/demo.png)\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","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","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-alpha.9","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.20.2","@storybook/react":"^3.4.0-alpha.9"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.0-alpha.9_1519289198807_0.8651592972267794","host":"s3://npm-registry-packages"}},"3.3.15":{"name":"@storybook/addon-knobs","version":"3.3.15","license":"MIT","_id":"@storybook/addon-knobs@3.3.15","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"b18b067900682deef314785db99dee90a84a8f97","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.3.15.tgz","fileCount":72,"integrity":"sha512-Y+5YkFEVigHBe/wjLcqPJn743/c8WpTHdWLxKhJ0rZOFQ0RRzPVIzk7/HRiuV60zSr9j7VRbtx7x95E/Or/XIw==","signatures":[{"sig":"MEUCIBff8ALz8073J9lCLwZCocM/e90503Bdwb7zc6K2cPY+AiEA4+ncQ+sWRDah5jiTg6GaSCXDPclyUuDDjHgGg5t73Lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1257257},"main":"dist/index.js","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.20.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.0","react-color":"^2.11.4","babel-runtime":"^6.26.0","react-datetime":"^2.11.1","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.19.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.3.15_1520416461868_0.6404903057905504","host":"s3://npm-registry-packages"}},"3.4.0-rc.0":{"name":"@storybook/addon-knobs","version":"3.4.0-rc.0","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-rc.0","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"1f4bde51289912706df409b0c62d1f54d4fc71f2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-rc.0.tgz","fileCount":81,"integrity":"sha512-S/XjS3QeK24sP+HnUnmjOxRPR3+MxYjc0WeJ1GaLgXjdIjsiDxsDGr7ogDOBmr02IBExy8rr+yZisjtAcGz2aA==","signatures":[{"sig":"MEUCIQCkeROLSqX/ojcRhQHasxfh3NyXf53UnhOCMtlcp1TmQAIgcgvTnyGqM9sSw98u85bvxwo8IJfLIx4mTo6lgu8f3bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284485},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](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```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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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\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 (<div>{content}</div>);\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![](docs/demo.png)\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","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"},"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","_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.0","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.13","raw-loader":"^0.5.1","style-loader":"^0.20.2","@storybook/react":"^3.4.0-rc.0"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.0-rc.0_1520478294392_0.9638254274064448","host":"s3://npm-registry-packages"}},"3.4.0-rc.1":{"name":"@storybook/addon-knobs","version":"3.4.0-rc.1","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-rc.1","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9c3c9dea96320adb6cfe376c99b1883f31b2b0b5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-rc.1.tgz","fileCount":81,"integrity":"sha512-/8kl99fFu8uqz7rWttuhukTM1dfJmER98+7o0DlVJiovkr7nmFuhuXYh8IT8HPWE6qroxLUhFY2lFJu2kSmwrQ==","signatures":[{"sig":"MEUCIQCUkPLPrDTSiwHjE14pU/XpJ1jx0EvEaaU5c4ciNz5d4AIgOF446Kw8sCpznAjn7uDG0m0gD1IPutNmTl8B7kUDkbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284485},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](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```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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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\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 (<div>{content}</div>);\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![](docs/demo.png)\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","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"},"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","_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.1","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.15","raw-loader":"^0.5.1","style-loader":"^0.20.3","@storybook/react":"^3.4.0-rc.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.0-rc.1_1520937440295_0.862666134721231","host":"s3://npm-registry-packages"}},"3.4.0-rc.2":{"name":"@storybook/addon-knobs","version":"3.4.0-rc.2","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-rc.2","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"b5aeaa9ef40536d083ef738d09f57129416974ef","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-rc.2.tgz","fileCount":81,"integrity":"sha512-8xyDcW/jh91TIWdpuZy8eb13gstML4lCKIB1XWT8sx8nAyALA6ph+mfpWuOSRk2pHvlpATOm3Xx2ssNoem1Oag==","signatures":[{"sig":"MEYCIQDiWf4zjLw/gN0eUGJrARzyPDHfz4CRoEz8c9pYzL5xEAIhAJ1lRDDGLhwsGn252L1maKuy7heNuhoobN1LFRZ+gLcV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284483},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](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```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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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\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 (<div>{content}</div>);\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![](docs/demo.png)\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","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"},"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","_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.2","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.15","raw-loader":"^0.5.1","style-loader":"^0.20.3","@storybook/react":"3.4.0-rc.2"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.0-rc.2_1520939086548_0.8583081662161454","host":"s3://npm-registry-packages"}},"3.4.0-rc.3":{"name":"@storybook/addon-knobs","version":"3.4.0-rc.3","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-rc.3","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"07cd5be49b2091524f127c729461af795747b02d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0-rc.3.tgz","fileCount":81,"integrity":"sha512-hMjckfN7hqzY8OyQqUhRknsDvm+3JTYXnAYOTYuVGoHITZgxw0q3j6T6ZIQ2bs2gXO16W30XTE8aAoBbU71wbQ==","signatures":[{"sig":"MEUCIQDH4oNTc+nKBoRM6Vdl88FJoB3gXIFu8y2kfe69sy3QkgIgfMTCxEp8PlCMQzcp0JkElS1AuXtAW1J5WyPiHFZDpKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284483},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](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```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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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\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 (<div>{content}</div>);\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![](docs/demo.png)\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","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"},"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","_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.3","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.3"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.0-rc.3_1521500686524_0.14247860191142347","host":"s3://npm-registry-packages"}},"3.4.0-rc.4":{"name":"@storybook/addon-knobs","version":"3.4.0-rc.4","license":"MIT","_id":"@storybook/addon-knobs@3.4.0-rc.4","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"}],"homepage":"https://github.com/storybooks/storybook#readme","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","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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 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 (<div>{content}</div>);\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![](docs/demo.png)\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","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"},"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","_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"}},"4.0.0-alpha.0":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.0","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.0","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"5293e33cef20e74d6b8ad796c22bf035d21ded2f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.0.tgz","fileCount":88,"integrity":"sha512-KL0pEDP0cNUZ1+WQxl5joJxPD5Il6j3dIgaPmH3IAVRnISsWXHLx0UprxhlogGVqkDAxVb12KfxryQYMNT30Aw==","signatures":[{"sig":"MEUCIHn8xZvfZQdPI75+S44LrigHpVCA01af26L9nlQUBDxsAiEA2dl7eePP2qVXnfDkbOc1U06Yz4yB+KMH2fWdMNykfpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300328},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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 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 (<div>{content}</div>);\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>\n> In the case of Mithril, use these imports:\n>\n> ```js\n> import { storiesOf } from '@storybook/mithril';\n> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/mithril';\n> ```\n\nYou can see your Knobs in a Storybook panel as shown below.\n\n![](docs/demo.png)\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### files\n\nAllows you to get a value from a file input from the user.\n\n```js\nimport { files } from '@storybook/addon-knobs/react';\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/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","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"},"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","_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":"4.0.0-alpha.0","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":"4.0.0-alpha.0"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.0_1522301677756_0.4702352811105057","host":"s3://npm-registry-packages"}},"4.0.0-alpha.1":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.1","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.1","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"78f70383db540ba6d646e73731c27fa4d449f148","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.1.tgz","fileCount":88,"integrity":"sha512-Ahbljuno5ZhNAhf/ELk/2nf4eTaNRfKwGT07B6BdWKsyQ5HGZr6rFaqf/Kl0Kb5djv9dZb9NmqlRGpGRl5917g==","signatures":[{"sig":"MEQCIALU8a2SnLwAaDC7nkzkUDFVOfxIY+hajKjXg7Scqk6eAiBXR1bud485zmtOfrs+sF5E5y4uLjCGscImj7/e1LUE5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300328},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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 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 (<div>{content}</div>);\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>\n> In the case of Mithril, use these imports:\n>\n> ```js\n> import { storiesOf } from '@storybook/mithril';\n> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/mithril';\n> ```\n\nYou can see your Knobs in a Storybook panel as shown below.\n\n![](docs/demo.png)\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### files\n\nAllows you to get a value from a file input from the user.\n\n```js\nimport { files } from '@storybook/addon-knobs/react';\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/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","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"},"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","_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":"4.0.0-alpha.1","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":"4.0.0-alpha.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.1_1522337358592_0.44655590757611896","host":"s3://npm-registry-packages"}},"3.4.0":{"name":"@storybook/addon-knobs","version":"3.4.0","license":"MIT","_id":"@storybook/addon-knobs@3.4.0","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2542f2871ec53f5db5a683a0fbbd06fc455c0f4b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.0.tgz","fileCount":81,"integrity":"sha512-gBtAPwT3xRtnSq+IympsL90Q2R1+NgwfhdHm1YPLaHHK0DXYXMDF3pdhx22bDUa2MJQs3E2FNB1GGQA+VviwTQ==","signatures":[{"sig":"MEUCIEDGXvuiPLbtIDDv0TrCSPP6jaD0tJ0Vmhadsb3qrK7PAiEArwWHjrX7jmeBiom1tNZKfJL/Qq7gzF5SskMccquXJpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1285091},"main":"dist/index.js","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"},"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","_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","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16","raw-loader":"^0.5.1","style-loader":"^0.20.3","@storybook/react":"3.4.0"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.0_1522453496068_0.20032293135896584","host":"s3://npm-registry-packages"}},"3.4.1":{"name":"@storybook/addon-knobs","version":"3.4.1","license":"MIT","_id":"@storybook/addon-knobs@3.4.1","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9c23abf62944280d2d681f0a356fea67683a892f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.1.tgz","fileCount":81,"integrity":"sha512-f+EtY9a4SUbVC+b3WbnpcIlRhMVLm+M0sESFQrBUOvz2s/xyAoT0yzeO822ajoQdu3aAj1OpG4yw9rOprL0jGA==","signatures":[{"sig":"MEUCIEUgkvjmqL+WH7RN9GQG3hxWopXILSxG+hha2rP02sfgAiEAmmZUtTV3U1+LKxHT/CvNV5aVHFTqeXxXj2mZBA8142I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1285091},"main":"dist/index.js","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"},"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","_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.1","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16","raw-loader":"^0.5.1","style-loader":"^0.20.3","@storybook/react":"3.4.1"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.1_1523399668023_0.0825627839607872","host":"s3://npm-registry-packages"}},"4.0.0-alpha.2":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.2","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.2","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"4db035b587d73ce1877cc65b0c5a825669d0b9ae","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.2.tgz","fileCount":88,"integrity":"sha512-O1mt4yD7hC3IDDwz/qG1wfxSaU3MWbpy0S25Pu3Skynec8R8wdDqb0XAMkhVNwS/ksx/oMCFP35k/LJ+3lq6zQ==","signatures":[{"sig":"MEYCIQDezgU4eQtNTMns3CKgzpdI9jmUq0yZnxNHdwGiFvOLJQIhAMzURqL6pB0yOysMVDakIAIeT6hXnN0UDcHvxFTZVsA2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1301070},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](https://git.io/vXdhZ)\n\n> Checkout the above [Live Storybook](https://storybooks-official.netlify.com/) 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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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 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 (<div>{content}</div>);\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>\n> In the case of Mithril, use these imports:\n>\n> ```js\n> import { storiesOf } from '@storybook/mithril';\n> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/mithril';\n> ```\n\nYou can see your Knobs in a Storybook panel as shown below.\n\n![](docs/demo.png)\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### files\n\nAllows you to get a value from a file input from the user.\n\n```js\nimport { files } from '@storybook/addon-knobs/react';\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/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","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.22.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/addons":"4.0.0-alpha.2","@storybook/components":"4.0.0-alpha.2","react-lifecycles-compat":"^3.0.0","react-textarea-autosize":"^6.1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16","raw-loader":"^0.5.1","style-loader":"^0.20.3","@storybook/react":"4.0.0-alpha.2"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.2_1523407313799_0.14593925371117988","host":"s3://npm-registry-packages"}},"3.4.2":{"name":"@storybook/addon-knobs","version":"3.4.2","license":"MIT","_id":"@storybook/addon-knobs@3.4.2","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"31baf535cafa9740d96b2f93197d688fa30b97f2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.2.tgz","fileCount":81,"integrity":"sha512-K59L2yrAKutPrwV+bh7fYAVA+tpsC2oEEGBk2X53L4wOfeLfxKEPSefGrGZit+msGA1z2R3LOxJccA98mD18Mg==","signatures":[{"sig":"MEYCIQDMixRYIuFvN6w9P7NC5N3TzdhjfuHv1AdOSqFjwqrjXQIhALvANlVnsbe39u4jNraANPcDSYHcjh9GkLn6f90D+75x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1285123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1n/kCRA9TVsSAnZWagAA7rIQAJ9cD7kbZ0ulijUeRyf/\npoaClpS+GqIepN4ZjoklY2y1V9zI+ZIVWd/l81BsOK7cRP/tPlgQ5GYaHp9T\nmASsU2oahNgrmQ4WkljQWRPR17X7FDqxYynBWVfjlToSS3TXuOk9OXUF9eYw\nI7GMRiQTRAMwSZOaNW7OvkCZ7Gqk1eLaznAEMSx7+8ylOv4poOd0GE28/iA8\nOfBFPlardjdvTUNGoXNVCMK940hPy//BvkoTcfDeDYuftRXowTEPU39qnw3C\nkf01mexUC/AtbG9ZOQ2xAsAE/20poMzNQikNaGGeg7FLS1q2JmjBovBlX8Of\nR9msC8/klINf8fQ+TpyIvgTJYO33v2UyYMSK1CRdbPenQtI+6LBUxSeRrv9U\nYhMumXeHYj+4NH/KPgfXaK8LIaJ3tOmQsdr96mP1Dp6liJM3SJroaniLgzVL\nLm2yQoakXCn/uUDKsMEGzXjHgteHn6nlky9rNfskZS9NRS2iszqYnhZL/kLu\nE72WT1w22Ka83HnYSALW4GEKGcerm8rO1Ond0sti6nKEYdcQdn3A5SprrS2u\n+gpPcoA2Sfiz/6KykWOD+MOeRFlyjSwstZeJs7PsaMS5wGhzM1WQc/SVI3+e\nY6A1M+TqGg818s4m4DD+paOsZZpqvAZU57lV/c3AQZVOCKEY/pVsl+1oBdS5\nI3Ty\r\n=uuba\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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"},"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","_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.2","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16","raw-loader":"^0.5.1","style-loader":"^0.20.3","@storybook/react":"3.4.2"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.2_1524006881976_0.47304987356675676","host":"s3://npm-registry-packages"}},"4.0.0-alpha.3":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.3","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.3","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c2644850ea29fff30193329d8308e0bce2596f8e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.3.tgz","fileCount":88,"integrity":"sha512-wGn1/uufYPf0KoEoqqpeCylMVaw/Ywcl/IPOuXE4ULtlWr/DFPLFe6DFWd1sYJuX7ok2Jps0vQzQZ4MhE390ng==","signatures":[{"sig":"MEUCIASap56XfZ/99tsHG5p+bKFAm2h0C3e8gtH3cCzw5b7uAiEAg3pQntGzdEOMPpAqjzjx8ewDdlWEmWCiGDhGgBvQThw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1307698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1ojlCRA9TVsSAnZWagAArWIP/jmbnhAq6wg9gEBuUtIu\nY5dD6hdsOkx1t8rUAgqbgfurkI6kcIhPKQI/5fZ5c6Wt0ifpJMZox3uLkm7f\npqcFDUyXtJeNkQwQNTAuqlFWTy5u5eZ1mXdY+3xWDcSbGDXPX7VmBX5HqoF/\nR92B//NvpNmrFortAVbAUjh1xjcjj+4ym3n8UsYoiKDbbC1JlGwYrZ6gMmfv\nn2Mgwjq0HFvUJBKQhV4WtM1dOwWAcMBfr6c2VPbq3bFgEUpIk7/z1SbySOPD\ngQgugQTtg0hdDPkr2xZGV/9sel7FrO+yqbGuCO1JfpIUT5KKF9xGXUL8FaSn\n/ovBVZ4Kcy4n1pLQSdlQH1ASJcQnzcyDLevCF88u5Fa5kaaqFZ/ZjPC5+7KM\nIbHF/IPt2L/GXkP+ZgHbBU18NkvawGyFE+ziDxhFX/fg/4cCd3i7/F0ieA8O\n1marZ3x4BKag0a1xx6CvD7D5GMtWj+lo1bnmbRJ5GCDmEEobeJrn7bUextBA\nVvLHMHZ4BoRHzbh6wL6WNQdeJHMr9t6X1b7ElixyIhnqM1Z/4TO2WA09MDfG\nJ57a9UAJB1SJaQ3a2HuuZwTtBtgQ84zZy5z0XFgFYfsc1xIw+K2zR0mQLK+t\nTlI5jygp1rx/HCGoBx+FQ7rZBEqhYPvxtf6TgdUOXEdhE0nENjaP/4cta9xP\nXTMx\r\n=Sdfo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](https://git.io/vXdhZ)\n\n> Checkout the above [Live Storybook](https://storybooks-official.netlify.com/) 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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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 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 (<div>{content}</div>);\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>\n> In the case of Mithril, use these imports:\n>\n> ```js\n> import { storiesOf } from '@storybook/mithril';\n> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/mithril';\n> ```\n\nYou can see your Knobs in a Storybook panel as shown below.\n\n![](docs/demo.png)\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### files\n\nAllows you to get a value from a file input from the user.\n\n```js\nimport { files } from '@storybook/addon-knobs/react';\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/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","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"},"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.22.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.1","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"4.0.0-alpha.3","@storybook/components":"4.0.0-alpha.3","react-lifecycles-compat":"^3.0.2","react-textarea-autosize":"^6.1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16","raw-loader":"^0.5.1","style-loader":"^0.20.3","@storybook/react":"4.0.0-alpha.3"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.3_1524009188859_0.057054192459530695","host":"s3://npm-registry-packages"}},"3.4.3":{"name":"@storybook/addon-knobs","version":"3.4.3","license":"MIT","_id":"@storybook/addon-knobs@3.4.3","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0d002c3519470787d1dd355106ccf391e462b3cb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.3.tgz","fileCount":81,"integrity":"sha512-H/cq7zw435liFeL4zDwcNSH4pTjJtBwW6LekYUg9CrOkwTAN9Q165k48gbmZFoJU26hYuNonhaZUzMWzdKIrdQ==","signatures":[{"sig":"MEYCIQDMLQFPbyON5EpWzw8rZDUlDYqrYUcL++/x+OOAORDmXgIhALOuzUsvQOMUCZPFA6dCa4CHNFQhrq0Lio+Bk8yTOna0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1285123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa43WPCRA9TVsSAnZWagAALvcP/3E6z12JqqepSGCWfEr/\nB8wYGu6BSsSTsc5diGvS7cPBB3q8MBgDFr5AaWSwsdzYdjWZhHYaUowhbwYT\n5nNe3VdTsIdWcqgxFZ0/bIftMZa7mAvHZLT7ozTHLxn2/lhGcXh8Frype8KM\n9ZAyvLPeuMsr7BOFfFC+VVgrjmt4FzH1J87PkuRzWIqNH8phzDva2IM4jPJp\neck483PZ2zPhicM+ftpbXR14XwVeW8hIP0OaWqI44b3BvapFMrAbHGJQPjVp\ncPV8+aUc8ba+ZnsxikEy/H9W1flShAThGcVlfTEK/mSEm4smaPt9U/vdvATA\nQCvcnHp64BU9nLzesLkqGF/sBEOcACYHZxI7YFG444cr3SgIWJVFRNLnCf50\nFnAqbORRoraNrwvwPbLgNlNdoKuK1cMz5+/FiyskFEomaKiaTVhOS8NaEorG\neDc9MlRk+cHogVG5YjRK/hbxiAg2LW4/pRHjxDaZKAJLCfQlic5THVD/wNv6\nR9mviQHOB5mfVYe72poKw6igxswFrURsgLLdZLlSF9w4KuHZ1OJO/MKXHO8i\n35wBfRmpEO5QgPVcVg84WsSjS47D5JWvpEuqPDoqNV5VkD/FUx+3Rhcl8gpw\nLOtPcpFSoMtYKqSpcUovlqeUlYd7mEnz+s+dlY1aTjTW5TDKPGECWasvcAmi\n5I7m\r\n=qLcP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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"},"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","_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.3","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16","raw-loader":"^0.5.1","style-loader":"^0.20.3","@storybook/react":"3.4.3"},"peerDependencies":{"react":"*","react-dom":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.3_1524856205664_0.7779799659975728","host":"s3://npm-registry-packages"}},"4.0.0-alpha.4":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.4","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.4","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"d15e3b8532317aadc513554eba0b7c7cdf3273a1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.4.tgz","fileCount":82,"integrity":"sha512-7tcSdye4wZau/BgZgBLG/D+wY6lONxJK5zbNZl9ZhugArDTOfiht2rnVFpzCKhl2Q51Nbd+dKb+KUoZ7A9uheQ==","signatures":[{"sig":"MEUCICHKv3UDOfu/nfzxwrkTudFD450pPxclcwXcHFPlqWmCAiEA4BQ74h7o/vwwvQCZM6Yuzn0mYH0n9LLuCwW16H5tFbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa435CCRA9TVsSAnZWagAAqCIP/iFhBOjf1TmCTkJa4UPj\n9PbOss/cRwYNSCSRr/NZbDmezg4YYVU+W6mYlMPYtj7zkdeBySKLidOZw6nX\nMYrGQ2uaiXmPiPJvLlGIxc9HGw21vzhht+ZgTiQ191pXTghUlXL/B9D/R+Tz\n2Asdv/YruBjO6GJWYTpc8TYWurGhC1kh7mx0Z4fcQNrei2Xg/eysAj6ZMSYv\noR51PCy3lNSoa7kzTkfeFh8GLdG/lWY0m4N3Vng1OwntuCNPN8clv1kUz3xR\npKHmSh7VIFg6gCu1u7qabDBNEuFWtkm7/OzZxNmVNKno6Qfl8eqRD5nBi1xV\nh7z12aRPmL2IuLCNerTOCqunLBLgPmwKHktHyZ2vkRHCh7YwiL8cpdCgbfeF\nMXkSdpUHKjgrgIegIaynioKmCAG0CsvRjqJSTqQpucva8y1dZBjPLfhPOmLn\n4R2Kz+HC0vSIXcy1nnwNicMDX8e1sleM9Nv2VFqAlvP9X/1AzHI4Em/+hKsc\nBtQ5h8xq4azKNRojFviMr8dUAgu5U9Z3gLPkYdszPHng6OKX8YsEavdISnds\nKFjgFrv2huntw0lEhhXYzz7E50Tfg8o5CEtM8g/eRMSp5G22GUM1sb6mvDDD\n2F5i/IBaxNYDFbPvaSxuP4b4oDPlEPfFx0kvsflrofzjcZoRRx8av1UIScSc\npLUz\r\n=Ajts\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](https://git.io/vXdhZ)\n\n> Checkout the above [Live Storybook](https://storybooks-official.netlify.com/) 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  <button disabled={boolean('Disabled', false)} >\n    {text('Label', 'Hello Button')}\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 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 (<div>{content}</div>);\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>\n> In the case of Mithril, use these imports:\n>\n> ```js\n> import { storiesOf } from '@storybook/mithril';\n> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/mithril';\n> ```\n\nYou can see your Knobs in a Storybook panel as shown below.\n\n![](docs/demo.png)\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\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### files\n\nAllows you to get a value from a file input from the user.\n\n```js\nimport { files } from '@storybook/addon-knobs/react';\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/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  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","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":"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.22.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.1","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"4.0.0-alpha.4","@storybook/components":"4.0.0-alpha.4","react-lifecycles-compat":"^3.0.2","react-textarea-autosize":"^6.1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.4_1524858434160_0.28667986604787354","host":"s3://npm-registry-packages"}},"3.4.4":{"name":"@storybook/addon-knobs","version":"3.4.4","license":"MIT","_id":"@storybook/addon-knobs@3.4.4","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"96043d68ac382084a9e9d208a084fe58e968377f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.4.tgz","fileCount":75,"integrity":"sha512-4nYziRR1waIZl+bx/NgJ8Rw4ktEKBmczysLKPyAfLHR9vP5m0lVCJ/tcUEuVnSfnkw6TgqtmFpUV4uEi0AyFnw==","signatures":[{"sig":"MEUCIBhLCSt4iuZ5Vf2D0ibnVWglcjDcYLg9VGeKPyUWNNZFAiEAtoJemXCEIH0BE4r+ou+jHHae/Ms5pPcrXAWgSYcMeSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa90UeCRA9TVsSAnZWagAAqsIP/j9mqcOeRbCB2KxL/St2\nReGKQAkGKK2EP72PvXmhHAMVyVBttxtHXDwTBaJb/HDKWj+sitRAo/gHDmk1\nd/ZyJbIYKMck/glqX9eZMgSlNk3g2ukkKtXYmexNkKRQpWZeXB74l4yRGmv2\nht/i42xFTj/ONWTIMmSatWO5P57e3qqhQH83GnVC17zZsPJFZvVWA7wXjZEl\nnfrCchjzCjx3PUjAwB2dh8B7lutsy9qlOajIRYNFzDNP2i5rmgKszu9AybCk\nV8Aw2Q4gHPbr00hur4VJF5CWWBR+ALfAf49AXEiIMxgmJ47giU5ZBkltPASG\nNphe3/CaPdwhETmfkfMzUSkFOrmauhsty8fUHqI/twGacltLMciy7MwimH1j\njVyU9Z0eklonX0FZQqj2grF4xNTU1qxwAnVi+/99gD1tU66l55H+O6SKPG+C\nUUDflZ4oReEaJHLSbW7rtnFivtFbYxpVe3ezj0rXtu777aEYKhveNo00xvhb\nZ9SQlKppVNzbnYJvClQ4a31lPSAAMS6WyJmp6oQp9bf5bE0KXqna7kaM5UIR\n1LSwXckvt4qaE0TB3A2ppxhVDHQWQAgWI6sPYJMEnT6ujLxmoQQlLeMeCAZW\nNvDZssNsMQpBC4gpEkDNddYJ3nZvYo8T5hS84Z/i/7wymhcF8MkxFkspg34a\nBoj2\r\n=OOim\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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"},"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","_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.4","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.4_1526154525457_0.6331593909903448","host":"s3://npm-registry-packages"}},"4.0.0-alpha.6":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.6","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.6","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"7d28caeab42268f12bcac8c0f8233ce9272737c0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.6.tgz","fileCount":92,"integrity":"sha512-qUAZd7LIakdR5DDtksFk/LrDrxN6czSDL+S8vc1CbsMEW15r2KMmBFpRc/uyKJ1Pbw+0+Lmy1iKrh/rE44jpPQ==","signatures":[{"sig":"MEUCIQCZp2a85hp8+Pqjr09iBTt46l421ObpUYVc7Q6gDxgEPgIgGciY+yezDOL7mIx0GOVX1HsMYiioUuTjWIfz/ev+wtg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1314925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa91AECRA9TVsSAnZWagAAedMP+QBaRQHPhKl25ZHhMLOF\n47BlrdcwAJ7fyBPKXTVJr+Wy2wD1YQ50SGvXWZHiuSpfXAE70Wq8d5fQTh9h\nvZD6StMoDCL7pbkZ+NJDO16H87/DlFPDFhS1sTMuxU8ZSyFuP1lJkwbZTgRN\nI43ipJKtHKYuNbYC5ImtFqqZjtfbMEWDZGsy1zZvEMJjluKWk0HyhkThQihB\nfFZrdvawEz8LHGKXEXpZGliv0H2z4ShTQXy1Pd4+WDTiN2pNmvGVmSBVoBg7\nDHiFHwmosm4jZ+696cQsajYaYJ43n7kejAkHw8YwBzaZ4oY1g4IdYJSANack\nyRJ6Y1GEkSQBm7AmW3M89/TK/1S44JZcDnhmXvG3Je2OFGOrldY3GubELDBw\nWIEYUQWqBG6WbL2DXvoINKe2iYXrlWnNIoXi3vA7QubxZEgFp8bmwe+2VHN8\nZBiSIigaAaCGHgmAkXOFrBBJX0vIn+cOxs8g5JtlyLgtDiXJ/6czxT6EmbbA\n15Ng0qqsWZSQlvI7wh3iqwZbT0NjI6GkgdjXuFVbDlK0aJ9p85SK4wrm8g5D\nc+1QpV62i94IXgM4nBSfqhSRwyyIstE85yW+2DRs1XDJjdOJjrhq0lnB7FV8\n99YkvY12eFDZDUCTH/7mv/u1RQ/euH9IqUJYDyWpUOPMVa4CreHHZv3qBOlx\n8QIx\r\n=cCEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![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/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  <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 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 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\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>\n> In the case of Mithril, use these imports:\n>\n> ```js\n> import { storiesOf } from '@storybook/mithril';\n> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/mithril';\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/react';\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/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### files\n\nAllows you to get a value from a file input from the user.\n\n```js\nimport { files } from '@storybook/addon-knobs/react';\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/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  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","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":"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.22.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.1","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"4.0.0-alpha.6","@storybook/components":"4.0.0-alpha.6","@storybook/core-events":"4.0.0-alpha.6","react-lifecycles-compat":"^3.0.2","react-textarea-autosize":"^6.1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.6_1526157315583_0.6049847114028273","host":"s3://npm-registry-packages"}},"3.4.5":{"name":"@storybook/addon-knobs","version":"3.4.5","license":"MIT","_id":"@storybook/addon-knobs@3.4.5","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"6ac34c1845b0db6683455e1edbe15993490fc18b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.5.tgz","fileCount":75,"integrity":"sha512-84YWoMw4Ht4KFqkDf2YiHA7/TTWN1Fq1ckUe7ZLLfu/mVzv7CRMhJjb5hOEm2Sm8h879o2YEd7qz9+cAuzrOhw==","signatures":[{"sig":"MEUCIQC/hp+W/EtxTQ6y1ni6S4PAZqJZ0uaYN3v/Xaej1qZtCwIgUmCdE/sfvyLIoPUbSIwTZXqS/xlUTi7+61tvDyKviaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa/f58CRA9TVsSAnZWagAAAwIQAIvxZXomHWqE0mIwtYU/\nyhutZ6ce3wxWh6Z7ltYHSi2PbB6XElwwHBgfc8tWMyiFksclw96U1ZaTcBVl\nXoPZSNQuvnp5pzcRtPwJStn71e1dvIeLX4rj3cGshSigVkfsty1lpQTltGXO\nTAuPVWOTx8cupn3mmZo1wi5NajR441L8TGO+AdbYXu0wJO8NRFmwgvbmpp8C\nRBwFZyeDlnhDNWk1Jto9QeCOMJKeyIJ5BPQeqt6Lst87uK7gG/0t3k9lvmlC\nr3Xj1aUEEozcYClkk2dJ6f8zyrB8z8/HS0VR5z5J9VrGrGROohWLE5J9SiSS\nORZrjsz9UpD/qyL4LeOmFE7Z/k96fCnERUyzEteEAJ76cLYDCDRgd261Rvn9\niQpO2C4GHl8ils81IcvyhfS7WxmFY2aUctApXwqmBgGD6SCz2XnbT2iAaEh3\noAPXbVBovTJ6EZK6mLgYlax9fHPbgM+DrZFO1rVZxr1LjTooLxrSZA1hSAln\nlifEBLrW3ZZyQmNx7jKrlvQq+ygqoVn216pFxalMpn0PTjPYwB+qFTEDsauE\nAv0v4xOjYsIn52eZrIrkwnI0VKB7PQMtnxJJyEtAIO4wcgeJuOzDzLbIwil6\nzyOqcxxSjd3PEjgekcbkG7PaJyGSibE8ce1VyNlJb4Gj2pdEAfjecX+WGZTs\nHQTp\r\n=4CsI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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"},"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","_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.5","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.5_1526595194950_0.4532062298357995","host":"s3://npm-registry-packages"}},"4.0.0-alpha.7":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.7","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.7","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2d610db23b9cee2a45b2d1ef716fcb165c9ca0f2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.7.tgz","fileCount":64,"integrity":"sha512-HcxD5bDOVplwOpmyqk7XnqxWCCwLOx0tiqHZVirBEwJ+PD1QGQsoOiu0Dxd3lRoFRqU+6AMLLcg3DB0GzuNfdQ==","signatures":[{"sig":"MEUCIBh/QXPWp7Tj72+w2zJdrJSVdVN0vi4eR/EjDTG72G4XAiEA1UqvNS9U5+WuSz+hYjqWPb5IIHgOghWX/lN7smPjjbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1249141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa/gq5CRA9TVsSAnZWagAATjwP/if9dgfgTNsnS7RvnIMH\nqxrwwRtdmb0+Vzypg+VCXdMFPsekWIgXgPIq1S3dPlhBb4poJHbZiN+xCsOy\nZZdLjOV50sMetkPpqZCWaJuYD15mkQpQg8gDHAYmE40QfsjlThmgT1/4PFeJ\nLnfyKQoliDcghSJTxMMg9jbGVCnmthmAQDHiqzUnr7JWLDJEFNL0noP77Hqe\nofMvDPheKS8GE5EixfCXQs96flOI2uPWrtQ9xP8OPjwr27AUkoWeXuO8jO7T\nsGNAYo1ogef5mTmND80+uICcAUBBnq8jvVrl940wbU1DcIih5X32PuPjKkFG\ndGP6xIjZZ0GdOYvhyhmq5p9EXacbC9xXDtTKDipysUaWNpYIqMWlHRatWvkw\nBmtC+1wYVef4QnsT9BeZ6xnGtmavgI0yTmayRMFjjtMuPTTXxQLzqIB0jn3e\nzEnAxbjxm+gb/hNoVE6q9RkBdWe9GH2GvFhRhUcdVOwxrQo3k48LmDNB9O+Z\nWMhZNIbI1WW1pkWQQHLmdHSiCBO/z22zAGmCJFNGe8n/h73oNBzTvYV3tzhL\nVVm6QzKzaQWBPkdpGibdlZtGXJw4ljU7XjCQPphTWVID0Itg4KckZP8ksBsL\nZcCohI9/HHKiI4HY8G+ATW0mDs1DqwDOoubDfgNMYbTvHTZn3lvYH9Frnp+g\n5jZy\r\n=5GxN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![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  <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 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### 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 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';\nimport { withKnobsOptions } from '@storybook/addon-knobs';\n\nconst stories = storiesOf('Storybook Knobs', module);\n\nstories.addDecorator(withKnobsOptions({\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","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":"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.22.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.1","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"4.0.0-alpha.7","@storybook/components":"4.0.0-alpha.7","@storybook/core-events":"4.0.0-alpha.7","react-lifecycles-compat":"^3.0.2","react-textarea-autosize":"^6.1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.7_1526598328658_0.9392832487003024","host":"s3://npm-registry-packages"}},"3.4.6":{"name":"@storybook/addon-knobs","version":"3.4.6","license":"MIT","_id":"@storybook/addon-knobs@3.4.6","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"900586a218e12540256884af7a0ba1f684f1f436","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.6.tgz","fileCount":75,"integrity":"sha512-rEaLM9LyU80UqSp2TkonCAxLlvYTIg3Q6+1fWgZ+b2CGT7YOPjchMcPn7oyDz0OgWbJvzBFNTH/WIAE95mHCew==","signatures":[{"sig":"MEUCIDQGphl1YkJmCYLYrm6LtsJGOFOQ0nZ7BzMzTjuYsIirAiEAu3JmwI/z0j+bhYNDTu1fA81GG1QG8p/E+EBeUPI1Rlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbCf5dCRA9TVsSAnZWagAAnd0P/1tw8xzYuUKpp2i9iGUJ\nlo79nQEnWhDptc64LQGF7fNASFD18tpaidApW59KwNBMbmzPB6vs/a9wkrJu\nqTQRHFWJ0Mck8Bz3Y8xfJ73lKlXAfvW1LeCh8wzP4gYiRbrYrJWNF0LjsxRo\n978QlNq69rIhMV64dm/T5HrTbSgX0uVuAQwFFP+EdJ7Bxbog2YKHwfJWRppy\nMh4qNZxseN3lKLavjLgYh1d/Pj7FdpeLOwE7TfN2eevOj3YVgBUp64YbL9nW\nYNT6cMk6Vn46L9DVYwaEeciCoRvfTb36W+wndqlsqg5YoAnkt7ZQJyhYSjmX\nypSL5MCKOIGyKQ7VOFazaAkVDEZ6AQalXHgL+btJ1c0O8vIW0jeZlCCN+/pG\n4kEdY0PG+CEyCw5ZfAb0vVhJqGrAJ0noT7FNgKSYrEj88dZOD4azWuQEN7rO\nmakRBim68J1qtSX+KusdFDuxsvX3exHZ7e+ruxde6HqnFHIS+8UpF5IlsuPO\n6FE5zd7Jr38Hf929Fj1anVM5DhdQi7uhFfh2BMMQFA3zRzhA8jT6IGd4tpLF\nfn9ayQAlAVcL8xwYsUPdrom1i+YY5GPqgMGHFkQA3xoxEnF78CoC+pyMT5XJ\nWjGHArgkiYfc0fulB5T2CprdfqKF+e4w82Se4v0otZ0LOTYLDls864S4NPG/\n52Sn\r\n=8Bm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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"},"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","_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.6","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.6_1527381595815_0.22960150778909516","host":"s3://npm-registry-packages"}},"4.0.0-alpha.8":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.8","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.8","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"a597eae37da96354dac6efb958f6ee23e4ef6df3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.8.tgz","fileCount":64,"integrity":"sha512-bmuR9ltcDFNxoEW3DUlw/00Ifi0wGW3UvEljzYq9bNOK7EuzB2IoFdQwLAF1DFYbf+t8sebTHy7VZ5woCv9h7A==","signatures":[{"sig":"MEUCIEUF5Kro2mllN2uc2L+Q0XeZBnzyh26m4Fnre4cGga/FAiEA+veeiZltRrYbrZFNp/oBCmnIwABWGGEAw2gwM5eVLiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbCg7ACRA9TVsSAnZWagAARqsP/0R1R+Ob73A0us+0uBVS\nqG8vGj1aJ0fNrpG3ycrlcUmSRl1HkR1dx3HLvpImNocloiJUoeIAjuZJwZMS\n+ft9xOVRjzWT+7UJO6drsRTXkEiBd7HfocTgyX9nYDV4i2eURM1rvXNhamHK\nOfWIloC8uVjeAjmMCzzmiwv9R/6r/InJVReXqAnEtUE2CyRnoEQyUzFeV2B2\nxaz6K2X6CYxHXues207mvRcfJbI7mZbX1IRxzfFmMOhscnelznB6nGSf3osb\nCtrvmS25rlnxN95ZjRhrsgUXt9zGO3n0Y3OxnNrCy36Mi3DcMU97o2LUVKZy\nhH7O9g50PAy5SCDcvcVvzux1yGeUSXmUPuBgUiP+eR19fZcc2K157TgKoTov\nEdyjtc9a504DM+i8pD+2dD7aDOVe3UXNoHEga3jzkBjqYabcYMaWIbR03nZi\nx/yRrddkUtR4JYK3EnESNt21sElCsZdRAhgFX8FzzwX0G+Vy8qaoYNGjMacH\nl2zxyhp1eXb9ngSVHJTLH41FMgnb+H+GgFqF7xpid5rdmkzJ0pphyyItPuxE\nXlL9UfJr6Jeuitg9rPeZsex2nBeW7ZIfIwnW4CD9cryFE7ra6qsdVfMJnbbJ\nCUMivkam91PvmiSbRvaz6RwhOHGLq26pHqAfru3HNq8soEwvWkrWlmUtrqYE\nt8Os\r\n=6w9Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![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  <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 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### 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 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';\nimport { withKnobsOptions } from '@storybook/addon-knobs';\n\nconst stories = storiesOf('Storybook Knobs', module);\n\nstories.addDecorator(withKnobsOptions({\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","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":"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.22.1","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.1","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-emotion":"^9.1.3","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"4.0.0-alpha.8","@storybook/components":"4.0.0-alpha.8","@storybook/core-events":"4.0.0-alpha.8","react-lifecycles-compat":"^3.0.4","react-textarea-autosize":"^6.1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.8_1527385791742_0.7481473111173802","host":"s3://npm-registry-packages"}},"3.4.7":{"name":"@storybook/addon-knobs","version":"3.4.7","license":"MIT","_id":"@storybook/addon-knobs@3.4.7","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9e8f7827e3743ec76d773dd65a3857d538d0aa02","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.7.tgz","fileCount":75,"integrity":"sha512-xvmS+/na3sO30YiAuSk7+i08X5dtestE36dTLmljUNv+HE7xkgBY//JFQkIExuuOdUMn3aFh+bn9Zgg/xdKUEA==","signatures":[{"sig":"MEUCIQDVED4i9291a5p0ea8JrTyQLt69tTd2jEtzd/tnpdIe0QIgC4JcsSHzA6+VRYBqIQufxre7peLerrNU417s+nekJWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHKlQCRA9TVsSAnZWagAAoY8P+wdtrIeLpP9uS7syQueM\nVIa18oN8GOLsKlEi7HxaPIRsy1SPyrm2ZUVTWjAZEUH/HyoF7nJC4cMXFs5h\nGTkZS5Ze4RYmG2LFWBC1lj/0dxfP3IW49pjeqmuFFTlVeDYsN/MNa2Ih+Nw8\n3dGSDbqGkBd4aP316IBQpKIkdzya/2SfWoFteLqang3UMd4mSI8qRTYYVw4N\nZ7RjdI1Nd4TMIOyKm3y4JHaK3/tMwpo8EpK4X5VtFHpBY0gyFYPABKm/ys+X\nvA/OYfrEqy4NCo9mureBui3EOqbQ/464U172iH2RQWVlt5+APR0VQc7aqze3\nNMPyO8x1KYctntnkO4uTCNN340hBiXgrbweZB8GCDrEW3ewCeTQx2hFjXEcb\nHqXM2e8CI/raGFXqXEnmIJ0yek5TUcevxJkaUf900lxHJkQk0YJnsgcArvok\nXnc21Y9F9aw8QkPzN0yW3nyZjeLR7IM3eKqx6Ao9brW0YhK3VTsTyUFx7nky\nZj875tLTI/H80Z2mD7FDL1dpEf6+0Af/bcXVgqQauVmKTfel1doIGRG72/Zx\nvTKZfP0/VAA8D3uxvY3+1p6sLMthjtc/bqcT5xWCM80OJLZIZPhGpTwDvswL\n8X1aN+VALxNmXJhoBKZQ36pzHvVzBb1vpWAwkL4/5vhL64WtPM1pEOpvY0es\nFex2\r\n=RNTS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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"},"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","_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.7","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.7_1528605006769_0.8853264611128524","host":"s3://npm-registry-packages"}},"4.0.0-alpha.9":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.9","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.9","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"d3de72a1f667a0a02344ec1966855425772883eb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.9.tgz","fileCount":64,"integrity":"sha512-nSRje01MVThRYgw09c1DDkSL77rYaC1qXOiTuB6btsPoIvHHc1pNQXoPdYW1bSqGZbbkZ9G6OCTgNkpbg2hC4g==","signatures":[{"sig":"MEUCIQD3BatVZ54U69Ig122tY6yh6nU6a0nNn/MNz6xPLSao4gIgQqEuc96XyGZ2GSp/uJy+ZJLF2TE9vHeGAe6jiLQCx2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHNcFCRA9TVsSAnZWagAAueIP+QBGpq1uviO/xhUsMH+H\nvHUnlx7ws0xOk8uqHtbx+7hyVlyYm/uxKNeiwyoKrUjLo5ksYVpBFkj/Qf99\nFVsMOkRtkYhDfVShGfZaPeqXxwkUtgkecPFJPVuG6LwCVG76qRnh/Pw//WnC\nP5LfV8ON4u38SBoQHuas8Mq6axHjHak6E3q1cEsqZSCDLjDgsEj15Kk5em+g\n+O3gsQUwq2QACCayG70X/073umooJpr1L7PhUB9MzmVXXjSCNav3LTAj/pyj\nKT0si184GzNePLB0oSsQyIEqdzhXseFbo3k7057Tx2yltKkEIdbFp3stJ5cA\ndNFOVRPDd5ReR4HuvVDU2DYQW4yhFD6Jq1BIDsUGAElFxWRT7aUjCflwhhYw\nrOYPx0/ELnQwZPzg4TNbrhZTAJ5dNH9gldUIba4275bdb9m+3iemoaQv/t/k\nY/2BpJA42QMHasPLWKMaiyWVgGbvvxbnV+R/0DqV2gYSWfOBRUXFqercSDtx\n6Uk2gVj2kqwefWdo2MYy12HSPAZJSHou4iM8MQD/WmuOMRl7gchuuUnONtJX\nL1vXDwmNl0uZep2cHPVU6vpAyenIt1X2/t3sI65Lghv805tFtDH7g7Yg62S0\nja+E7YSfEXMpUbrhQecTWl+j8Cp41c4gkYZpoUC2fZaO6+faTInEImW15Ojz\n6nRi\r\n=ZnHS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![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  <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 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### 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","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":"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","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","moment":"^2.22.2","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.1","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-emotion":"^9.1.3","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"4.0.0-alpha.9","@storybook/components":"4.0.0-alpha.9","@storybook/core-events":"4.0.0-alpha.9","react-lifecycles-compat":"^3.0.4","react-textarea-autosize":"^6.1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.9_1528616708332_0.0024617620954514585","host":"s3://npm-registry-packages"}},"3.4.8":{"name":"@storybook/addon-knobs","version":"3.4.8","license":"MIT","_id":"@storybook/addon-knobs@3.4.8","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"d185cd689ea4509dd9d19601e62f8457361991b3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.8.tgz","fileCount":75,"integrity":"sha512-2iF/vJMAfFPZmTa5mddONIlY1IE807im0Srnb47FspDMvGjJKH12A5JAMO5KeAhkwgsA0zIpWX8FyJrqgHFqpw==","signatures":[{"sig":"MEYCIQC0lJn9CxAEsASrbkB9o4L/sVPA2HcnnMdDKyXYtaHwwwIhAOamWoPpnlZWJcTFGhL8brQH/NMWrS/9CcoDXtKoJIMs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbK6J+CRA9TVsSAnZWagAAOK8P+gL1qAYvsf/+Kj6sGXlv\npLtd6zLrf3FZ8gZU4j1kWHbZjrIlDtYjp3pO6wxhMPmiUe3qJyjRQmNxvRxO\nT5N854uuPdgbmTNGJumNJak4xcIF1aQVpKbyO2vL7Bqtr4it09I4ZLXsZH6X\n5h9AD9W8/+P+WgUb1fBzsuqehP4YTbNTAusheQQRq1qeKZrgZNJav3lAmjfC\nmTjFOEL5x+1TTRxDTQFG/5gnEjCI7HG4IIsss1FOe9oPpHufAo2151x/Gvvk\nJvKHe93CKK2qNnkcTCwHOhUiChp5pCxGpaUVp7th9F/mhM4pvJsQ8SCIV5z0\nwakbYdcZkiOcNUEfQv20ssuF2E4UkhX5SZzwYdaBkuo35RufDNtYDC5U4rzS\n9aPWW9k+K3iRXwt9cC6KiBVLkKzMVAdFi5rZB0VTAeOuhTmvOwRhZic7C+Pg\nJvS7R16lW6JFg2tNrrpxPeUUEsZD+4N/bsrLf1tiYKYfvv+n/VEibOwrFhBq\nhLjr4Bl7JKfzuPZI0ryZTZfonVwN3KA6VxtgERRV7tXsPL9m/8w3U0/TMDpZ\nsDrutG5tLbHM2kWHMY0Jg2I6rXrrn1Mj19BqXKrza+j+2PIMWriHs+vink61\nGInEb/Z60bpbXeBvbqU8qS0RIydUG23qbHMbBlz7boB62zKl38pB1BrzBpPV\n+IDr\r\n=WcOb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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"},"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","_nodeVersion":"8.11.2","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.8","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.8_1529586301923_0.07350999862016527","host":"s3://npm-registry-packages"}},"4.0.0-alpha.10":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.10","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.10","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2cd2dbb1597766cd46aef78c7641e4eeae7192e9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.10.tgz","fileCount":64,"integrity":"sha512-5fYCe+77iQd52SOWY6prkFnzDb5BJHPRSRuJzxj9TsM1C9UNEX7x3UrUpDVEVzhWNKGT6rsFjHjnVVQmyN2jWw==","signatures":[{"sig":"MEUCIQCqgLPSC/96EOvYl/aRkBbsqG+ZdEeSPgS/YYUstnVFrAIgMOb7XQ2//tCm94I3vQ4oTUxhuhZxL/Gh7cjhm6mUMRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbK62NCRA9TVsSAnZWagAAxZ0P/i8nLkdU4mP1IvjDIB3O\nUxSOFH5HX226kKaXK2uEDOXd4oCJhzdTNn63tUmqLulrTnaHNODa1CqeYWIJ\nEHAyfpoMPFKqjd86jHjRzqmMRjqw3wON29w7T2C48P3bhQPRzjfc1r2apkiK\n8oOUs5rwQRu5SOOMthffadfKkOUgEOjSN7c4gCmzv4V4/l1x8eBtjgTpFps5\n9sjaOUvnw0JlxsbW+tmMLhx42ZWECnpCQjvVHyljpSt1FJLoPn1UHloQOl6f\nLx/1BOLaSUOmWXjJHRDQV9nnNddBPDOkVC+2Gj5xaYESxyRs4f9Ee/D2ZHQ2\nOccB+t3UVU5+dYbOzU3kZvG/lNRdSUtgGqVP2db1zSgYsimYqhMJA9WqqP1/\nKr7HGIkCK5uuh36UfWSzfa9LtRflPZvGxQB1vYHNoUS819plOsA8vp2zcquy\n4I8vYBR6qgX66GUXUr1pBpeA26ikVvoSJMQCNsacMBswtKCkQhmwU3RdA4Dq\nCuhoSCQT5ag5dmXYNW3fnQ10jM+UHuwDOHU77W35xjWEcf4sAMFzyExSYnqY\nITAOPzZZA+yEYpQk6dFGBx+vHQl4HzbLvaWO1K99hEfTIFVH9wOAAA+rPm+R\nDpHlFtKB4RnB+tJ9TNW49cOhfvFUDmrVJMAXK6Y3wc1fUutWjkWTTmji4rcY\nZp5/\r\n=w6cs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![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  <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 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### 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","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":"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","_nodeVersion":"8.11.2","dependencies":{"global":"^4.3.2","moment":"^2.22.2","deep-equal":"^1.0.1","insert-css":"^2.0.0","prop-types":"^15.6.1","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-emotion":"^9.1.3","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","lodash.debounce":"^4.0.8","@storybook/addons":"4.0.0-alpha.10","@storybook/components":"4.0.0-alpha.10","@storybook/core-events":"4.0.0-alpha.10","react-lifecycles-compat":"^3.0.4","react-textarea-autosize":"^6.1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.10_1529589132970_0.1300781371917774","host":"s3://npm-registry-packages"}},"4.0.0-alpha.11":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.11","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.11","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"dad098c5c33f7f6254701cba13ea680350aa1b5e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.11.tgz","fileCount":59,"integrity":"sha512-t91/h4fYD18A8hF08RRIGay148WqqTqos8bo982nCoEh80AO0flG7odyMrAANKZvmCjKFvQIzqZg0p9tjtdCfg==","signatures":[{"sig":"MEQCIHx8XwrsH4gKa2KSrbqS19r6mYAD24lbMGHHwuV0XDQ9AiB/IRaB1CIuaBVxsZwFCBr+yLwkct6sYAaPYsmLhDwN9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1229033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOmv1CRA9TVsSAnZWagAAqksQAJORsuaCZYCjnf4R884/\n18429liglcOFJV286BHSc3jWf2ypv/t4ZuzPNgpA44EKY26xllVlWyIxYwzA\n5JyJBqZdpCCnUwqOLfkTnqkPoIsjNVU9SJjDCqlOEmRvxnJiQyAVOeaVVndz\n2jyNQn+59xhxlV0n7ua7fFq3Nu1QypYbwf/77oeW8ksln5mGIHbgqlrAEoLI\nUz2M0mtdTpFI+6r8uJE0/QdSUKZ7brKbb+bTRSfxun8IGYjA+/GeJE9AZ6mb\nIKgHa8bh7mF8j9iqUTQjfBD2ubM6VmVcKLYQeQ+Zq2xJfOAODNauddtTtPvZ\n2XKZ0ZzB24DTSQDmtYYC71C+2QVKlyejuKUzVcaJ9tDOvVlwZ1cx6iKtW5+y\nfMCYr/RLb/glHKORGgm22R9y3gcEVV9pJ1PFNojwlaRBYNdKIaPQBxnnwgnW\noqNlp5iKWSu55N7rOu3Bzh/i6Vd14CRxxLCaBCS7yu3Y9lNv41F9+N0etES/\nS0TfAgsETnoGlXhkoJ/Kvwaa1LGXUQTMusRge/o7Bq05K6J4PbMf/yOk5soQ\nOBbVHdbSTO7L1aZ0JvQva20FaekKvlLlHmsOjc0f1oW0kf3JDhOU+DYaJe5c\nj3Pes+JoKQO/Xszt8FurGiBVdZT5ffoIo1Zr77WbbB1xvAlM3NhSbnbhvUyU\n2DdA\r\n=cdbl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"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","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","prop-types":"^15.6.1","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-emotion":"^9.1.3","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"4.0.0-alpha.11","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.11","@storybook/core-events":"4.0.0-alpha.11"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.11_1530555381559_0.3242838475198109","host":"s3://npm-registry-packages"}},"4.0.0-alpha.12":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.12","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.12","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"7fc6fc2b6ed90c618b13bf08f4a6bcd8aa55f057","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.12.tgz","fileCount":59,"integrity":"sha512-1g+piwdkhSjOHew3SqIl+nGJ/1esapAP8yqGUUWEaOwL6sIw7TJm2fnWoe9ZnSyxt1FCp/ioTmwx6crsGBb3VA==","signatures":[{"sig":"MEQCIG64cai6w1l3E7RaGL5ZOoBpCywHGeMflzd1GoDLw1pSAiA7nrQgHqosMiO7+Cc7mVmNZ5A0h2qRMyrxGl+4mnA6fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1229033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbPAAjCRA9TVsSAnZWagAAieYP/RA9dWV3c2fDDQzs6v6m\nPBauI9AOrnU+Igzsv9lokfqHljzQmC1qOyEPjAUv71c3up02wwMwCLXJX1W6\nAYLSFZU6glm9fBOeNsuBboIHmvH+AqjgsiNW5F8Hy40ahJ+VoSOt2bsuf8+Y\nWEkdXBz8506FOJ2JaPiFtNa5wV/aLQtBJqWk7I78ioI8RnGJKdYDtENZ+5f5\n7J6tYEvDTFtE1YU+h1mnvNo/Z+ikvo6PWGzS1UXvWeQokyiYgBCe0e1wE9Ty\n4y4Q9XBuDzQwASgeoq4eqRYNXL8doFKqpfugWajpFQ8uWRDvfmuC/MUWpFpE\nK2vX4Ri1RQTtr2luFWkFArDDaOvurL6vOzd2Ly+T6QJ87gTfSXYR2xAxTYf4\nsr6bkKkFEIb5fhl2tyWBDnZeWZQ/lT97nLJ31Qay2bJCY0r4IhdZTq+UyTOp\nhWmSIWUaa+QJuCgePymmbzeh8rM8eW9Y8Omr1rg911mVKgdjmM5lXJ6fveDV\nlfdWzlFPdRmfrQRPdsxC0g58AJo4O8B633FAnh9N8mdQu0pf2+U9XXxplwAW\nKaL389SgwV4h4Mwx3uNXmoMX7L8UNOEsN0zK31U3spnSfEOukOusK8UHWPpK\nyhND3J8FttsoqzUZNBV7awSmXTQxPbKlr8I5KAtVWJWPK/th6xIbMy3LxZuA\nLza9\r\n=JXli\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![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  <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 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### 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","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":"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","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","prop-types":"^15.6.1","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-emotion":"^9.1.3","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"4.0.0-alpha.12","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.12","@storybook/core-events":"4.0.0-alpha.12"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.12_1530658851765_0.47881044636041237","host":"s3://npm-registry-packages"}},"4.0.0-alpha.13":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.13","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.13","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2b76272054038d3efc1f78eed5273c9751f6b379","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.13.tgz","fileCount":59,"integrity":"sha512-A/TNqQxJmhYg50mYpEXS7H4KzCBZ0iwehrhR4hc0dJw5lu4BB8Uf1TBkeUk1BZP1IqazGQs1l991tNNOkf2YzA==","signatures":[{"sig":"MEYCIQDbBvWmrkxk831WJ3107qJikn01ace7jx/YZX92A5znbwIhAPye/YyYoA+6ly5uhItgbcRFu3701Wv5qDhLsDv8fg2K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1229093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbRDdyCRA9TVsSAnZWagAApGsP/0Jo/ufZ/CKPAqVJErSV\n/Mbk9fmLWvFu1ZTb9cGixx6fx4TugM8Uztibf9BS08AV6ARMODBmYhIz2oG5\nSXo7uFJrTAwuVHn28xZ2/lsVL2ZXd7kT18H8amcuMd+/0Yc02Mk5wGPOB8jV\n/Y8G0G0whSxoJR6MQRwMsogGTPZgIjoAwXXuIlc3sZaVc+Z7woHwHKLPHKtc\nj4LNeiS3Ow4FGBGPhoon2xg5G5COqJzP5QBPUyrxYb7BjX7Y1T80UJHvhC71\ndRSxyRSXcPFLeKxsFRFM5pSVVEnehzei9W6Teq4QCTtNAJVg01DeMuW4l56u\npxoXouqlc08NrIQ/iqDf5Ckn0+wDqKwNSfRZzdHh6j+cbBIJmP3oGlIQZ1l0\nO3ArYh1uLZ5G3xS0MbjCO5ZyKjfHkGWuWDYa0meAbZovRPEMb6bnaNZYiNR+\nrWx0e4YQbebMsT8t6jPjh2tpchh4riwH7/PwdR9dyBwXXktdPiZfqLnMhyRp\nm+dUe9tMNXN6d3ukmN1KZSYZb5ZG3zpn7ffxNQ+Hf+sEeukS3+DEcl+0ZTdF\nDwr1WwZOywigoRbcyp5AHjAUaH/vwz1vOHH4pbH7zbieGY6baSVGBlD28xc7\nHHbBB5WuKZXKxpIiP76PvntTWmIHLnm3I4yzgUYOYTvNlMrDBqv0sj5lg07J\na8qc\r\n=oRFe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![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  <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 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### 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","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":"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","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","prop-types":"^15.6.1","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-emotion":"^9.1.3","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"4.0.0-alpha.13","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.13","@storybook/core-events":"4.0.0-alpha.13"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.13_1531197298658_0.8311891155936129","host":"s3://npm-registry-packages"}},"4.0.0-alpha.14":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.14","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.14","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3a08ba8996f284326c3432eebb6b7b9809d44d31","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.14.tgz","fileCount":59,"integrity":"sha512-P51NnATP4CSJYQ63IKGUEa6+pp7F754F67bfaxrGhvOBM/X57qehqBfJbzmum/Txr4w6I+MagMonf70syYCqOg==","signatures":[{"sig":"MEQCIDPn9KLq1cEBiQhNlX9a8rexNMY4lm51zYUCElU5InOJAiA/bOyxdnC8vS8IU1L/5vHyKvxZZfbWninCFxtZpRDs+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1229093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbRp34CRA9TVsSAnZWagAA18sP/3pmR0yds2Fkzotbniry\njtGgSc/V908vY28YHMzoLGAbDS4YLcBRNYgeQ2Fc83FXfld1YeKjNU52b7pG\nLsjgQtQo8eKC1YQ95uv51oXNsToHALckJyaASzS7oHvytaiPTFznavC2G0rW\n2K9BhHYGXq5weqqrexkAXTZVWDU2aN58nlrNA29DOrjBM3Nkq+nNRniJnCWA\nffNlBrpMdyygXOQdwk5kwjNbQrkguJmFiKAtzsgZdVNw/Yfvs9SDD5CXSLNm\nMT2tNZb/MENYw+20zy0qNAOzdJY51tWoSMT4IsfCOAvITHJ8PpKCKiXk7M0j\n2vwGlhsk+5PEdtIaQZaoRVpexQc/7oKlmFcceoXg1jbAejnrBcVTRjMjNKLC\nTeXACfg7ElXnlJb3+UyCp4BR9XajZyVA2FpoBFfTYJ+EOWFNJRBX/PCDCBfJ\nttojJKJyq5DEiRIzHOwpwf76mmLz4rBJ/Rge+vOR3F/usvaXCXcTWsdCNEAh\n8C7pW6mZBfF6Kq48rNY5rCjErqAZPcEY1rPvg380cVYaN31pJAu4oc+8+REP\n3zRy1X0NJQQQtlEZbrpMj8OUkegyPlUCd5Vk7KFDiWMgXh/htniogxvhvfPL\nZ0VSLODx7gfM9gmxfObpFGwSN//aMF4Q+uA+1Q0d9+AKKa2jpxCtHylCnKsq\nqUJD\r\n=Oirs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Storybook Addon Knobs\n\n[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)\n[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)\n[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  \n[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)\n[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#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[![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  <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 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### 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","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":"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","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","prop-types":"^15.6.1","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-emotion":"^9.1.3","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"4.0.0-alpha.14","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.14","@storybook/core-events":"4.0.0-alpha.14"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.14_1531354616576_0.9595082102296857","host":"s3://npm-registry-packages"}},"3.4.10":{"name":"@storybook/addon-knobs","version":"3.4.10","license":"MIT","_id":"@storybook/addon-knobs@3.4.10","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"57a5639758aa77e7c697acc3b31e728cffc260ac","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.10.tgz","fileCount":75,"integrity":"sha512-FphHe6bib2S2ry5uj2tCYSGVQZNpz9m5IeRlX8AxP+32zIqGVAWUmmr/dZmuitYQG67GeOEDWpJqhplh1BirUA==","signatures":[{"sig":"MEQCIFcKD45Yp4Ko+pICO2ezyzN0lNpQPP61Y77HCI6y0kw+AiBkv88WeBT49pLhzFJPK7nOGHi1V5B13Jr0FgdEG641Vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZCAKCRA9TVsSAnZWagAAYxoP/jaaAf39zP4+RYjEefkx\nbHekXaosnzlmSJO7coeJzga2e+iJ+72195fz1tMrmTJ6enB8z0YISfYJETLN\ng/S5BIfVKB1N9JduE3MgpaHYjMRg+MmT7rxfFAHbVbfkIFPo3PZhaJsR/2BG\nA6e2wuSA5MWODQaAZICXkCo+FncrN4FhbfGUFGYqK4g1iYvRGlXrXE+bBLra\nPoS0PoLSUtEHPYXWEaj+ME+ifHq/DFNvuQC5/DFV3qRlbWBDu9+kz5xGn0Q+\nq644ZmuB9yI9YNgySjwKsEtiO/PgY55nt44avuKteDZCSe8QPVoCl9AVy2aO\n9CJTUCbSHVvawnOU/+4sHhvrWlPjTAVwkcB2pTQr+4JmNHCehZm6vBOMpmID\nsHP55eIg507S397mWus5ub2l6QPV6fG+XyvZXNM8SCn9OkZbLNUDjhjsUgQC\nq9RhXOQCcWyaA0yMggjJIzCYZTNvEohhBN3UR8VPRilHRUXD2I8Ru0Fl6Ms8\nkg5YPRYrAqx4YeQrvgNwFS6HlflFgw5gCR/ssTXB/liyxYsH8PR68RI21Pje\nvWE3IYbhTBWJ4a3ZCuCg1eAZycHYqFS7337OhR3atTCCOndj2YAYYkUlCztF\nFDk/L3flwDl8URgNVlfFwdweyPiuIC8PMrYkpOyClCv2vFCOAfZhnopRivTu\niQbJ\r\n=0Nq7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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"},"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","_nodeVersion":"8.11.2","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.10","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.10_1533288457800_0.49795706047174915","host":"s3://npm-registry-packages"}},"4.0.0-alpha.15":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.15","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.15","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"78e8c89bbb9b14932b1f4aca378bdd907b021c91","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.15.tgz","fileCount":62,"integrity":"sha512-P3EvZa5rlalrkZN2Xkkh8yPUTzTNujfPye1/78Qb/++RBXVNsChbKjnhUR8YodYEVD3mibaWcVJsyR5d8CwuOw==","signatures":[{"sig":"MEYCIQCqaJf65vwJS6roEK9+tXF8yOnu7yiUFkcYe0Zu/f+lWgIhALZ1BVZ+mgmU7FpCYPtVHhWmjmuJt7dvXKCBc1SznWKD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1234402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZCetCRA9TVsSAnZWagAATLUP/0ZW6t93eDEqxsNZ6mAS\nRnPemPUVaNAlrNxq4El+jm2QEqpc6oi8vEyiLVjWYMZJRq2hYxLtgNx6p/g2\n93qa1KNEmWvvrIGDCrR29qNBmwYhiPwAFCUqFXpfAA2RtwwRwDB0ok6DBJqC\nsQibrN6XLG9Z0gdy5bJnOwHSITL/kAYxDGBGt7nbrsrEwcSS/idXlypfS6jB\nFlqLxHEGVfmzufLsWHDP+PCG+JFmCe/RZ6jMBDgc0xJTzpK+E63CReJMGeOd\na12ox0V+orF7R6o3KZ3MBBb+AIPtnAgvHr6CgN2jFzWOn+1h/0AtamjHfaiU\nb9aKgiqmM/LLzOw/gK9qTjjeUmKyalQzyerHrz0LbggNNqRwyU0GI+uxr0k6\n1pPInvBH9wRzbmyX3nKcH2t791DH5BDkf9S28xkbQBJL7xU5kJmbAmftQ8Ng\nuHPGd4FUQira3BTQ/Q9Y+7i35IoHM66E7kI/HYDNjekVZ6TOg1oTMiZQI9BQ\ncgT293oiSm5emqxVlTgmE/UZZmjUHKtJJe24yzHAV60QXs98o9M/uGHQ7/mJ\nFXpnzB4jZ96i9g78bpvu4emnt0S3vg4lNvhAUFDzsAS72lHdQF4ya0913KHe\nOxOsJSDY5A6Uoawt8lmhe8HlY2Um5hY+oK6YkZizw51RSI8B6AHGsqw7ixih\nzhIp\r\n=FAI6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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 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","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":"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","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","prop-types":"^15.6.1","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-emotion":"^9.1.3","react-datetime":"^2.14.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"4.0.0-alpha.15","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.15","@storybook/core-events":"4.0.0-alpha.15","react-lifecycles-compat":"^3.0.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.15_1533290413138_0.538763602861775","host":"s3://npm-registry-packages"}},"4.0.0-alpha.16":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.16","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.16","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"34d7ef9d0898ccd02c5a899ceea2e10342a2b66c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.16.tgz","fileCount":62,"integrity":"sha512-lcY5bxng1YAvw+Vd8PxPh9Suoz52xT/9b+VcyPRmDvzxFQNxTvOBBAVlvO4PpalWjwZtKgFZ8GVtz9UULpt9cQ==","signatures":[{"sig":"MEYCIQCdtNDbeqO43aMwHC8UjFafg718bPzmNq4M1HFzABehmAIhAITtmyCQfYEH+lJiE4/4Y47X53b0kugW1Q0hSBucKLBq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1235622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbaFt1CRA9TVsSAnZWagAAsREP/2ZG8ZZt+QwdFEpZtJ/G\nQzvRP6iggY9V70R0eV0hzIpRNZcYc2H5qvszIXRWsTRNtq9ObwvHrR4EIcgj\nQ8jH23+SYtCg0alN8LyXdSj1DJDTyqzCgp6jtPYAsQU0Ich//rjMAIUGecAn\nCwHauwR65dBBqDLzvxesXR3qkOfgSlD7E6bQx+3FlyVes6hXs5syS0flOqgO\nU2W9ySIM/8Owf8dhPYoiQsSgGT93fvgt9BVeop1SS8ZRhW7QOQuimzsJ8U/1\nE7O79GasH7H3Zyzgt5nC/CiF+47vJWECI3x0N6F3KcCqGh0KaqAEpJEwXnTr\nf0DhoSQ5eZrJqsj9uuIWmk1DU8YEkTsSAoSTQsOfT63DuXykF7D41IS2Rnzw\nHV8ayo7GDVnlIYrtoU9ZgawEE3zw1N3bv3F1jwc3+znEXVwsiydvO0tSxVQT\nByC6H+sEdDHCkjfgfoqJYFQowJ4UWfNb30/7m+UlSMuMyObl04z0BbkCL1nR\nXnAQlj1hIsr1umOHOZxp6P18jHFXgtk1YSnBT3JQKFVmgkr2jqV4hZOlaHgH\n0jCleUqxpeaX80qSK3mwB9SlKwVYBawLH3KCs7qhP44EJtvkEW/mfjr6/VPv\n3IkukGRKX6uDxXLB7xYhD/mq8VnNlQUa/+Hzc1q4N8OPZAXKAG7O2c251XRG\nQHiq\r\n=arB7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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 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","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":"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","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.14.1","babel-runtime":"^6.26.0","react-emotion":"^9.2.6","react-datetime":"^2.15.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"4.0.0-alpha.16","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.16","@storybook/core-events":"4.0.0-alpha.16","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.16_1533565812623_0.00867331033419183","host":"s3://npm-registry-packages"}},"4.0.0-alpha.17":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.17","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.17","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9c57a42fab11e1c4902ad5d43c172ecc20d65d2a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.17.tgz","fileCount":67,"integrity":"sha512-ntdXKiz6srEa5+qiDTMuep0iBZw+snJoV0ew2mjte6lvwN8H2d5HeFRoFATPKykXpSljbUcmcm3SFODvB93Rxw==","signatures":[{"sig":"MEUCIQDftCUYbU/cJ32X+bq2fP2nMaNjBUwiE3TEB0lEayvbvgIgB+gVczoZd/RYgP0gsXOhZ1KLdkXwk+qgHjUhGQ3r4oE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbgFHjCRA9TVsSAnZWagAASf0P/3FRH+lrUESX+MQmONM7\nKWrn5Z8IbkxoscVjbBR9XW/mfyN6MbGqY46j0laM647j6G6vWXyd82ALcrXP\n31nkD1VI3b6xzy1Q/YOTsW130U780csLjRucz0jTsKYvZcgArmiLDMBBX66c\nMpkQ28rwbynww4DVg4VIlKx0FRaXt8IHXK/CJ61+PEQ7fh1C59LIXhgEiqAf\nAZDUa6NEBG5xTBCpERSq0IRJv3GXAXNkJyQVioimYWwP9J9gBueTToU6/5+o\n6Jq7t7LXpnrvw/PcC0Rg1CD03Jwhzcp8ZXJHCSF/5lxHvX0zkUkavC3+j08d\nJnMUd85iQFtL6T/GAqCJdWsMhRJDB3TUpjxNuXpNYDsHkEyv1tY6DWHaL/RJ\nqPXCADyvW2hb16lTzBgJrrL8ArEb1KcDTo9//CJWFcfbH58NJbRKs2qM5hJi\nTAZPyIN8yFVuWUaxfE2WcQuERfWJdjlYLagv22K2iAeV7AhZH2UXWKp/0q4s\nyjVgovf6WJ7lYDyhg2A2g7OoD7D1NeOqTm1la3JtIr+/y8uQ6bVaeP2OMHkC\nE8idt7MH8evHgXj7aOsSRwoWAhiEWfYMPfdkHK3PFGMGwV/uQtpg7/Csi82Y\nJcJiOIzpeTKu682TNsvy1DuQ1khA6w7hWNd/J1e68PDWpSaFhVgKnYb2Bl8p\nTeWv\r\n=ULkk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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 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","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":"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","_nodeVersion":"8.11.2","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-emotion":"^9.2.6","react-datetime":"^2.15.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"4.0.0-alpha.17","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.17","@storybook/core-events":"4.0.0-alpha.17","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.17_1535136226736_0.43125268939926964","host":"s3://npm-registry-packages"}},"4.0.0-alpha.18":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.18","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.18","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"262e3c5c2c406efc78a7459861545f35d4330c08","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.18.tgz","fileCount":67,"integrity":"sha512-aUT3db5lfoRM6YstINZQ8Yfoty3JP0IXqCY7jxiFo/z96lzuM3iB6RvKjbmQKboAJ/8hxvCldgayG1jq/IQdVA==","signatures":[{"sig":"MEQCIEXxKIhd3tX6M1DaLjeLe7VGNbi91EGnF9XJsTqJ9HDEAiAjeZyhlmO6US1W25eMIvec8eSrZJd/zCfy3Y5GkooQvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbgcM/CRA9TVsSAnZWagAA0bsP/AjhHfAtrrK3dJQ0jNuw\n2q561t9hytTlgG5LMRCQzZqKfqcbzvXeBV0eEd5AKZ61U4WA68l06jPnR6QQ\nU4/iYzriLI1/AG6yGm2DPfMeAucbOhVHiST9vuQiSSiCMDaQBdtbS/RIj4NB\nxbEvKF6BP2oGh6jbVxm7ifNmVEWoHoGCL2G4KgN24WhCK/TJ7gaPVhCi2sCn\nm1vzYKdl5yPhOo1XA03/kVcHgAqjzzXC5O4GEwEr6P9Cjq+Nlw+XOSn3/7ID\nSNH72qQE0Wt3RpG67bMhtLxXW097tRq3qjYUGam6VNL+ZL3k/SEz8UBPC1Y6\n6nIab/3miTRyAVNT1FKgAhwNUIkQ6Q1YqIatPPbGh9+5du11+Zp4M8odkgDD\ntu9mwFpFXt5Y5K33yoh7ZHwrLgQWiIHbYAu1yqEE6LFPRfnl0qnDhfmkSRlZ\nZ0JiMj9clv0vT3uh8J2NyN1rZyuustjnA75oTsu9cbT4x0fAnsc/Plc4x2tY\nJTGux3HRfwtHOHNm/unL9c45vC51+mAv7QFFHMRindMl7uEaI7dNqLViCLGD\nQEd1xOGS9YPAwaSP+BOHKRIrKJFF9IaZs7S7MR5WaZs0ipAAym9r6pN9RzOM\nlfBAxcqs6FRfUxALA94HUqX2onO+HGsW7K8AmiNi3RZM79Y4RFgm9T6H1+Pf\nDEgb\r\n=O/3P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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 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","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":"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","_nodeVersion":"8.11.2","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-emotion":"^9.2.6","react-datetime":"^2.15.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"4.0.0-alpha.18","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.18","@storybook/core-events":"4.0.0-alpha.18","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.18_1535230783306_0.6708637564891691","host":"s3://npm-registry-packages"}},"4.0.0-alpha.20":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.20","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.20","maintainers":[{"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":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"efe7149aa79965f51f64374b73ef4a75de0f321a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.20.tgz","fileCount":67,"integrity":"sha512-p4j7HXYdOKIW3p+gKKcAUTz3eWEbwsnBkpH4rScu+6HtQ15/6B/k4mePQjSvKee57ebDSYHcZOsI/KVu7NuvpA==","signatures":[{"sig":"MEQCIGNXEVoycni3NPriyg544aLO8RSta5arihRChG8XcjoiAiBJo9lH7e5dsK6BGz1dEIdgd7xobTgagCGt0v21X4nSZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1244769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbicmQCRA9TVsSAnZWagAA3UcQAIw7Pmvb4f5FFZOtdnfe\nIvfd+2ypoF2NFBK8PO1EZqwSjsjkPxZr3QOYH0jNQcfLtQK0Z/ryFgYVaMuC\n9obHnMOL9OvUbN62FdLIEntdlIfJ0xM9WC/vQ9ll+HEJ+i0q8QtvrLYLBUdH\npaNC8Y9ndBmj06c9sD7Jjthn5LBiSkXnNFR+n+OehPWaO8Q0jdZmXrG24iia\nymKjvhLvsa5IoVMtM/+7wXq9L8pMVa6CsOS1DQ9cesaUC0OqfJVPiuFojc5i\nHoV8en+Pl6C8Ipqa/5k6fapxlY5cciaNfDhUabhg3rXO+JCzmYmvcptyxhkq\nQvOLuIEIEPPPFRtShmajb7rTwY+NOVzwJ9icFdhiGaZaeghxhE/iAN6Gt6x4\neglOijRVECnsTvthEFuU5+4SkwveuMzloEKnNecpI+NSk0xjjIGxA3Goie4P\nllitmP9N4EM4OYkYv4w7nTpK6VDrqFznyJFJbJPgZ34JisWRIBHh0HB5lfKO\nJtXO5EFiEtQklqzCOSYLMxY+pcRzBD1HXa9A4p+eVyIE0GfHM9IlqgcHyzpq\nY/DzrXQFTUVab3pJT1bEit3m1dChBQ0GSOllzgQqE4MB21nDvZX0I5Rgyf+X\ntfVLWT9WkdOeTlJ9Y8EZLDmMmdo5RdA3dDSfPOCjFLiICllwlHAnGpowU6RP\nhF+R\r\n=EMWU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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 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","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":"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","_nodeVersion":"8.11.2","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.20","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.20","@storybook/core-events":"4.0.0-alpha.20","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.20_1535756687623_0.33041414002587777","host":"s3://npm-registry-packages"}},"4.0.0-alpha.21":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.21","license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.21","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"}],"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","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  <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 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 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","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. <hello@kadira.io>\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","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"}},"3.4.11":{"name":"@storybook/addon-knobs","version":"3.4.11","license":"MIT","_id":"@storybook/addon-knobs@3.4.11","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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"13ca0c73f19c0a3fda1a1d1ff07ef00fa3a914b3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.11.tgz","fileCount":75,"integrity":"sha512-1yeUajXEP+iYHfbAbk2eOP6uI68tVsmQAGlWhzGVMQub2Reu0fTQlwV+sb7W2XhwGJxFRwJfb2u91qUmsUyy8Q==","signatures":[{"sig":"MEYCIQC9mUg+1khr9lQvagS/TBDLqOdZyuF5EuQxSNsP9rWdoAIhALEjjQL3HyJFCyACaKP5/POIploYEWQ/5W4QfPZfD+rb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJboDJhCRA9TVsSAnZWagAACZkP/A2w+POZ+1UZt4WMijFo\nlQExStEuw2MXmetnIAMpYEKQPWWAGQn4Fr60f6885lAdq1uhup6QC/DAi1ii\ntlIAflhGBKTvrlIcDVRIDQbMynhcNrc5Veq/0tEFu1NIV8A+5fiNBezvymm+\nSu7+42kGDO8u1D7K1rLNNyahv+sRwUGAc3Cz90HFSos8wP+MeFhIEM/69RkQ\nxTrOI3RFtFilwRFYhBOZLWSJy0CTHw5irmG4yny4gHvnWiU27+8UQLfD9rI9\niZKSNagQSL3Vc1IJ2oJGnUYUhagx5AkBzSjKoF8S4BGH0LbcupJg6zP2hPjk\nPs0V9InD6Y6TBfeyTFPBFYaY3tckvAIgSU3v/6rjkcYZGdglubf+JUhpX2cW\nBQvwXNvr4rF3vQhjtZSiIXDgNRJVWSOsSs0aBNDCUb1rhKmXeXAXOACfIcZb\nWYvvA9EL9ZvcSR3R8zCxFtMVE+bfBEmjdG/5ExtF3MvsiQ8pxc7D9tWEctig\nVqar1IFdLhrqXZF7hXXcOBPSZJLG0yyKmGucMtbbUAC4ipS7TTuttMR3o9Zq\nMQOGDzBC272Dhq2cApeqp3hVLAYK7lWELIp+X2dza/FaOJtjzp9XybaYqo3M\nWpZ5VHYch7aFK95Y4WdMKsh/vvcABErIdsQv11KPHsqPYPLq3rHjjWnkT+LK\nzHYn\r\n=+KNJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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"},"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","_nodeVersion":"8.11.2","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.11","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.11_1537225312195_0.5932389403567531","host":"s3://npm-registry-packages"}},"4.0.0-alpha.22":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.22","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"ndelangen","email":"ndelangen@me.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"af5215ed8ac7ba8f20b1738709378d4091f6fc7b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.22.tgz","fileCount":67,"integrity":"sha512-Buyj7qLGrRPXLQTMkV2qA59+vv9EVPqwoUNhp3gjBAkaq1NBIF+a93v3mAdHQwr4sAqAOPZA/i13E5j/c6bpWw==","signatures":[{"sig":"MEYCIQCuP70ZoAs8NdwI4/sc7p2gTfGhWpCD8SD0o7EfhZHr2wIhAMGRvC/Eptr7P86hOYDw5YH/RG9gQQysZ+fxB4M31uUa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1245139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbornKCRA9TVsSAnZWagAAIQQP/37fRToYDCEnGX1ThpAS\nbYlP+bxmjXCfhXUgIyDQVxULsdSE5d3MZqIA0xgokbIP7VJI7+/v5OoG0y4x\nOCh08Mzh5/lZTKF52uSyYnow93x/uorI55L7QU5qoW/uaFhbBnLNoIhVLR3S\nLpPfXg7jc5k8faXhCNyU/eDgafE6X5N48UpCtDbEh8ppgJNVpj1nqP0WE9oZ\njdQy8eskOlBsL4WIk5LchQe/axP+SYZyL5NWR0mYO9JsG6HwGE/VvuvfbT8I\ntMjXyqQ/wKWXThBRiFjL10B9NCXiWDf6cCmrCEiIgWyf7AZXLY80Hh78OJrg\nTcyutyUTzwdXgW84IGXFBF5aqG8N3k3+WcsXnSnEYAYFAzb+RxjBmcKZ7WD+\nb+VJoWtTv6zR6hQgq85UQfWqIZz8NahKOc3orwl1qU/aordSNuITl7EVKxAc\naNuyw1nNx6QX4APLLlZkcVsv43hDcXhJoLWG92TQvdE65xIYawcoVP1tZ/vm\nyk07udKMwQcK4QMnn0vDr3hvtdaSW5SQu/PLq1KA+4p2cD8zHGqkAz6rpo31\notT8DQj5paPlaCTPgSQF6F6d6stJ3uvqkanR0yX6NrYnUe9AQRd2ysvjKCHv\nuxNg3hLkZFSDrZB/IIY59DpZqEAn+uFtXKsnDEOTy1vpW313TVVoASdo4TAh\n73dF\r\n=wjj7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"5112b520041c4aad100ad7eeb3487e534c64e48b","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. <hello@kadira.io>\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","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.22","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.22","@storybook/core-events":"4.0.0-alpha.22","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.5.17"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.22_1537391049261_0.015317416048133747","host":"s3://npm-registry-packages"}},"4.0.0-alpha.23":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.23","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.23","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"ndelangen","email":"ndelangen@me.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"8a0ab8467bcd80831f55b6b3fbdcfc2f5e6f4faa","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.23.tgz","fileCount":67,"integrity":"sha512-hXRsB3YonSFQIPdpJ8H0j2O5TW3xF8ES5FxZ807lOvcoB+XKahFqbKphv+sgmriNK4E9PiDisPcJGBxz6CBduw==","signatures":[{"sig":"MEUCIDKkmUPsQUaXDXIFvo7TnKXsFMpASyZI42AQVIs0nZbYAiEAunWanZx8CantIIws8iwyV5fuM9jtszSsEOsMTp+ugNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1245091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqrpBCRA9TVsSAnZWagAAAhMP/27aEujaHc7Idbu9botT\n0X4FkovZmsOM/F+Ommkap+NA3/51A56tw5GZ8RsMzpqlqXuIWPu15yd3bE9d\n6Hi95sl2Wxqcc7kmNAE2P4D3lX/JIWWDjiTGom6gRNuK4iJrGyOt9/vJQYA6\neKYgt2+0PcBdZnHDRJQhiNfiBYbgQfDPAG3Yd1YGMHB6w3ga40Pr6mNNJDoQ\nNDY7A+DhDTbNZJZemAP9IZmGl7yv2Em+GPwvqED+S2yLJlmsMCHlAFo1JLZI\nRM+cPsaL7W6mkK9L8IuymrBJLlEtuFF9PalDXMw1h7C0m9AY2JTLhnfAgLdz\n4v+qvRYT7XdnFAGyREdeEBHUQf8ErogL5aW1L+pkDiHfPZanUTwxL8s3d7PB\nxH3mnsZlORYSmkt8KgAQNSOrQ+M9kDNV9Qiwl1e/59vL1dV6RvrIPdNbl5+9\nI2xILbcVZursUhOMP0exzDim43KmrD0/BugcuPUNiz4iNGANpFsKgavmlYbz\nnEy5QLbsJ0FJfTCJMi6BCG+T6UcfYCUc2x5u7IzPVYvOf47K5qTWBs5qImRS\ncWFVwR64BxZIp/XK5B5SgecfeLZT+HQj9XB4oyBX9Z2dZZ+42+dXcErmLUaO\nGtX+gsgwzTeg7gH8v7He85gk6ZaeBGA37Hkaiae8FICQhZuaFh/3Xu7D0ns6\nb+qN\r\n=NO6l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"2ca9c34c4c929109170b01751632858934b1b54d","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","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.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.0.0-alpha.23","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.23","@storybook/core-events":"4.0.0-alpha.23","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.23_1537915456909_0.841188485039799","host":"s3://npm-registry-packages"}},"4.0.0-alpha.24":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.24","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.24","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"ndelangen","email":"ndelangen@me.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"usulpro","email":"regx@usul.su"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"09fe175138b85ad082908d6b42f1bd05c0c4851a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.24.tgz","fileCount":67,"integrity":"sha512-IvJh9QPhPTntJfPyU7ZZja45QlQvU33etc4ejAYZy5NWO41XUqXOoHDl7QgyqEE7yUn4ebyBj4PRGbgY8/i11g==","signatures":[{"sig":"MEYCIQDTMJyCr9vpNji8ur9hiStRyGuNbGC8nq387pRSLauZAwIhALl4HRu9YPuxMmhNbo3TX7Dwj0mNGpxmGift3d4LxlZp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1245346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtc8dCRA9TVsSAnZWagAA8jAP/j+MxFnKMELg+gE4lgHx\ndehxTb8Hi6zTcU5RpxqtmdhrCl/lv7izDCjwhHVygy2na6zdPfyj4+243K2V\nz0zK4k7bdFvbz8KoPFr6Wq8FE5wrv+cN/4D5i4LgadvpgH1HMsGPzFGOfDvW\nD5FqPNSySz0fnT/lcm3AzmUoe5o/xQQgB/Ranhxyt3sjQbV0nPEssBFkKUes\nEtIB87J74cp9AuIUeVXfyHODQiV5pQ+Sb20UHbmFdEqYHmAwCb2AN/6rnc1R\nE5KZAXkV66N2b5s/RjN4NsmwlAWl6PcqIu0iXWmKeKjQWXHwC9KbW4J5D3Ay\n9By9JcKc6HZNgxDgU0YyESuSyNDPW+mj9SyWjQrUgFavH6Lke9JPPZ3jL7/Q\nZQ60PtsPTT2ELkLJhGZ6EL0cp9VYsQawm4q3vwDFj55mk0mugQPmpJZtov6a\nZGNhUDZbxBsWWn/t2XB3ms6p7nmX2+U2YiEQgAWPnpm3w5bUdNnounooQoQV\n81zoMh4UDp8NYe3YEgooSmKnpw7j5B/PB67bMP1ckyFBRNoZ5esVPqqrMzZV\nTMPr4Ooi7k0b+YyoBl0Wxn+RQjsb/gS8DskREiZjqizsmQ/hkc+4zW65MupB\nze+eLofaOjaBfMU0I2nz/5hNYZIGGydRibdH4X250WuF2WkwyYd/a8t69me0\nijUa\r\n=YZwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"bdc8120ab9456b34e2f67692cc3439ac75c4ba54","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","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.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.0.0-alpha.24","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.24","@storybook/core-events":"4.0.0-alpha.24","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.24_1538641693077_0.6303741648576875","host":"s3://npm-registry-packages"}},"4.0.0-alpha.25":{"name":"@storybook/addon-knobs","version":"4.0.0-alpha.25","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0-alpha.25","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"076dce42a62777b3319f4da147596940bffebd38","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.25.tgz","fileCount":65,"integrity":"sha512-Id57qAklIMJgy1D5Y11SvB/SmyaqoH2B+KBL9AMQTwPvXZk8S5v+ZaUaKXn1JeFKBhIU50XVW71WBo1xV1Szdw==","signatures":[{"sig":"MEUCIQDGvSXdB6ipoixbzb8qADwpO9/EeA2EJz8cOmAYpxLysgIgQF4m8t2S7+/eX9GrQiiFyeqY/BDHw4aBMV+9zXX+ScU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbwb2QCRA9TVsSAnZWagAA5+wP/1G9orppfbm58wzjN+my\nKRnPkkXtq3wsiaZMCmnQUR1zGizYblvyldEySGba5nb+D86w//RzlT6yycQV\nFNUPtCOpvVAEMCy5+r4lN3/ldPlbk+QcabgV07XfEZnGlgtou+UOJSpbEXRm\nhX1xqZHuXNQ232sYg5xAsAXxT2LVxsFDEy9m+tnVpoiqDhnSAYdyrLf5HNK4\njrEsdH+VKhOdnB5aBVNdPKILYiKz2cioe10OBINL6477A17lLmJqQc9jx1Ul\nhdrAqI820Ah28q6DWqTT4mUfFxR5+w+WDx1WFnUolZd+dqqpuy5QuF3oXu1K\n1JD+pYkxa0MsG/xnY96o3nDYPMFBgK9SYPo5x7CTMENi/kGkOWWDzzBlKDlj\ndrlNEgDIfLg640PIrbFHbzGqZYB8/bWGIHZttUjv+ksEuRwQy5pNLepdNZvB\ny9PYZOMi76fdLvBY/uI73oQQYygvN/2FU87T+OI580MxQtaZDOREC0YYhNeO\nkCxxWB0++7OpE8WxDU7R4zWAA6tLZqcSI3znsMcFMJV6iiSOI3WorYLfeXkI\nwx5g7vOksB+inTyk9lVh0Qtxmr4/gbMfH34in847u2uVwYZz0eMAEOUyNdvV\n5VbZ8TxkMtvDzNxljNPsCUa4Zni67rIsffmtcbvwsDXOG/oWmqswzAaE3b73\nx076\r\n=Iclm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"155afad695926070cc6426e98d795907846f1207","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.0-alpha.25","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-alpha.25","@storybook/core-events":"4.0.0-alpha.25","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-alpha.25_1539423631655_0.7674756595208254","host":"s3://npm-registry-packages"}},"4.0.0-rc.0":{"name":"@storybook/addon-knobs","version":"4.0.0-rc.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0-rc.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"5e65767f4d6e70b9dc80c4ff703dad6d00b5d134","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-rc.0.tgz","fileCount":64,"integrity":"sha512-1HAz+pxkaMSFQ1wSHLUcNbSwK937pjShRAwSHNIa4TDKP7eYtqDc34KnB8XDl3TGX5YJ37cZPKy1rKgGUo5ZHA==","signatures":[{"sig":"MEUCIQCVcrhXybKZ4Kb/Y0obJ1ps+dePOAKC4dulHS3NrcEFswIgNtk7u3JV4IwUE16Iwc8a+Kl17KKxCwQOckGCLXxkM6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxLWlCRA9TVsSAnZWagAAnckP/3TkcfZpNeG9reLw5Xd1\nwpPKKxqiALpnQr3ImOmYk4IWj/vj8bHiXtI7lQ+EgC5dEKA69UVqvrLKoexI\nhqU0HPtL3mnO+A+Xx0SiLkeMpWRFIy9809MON8BrEzZgxvtdzLBRMdPIOEGq\nDHmNBjzVnqCM6IOgwocIQny4axLMfIZLsYxr49mXhfnOZ/wgnEyeRCBmTcyw\nHRh94XYNlWPaW0vu/Q94/pD6wmkZdSubdkKp8BUWzpqkfbuN6xofmqJX4BQA\nnEKb716le3paYeLWOUF81cnYL8kBtsDVXBCohxN0p2fonxw9hOrJZArhAXJE\naXw7hvWrziRyfHsYXOc3mnR+qcViEj2tCd0Fc4QTs6ubg14w7GEIqYfBDnG3\n9gZGqssbrwwIqPknP7vk7IHbiLYMqtueSSn1IRqaiT5n3mZFnyEojRq9Q7dP\nRx9JowgqU+A23GiKa95jKe2fWTX7XiifbsbBO8jX5YSjxoLLI9PSQYHeobh9\ndBY/5/TPCvG7NaHONO1KUhsyE4o/gH+r2nbeASIySExiFDhX+LDSysWOQxPb\nr62UIUkzrZPQrbkPlMzRdSI5arr8bxtJUv7aPm9QRhocjHm5yKIUpkB1ucbJ\n5Kmp37d0uy0jLBOeerceyQAdATanaEiG3+qZ/Jnm+OrPYxj/QTUEBbnf+aye\nL/bV\r\n=AT+5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"76b3c817a1906759f75ffa91f8261faeb64855df","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.0-rc.0","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-rc.0","@storybook/core-events":"4.0.0-rc.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-rc.0_1539618212789_0.9641007355522304","host":"s3://npm-registry-packages"}},"4.0.0-rc.1":{"name":"@storybook/addon-knobs","version":"4.0.0-rc.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0-rc.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"8463fc6b8189870abfff4adc2263f6969c70f491","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-rc.1.tgz","fileCount":64,"integrity":"sha512-iSXpRINMz40dxnd2qTr8kvobT5Fwm71a0G7FW+YIdoOwXKDaIZXF93hHJHGNl2WuaGqgg2cqxO0V8eWW6s7rog==","signatures":[{"sig":"MEYCIQCkiXAOW0QJ90U12Rb8ZgbAJmmN54fo/YX+FuUSCUIZzgIhAJ7CnVtPIydPkToLuqT4/7cHL5OSpOGH+6eOfVL8LdQn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx+iACRA9TVsSAnZWagAAbA4P/0Jgo/yVaGOxJD1A176d\nKBeEuy5nZ3yVaNKh+ww/KbjFBUYss1DjMIr/4kcVMfszWjDcbWQQ+iA+nxh1\n6ApvIa3TVhQY0oTy4Zc3rPBPu1g+VbEn7VEK6fdVG5Ntbtic/F3CRehsjXEQ\n3d8mBFS5nz/713GPSc+mp1uZt7dAcXpi3dc9i6DPy0AiggMpCxajMt6cIggn\n15if+mORsd1D6h99UOPrelZRLjx6EHleJbiFmghIHqHxKP3qIDlOAcY3V/I5\nFEpiqYs4+M+gokug9bbjlpD9VfP5o+BA7vLVfCZJxFsQ1PhedK3KxA93aeHJ\nEzchiQIQvzaNXWGOwUQnAG/AX3JZasw2IP+2Tn4/QCZsIR2YJwbE+9XIX3Jg\nRkXTXPdhtC3D2fapHaBtTnZsXa4epcVGguIlRqD3AReYeK7Sl+YyK3Akg0HB\ngadbxeda4sWNxS9/mY/SkJ3T+YYmvd4ttyI+IsDEawI28zU5ozRLGNZyk96t\nuUMU2ef27sxd4L15enC07SjSTWbw+HdTuqzYW3v7pS5J2u9zUcO0Z7H+AUjo\nY16PL3qDQj85j7U74QNvD1k+P2ErbtwB3QtTLSqzJqpmHo1kA9aD/IUQuutr\nfdl1RCIA5moGQUMDkvVOg8pV3zhi4OpRkUSMWQ8KJN8ZaNn8H4UfK/VcSfII\n/7NT\r\n=bla9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"46d89b3e617c500235c68e6d33067c2838c55489","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.0-rc.1","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-rc.1","@storybook/core-events":"4.0.0-rc.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-rc.1_1539827839579_0.5691907655288151","host":"s3://npm-registry-packages"}},"4.0.0-rc.2":{"name":"@storybook/addon-knobs","version":"4.0.0-rc.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0-rc.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"fbacaba75054c1beb8b9c52a1c4bea20700c5c22","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-rc.2.tgz","fileCount":64,"integrity":"sha512-WVkML0zuwTyC00YZunnKUkYWiN6gDd/YBlh2uIfKezB4rnLpFid/1Tm1FjQJYkCSvPXJB2XwXHuuNr+6mujzqA==","signatures":[{"sig":"MEUCIQChTyIspkQZGgnKPngirdftTNQCwErrW9slz4gZZjlyNgIgCC1mGKm5xh5++ly+1gxieZv1Z/HxzDMZK+5m7NdLm5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzdPhCRA9TVsSAnZWagAA1BEP/1p/ogPzILuvD5Fb+fpr\nyew4Wuq7KbynU9utzJTcysKQgLwjS1DZx+YxNhoi7rm5jg+xk13VtlAxNQPI\nFwymU86obaqMfVBchb3xjQ88Y88ooJ6DJw+O/N+Xn2zqTTNkWwx0Z9ktL8fr\nxeqSiRY718Z2m0jXaHZro1fTwBbY7Am15/fAv+hqmVdWU0SSC4d02Nyt/XPo\nIg21tD4SCxSesm91hrQIn/RQ4j2BvoejDDGlavcMV5Ul/hzJSrIQ7JpMT6ak\nfYNCUwbnHFD8XgqGJQmPBSGwy7JuQ1K8oajxMQMN9THndrv8wjAF3rPkQXV2\nahH2ru771D/mbl+psNlS4qJRtMve7ExqPDKvLw90esEICqXZL8yMV6FE/HSO\nS6wwk0QSVaiyt8W0eZObkuuU50632A5SkW/I40zSmEC/rOSE8e/8D9z009/h\nE+mwMk9devYP+8js5cMD/7ywEHZPWcikIHx/ybaewklICbgY58gW0j8srkIS\n0ixyOXVl3tr1JSuSNenEEp2t4EmK8ZlBhqFUV7u0Zdr0dMttnB1WQjPOsw/k\nCXehG1N+PcuKsvDGI/dS+a+CsMbv4BiJTNvbVhtKcidSqNWtp+mxcAqzZL1o\nIfyT6+ibsK35BTGc9GTqvlICDch5AQJWXkQ+4J609okmYj/IVQkN2T6lQm0b\nNsYN\r\n=ZchQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"8fb0caa37edc7034a33024e9dcfa6a416857b7bf","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.0-rc.2","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-rc.2","@storybook/core-events":"4.0.0-rc.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-rc.2_1540215776123_0.6877968496443543","host":"s3://npm-registry-packages"}},"4.0.0-rc.3":{"name":"@storybook/addon-knobs","version":"4.0.0-rc.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0-rc.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"ab3cb13e67c5b9d31a677e3a32f117a371a46db4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-rc.3.tgz","fileCount":64,"integrity":"sha512-5Y67fATCeahZ4cvhG8R+gRAVRzyZUaD2nJo0q4Lvnnk5uskDZV8CCqgCMOdxvkN+6QINihjZyT6epqdDi1et2A==","signatures":[{"sig":"MEQCIGDATEtnyhLhIVBDVesdbJAuC+JHtiPsEyjqgjDUQqrnAiAtKHHIrE0TWtRt4fO4lzONAdg7nC8Xig/qgeDXLk1LEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz0rYCRA9TVsSAnZWagAAHEkP/3JQgQrNqEhE0LT0VfHZ\nsaHxqd1FE+pqTKphaXzt04SSVlBfOkTEnecsmR3//6fksyw0j6QbOEzU4fb/\nk5FsK7ru+pwEcHUv7KFF8/kDv8OPD/KtBGjn3qIbzO8KpRyYLntGWjU1ooJW\n7nb/scdEL6Ysq2roZ9BMdAC64Fqng/jB0+kqC4TWQZnuIw22mNQuWVy9uHXB\npiryqC77TlIB3FX9qz4YqR6rE2Od33k5FhM4UDSPccuJqwpb+OxsbPqfH3FH\nvdkkWkyNPeU8Oz+13Yg3g0D7nx2lm0+srONx05CC7I4bKLybqDN7ao0yBJqh\njrz0VOQuwT2cYMr5ImDsWKVTNA9EkUgU33mbL6zFnK/93J0boG10I53U/OFr\nQsUlaXq94aozPEmYTWyUeyi/3XSABjSKbjDmMYUloUgxd/KEVAgBkeMD8dZY\nLJlSapbizJpHgyf71Pc3vcCAJuV5R1VIx/ArMFgiwbed8X9Z4g7cHuUQRwEF\noi57b1+7d3kbSuoXX7M5dBAEnJQPuMePC6n/6SSfMquprwpT7Qtbp06UTRXU\nweDW5wDF+aE7YK8WSYY5ILBXXnRorF2xqWRidKvH+bF2AFEgWQsfC9k7rei7\n0j0BFGa7i2tUicgSJGMEpw5IZLBOajLuY991qy4JHnLxTE+1azapLf0SdCb2\n/NtI\r\n=h+kV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"284fb1b4c2fcb619ec6c61af4e04f77df1896bbe","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.0-rc.3","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-rc.3","@storybook/core-events":"4.0.0-rc.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-rc.3_1540311768233_0.9823003140262134","host":"s3://npm-registry-packages"}},"4.0.0-rc.4":{"name":"@storybook/addon-knobs","version":"4.0.0-rc.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0-rc.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3096d34326a55d97d8a04b5a066ea4a255268032","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-rc.4.tgz","fileCount":64,"integrity":"sha512-sFkNgiGZy/uqwq1H/bPbm/X/JrCOumQkjh+jJEoJ/InYDVYVHQl0Lr62JsqgDZtw9SYhv6c8qDdMDWGIf+w8qA==","signatures":[{"sig":"MEYCIQCKY6n+baNvx0wra6OleMeYy1scidFNWQFa5rhrP/+CFAIhAPvV7j4wVfCm117ndlzUOPQBfhcwP93veFADJz6x4psV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0TFdCRA9TVsSAnZWagAA5SwP/0LcWMXHulNsrY25g1iU\njqZJ6Ef1q+kue51T2IWI77DBcvLufQZfoc/Zuq1pRAmYkhX4xVOmvkFAOp90\n3/y8HLS5rn78DCBx/sANM+NG/GlcwtApVGy3BV2JkEDoESIEF1btpaKG8rPq\ngrlQHoajEuQB+q/vubxPwOHP0ex1lL6ds9XcKX9ahfqDkBpP4ogUYMYUTnTM\nGnwmkCYGFOo5s7pgzyqI4/I1zobkwmkNI15zTmbmyCwjNsJvaCtLwI03p3zX\nwfQBSNP79z1MRcqUYVoYJh6X5PPJ7RbgMLlLpy8zOdjt1ys11bBrrj3i1GQK\nsjqhvWbrJTv18RdsGkmvhL/omF7/P262hr2PFGCr3sxSUnzCzOtQOl2L6DPm\naxY3HPjgk1GZ52Qq+8DJKSzMK5k9AQMWZXD5G68Cki9SjiFrZMTQmJ8dNVHR\nc8rbm+PFpe9zjYhgrUvY0pC9dCV6X9bWb+X0u6q7c7QGf3k+0hL+UjYCHuVE\nhdNSeajdoa+PHwU+wGnyW4fvvLFkMhxpiuxY7/Eq/Sj+sDYu0gg2aDPjjEjB\nrR0+LZoubHcNBEyQKpXYxKsAMzVWz4ovhj9dZASKd7D2oUHHQSMMGlmglpdP\nQRjZdM3J98SZh+/S4ufEsUKtb3vNq2In8YFomZQU7SbyJY3DFmYsDcTMaSQj\nibvS\r\n=gbs8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"d7bbaeb132ef759c3d3c0d8ee7798e54796b692b","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.0-rc.4","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-rc.4","@storybook/core-events":"4.0.0-rc.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-rc.4_1540436316560_0.3631374185028904","host":"s3://npm-registry-packages"}},"4.0.0-rc.5":{"name":"@storybook/addon-knobs","version":"4.0.0-rc.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0-rc.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"af8ad4f60b280da30760f9e1be044a4b123481a5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-rc.5.tgz","fileCount":64,"integrity":"sha512-hSZcQk89lIr8GBo7AOtWAoGD/nNvwmUKZN/6yVpRcyKUqPCbfH76ZD6kQS2BWPPubObfFq199268so47NsPmpA==","signatures":[{"sig":"MEQCIH5b7RCfOYbDi0j7eqf15Zorram45STDi1JYrdUCc2LPAiA7Ex4yUGrYbGJ1TT7dw6e4j8yQv3kNlXFyDd4MBdD18A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0TxUCRA9TVsSAnZWagAADFcP/jo3EbJ1ledWlMa0WMBP\nf0lDz89zYwM47snM/CVxi/mieClpg3HmZB/GtJ0vgHh3ZoIkjewwIKxKfLY7\nVXNa9VAuXx18/28IJ9x5efFjV9evWSigooI2l/u0abR27sepFyAxtrJOU/Du\nR5t1GP5Xcp8fiNkLADhlXZHe3y+lK7gxsUJ4mr78lryW+1SidWzNuvVIFoa5\nCWIP4to4fCt2sUzbE8O2beF3e/PSkeSo0HJhNrXkzBzcZGiRmgAEGWFFaoWd\nLuJPpiqWA/UMmRSMxHpHyUsyjXPHxIl628JDFajXumc3mWyJKGm3p1xVZoUV\nRovT75qodChdKktemWR9jntZDlnbJU4iZA+k1MvxF1dyZX3RInZbwwK9HM0t\nlcFQM7aO1Gd0nePmml6ECvHL4FYoUp3RYb5LcNPBMkbyLdGXOLDG5G44CLLS\nTDQtUxG47H2yt2MTxXFWhv2U0fBginer2eX3nmCJ8LplYFOGHvnW0A613G5J\nWcVKmddm98gK0WXfu/S2cAqhyfTfzIexzCOeURH266G+V6UDGZivSJ4XCbb2\niclBzK4/S8ZlWhYTlQpBqKJHlNXu6JUnCnKN/JKp9Lb6K4/J4H3AJZntKzoF\nbSHkg4LnUTAIeJgisVc5INcDJOc4XC7GwWdGeYOoEPy2y0pYNoG0yOhhTAa+\nXplP\r\n=gccs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"9cc644cddec3e4b0079aeb48afa457f432695e3c","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.0-rc.5","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-rc.5","@storybook/core-events":"4.0.0-rc.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-rc.5_1540439123644_0.14760133562467592","host":"s3://npm-registry-packages"}},"4.0.0-rc.6":{"name":"@storybook/addon-knobs","version":"4.0.0-rc.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0-rc.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"8a4c0dabf8eb0ceaec7a735e5f6df7b09df29987","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0-rc.6.tgz","fileCount":64,"integrity":"sha512-CO4rlLwHXR3XlhEpyxnK+nxwHIHZSc7SoRE/uFvV73sQY/dq/d+/whs3goBCiOq5ayw8pb2Z7lPcuZ/RsmshFQ==","signatures":[{"sig":"MEQCIEZUM5TjgAp2shRotSp4nAlZWDrJdxhZUfYfEouwIvOLAiBp0PuIeN7IsdWvDGVFHhkfhqd4YxkrXfqHd1HnnRqE4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0Uj0CRA9TVsSAnZWagAAOkoP/RjBFN1H+10j/PNJ8kta\n1tAVtZv4ADR+WdmUcYbjhfuv5ke8HghEf8tKjXC4VEaQXZpr1QrrXI5aieL1\ns04S+RAF1hIXcvRBBqukCWCwW9HcEX7IwvAE2o8R+6LKvy5bcQ8I82OJtaFL\neS/zqhSgXOlDesjYOpZQF+f3xX0ANeOXuBIrwK1GjN2Y4TEG8YXV5xpuYrah\nmFxHhAe0Iph2O08NMUBCLTgY/K9Sc3LsmEHF2tIrF4ICCqWgb6RLbUNefKvs\nIqB3BFFjJYSTxR9SHa6Fex9KYmnmG4QVdz1uIUJPtG39YhQuhDqbYNHDHBEc\nX4ntpBKpav7DNEZUGdniTvZjZgevrY+7B5NPGAIP++IuM/df5gUt1vDJoTtt\nLDcDRSVXeLhpUyFFCcWCBO8UL7LOe3Ns59X76sDEU83VPI8/ZvJhvoJEdBHy\nD9syzj/DaBXh+0k7bBJY0SL2Ooxrgn7Z/PMhQTL4NaXsZTM0831UJJBLn+/M\nHRmFp3OAK4qki+VtO0Mn39uKuNkdBRTYn8cKcudmZ09u1p9Jx54TzhGxhIjG\nUhL+ZcR0iGqlPtxLps/19q/EdBaitt7299OM4GNRHDYgeckjtvThd/A3QfkX\nTOzF/LwfbZNVvRm9lxSn5hlr+CR7PCHoXUNRrcJ/yJD0Hs0LoyD2doO/zcZK\ns4Ch\r\n=DwIl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"b3417c8134ce651264af9f65f65bd5b3ce54f718","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.0-rc.6","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0-rc.6","@storybook/core-events":"4.0.0-rc.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0-rc.6_1540442356296_0.2680421867441072","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@storybook/addon-knobs","version":"4.0.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0012a4ac39abd2fd72eb7eef1ff7641ec9af0c6c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.0.tgz","fileCount":64,"integrity":"sha512-6oovH0M3KOyBIggMUc8puMlmudbYRwaJrpovKOYkChu8Nq7Gz1B3MtHuPmkv/cylgOekz9XoLPlDYnjeR6G3cg==","signatures":[{"sig":"MEUCID8hhUYezrbJAb/MKHapbispEHA0GXjS5apQSb2pM5+3AiEAzpkqd9h3LY05d2OGRdWHZbzGI/yvIEb9/sV9jiulmrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1241093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb1nGLCRA9TVsSAnZWagAA8LAP/RuFJde8BhKHjKHQubVf\nfDQXzogg4sE8oSJVtSrBUV5TF7/pyRMKkksqPiB1mMabiWwayvjFOmkV9ljF\n+JtBIONFGuvpEwsRSKAfUqJNfilE/g45MXgopAbgMIjnCOpjp63MSNSfEttE\nHmDd5800EtMkZgrMbXWxlyBTDHjAl7Aat8hXHIEUSf/eW3yW2WSHXjPtkf4v\n2b1AHpyHXHE+ezr2aKNHQCgBP2Q4iGvImNmJfRT7qUu75NYGfiqESP8+AGYP\nO77KiIyww+YTSF/5w4e4jWWA/VCwnu+cy62ZFwdnVVCsrQlt5NBZHBG+uvl4\nvPjsGLVqxfkMYTrx2iQicctnBLRa/iTPccGY5eBDU2m/5wvLs5iXZnpLMqh5\n7sP7bw+hDAUZ1Yaq2G20RlBYn+I3YBUjNw326aS3g/Xj7Bj07BIAF+wuORxO\nx3xtk8tddWtnrVm1laQnlVOSyN7kMMz71DzCDcy09IKg090D66yAO5lkoQcN\n5uPfaiqId2ogsUiSuNKk8hFr1P2XsKFPRAvubwWqSLFQiKWgnFJahuSDQej8\nP8s5/xK5F09kV24YwkEEIw167g4jlN6p+kZ6rzDUCurWbaMCRQl+xxxEmZlJ\ngWuEUF4T7i7lZZ9tpkZ4PAADFbAzG6+tzrLdTCcxmjhm9Y4zDrK45xLBmIGC\ngaEq\r\n=3QlM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"8dd9bb346153221c02ed495e43ba02bd73271875","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.0","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.0","@storybook/core-events":"4.0.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.0_1540780426153_0.22325316789435456","host":"s3://npm-registry-packages"}},"4.0.1":{"name":"@storybook/addon-knobs","version":"4.0.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"adc85ee4e2b55cf6c9f9e1cf22b9105476300f2f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.1.tgz","fileCount":64,"integrity":"sha512-aw0IpG+Q8zlOWfA4fQkFrD6hbtlIxmBx8kTlsOoZ1KVVPAl96kaHjVgv/OmidGiMUzd2M7srxulExhEBKX7vPg==","signatures":[{"sig":"MEUCICKn7fY62AQ50x8WYLQ8FEkJL3QGGzOWXnbowe/VB1NxAiEAoFZrYJRokCPNmfx8eXtm/St4EAvfBDWmgMN3GkwY6eo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2VZjCRA9TVsSAnZWagAAviIP+wV77lACJKKHY79+ZA1f\n8XS/U+S+Gmno0dwpu9ejVyGJ0VP5erbYec5DmVbJTs8IUtow/2QobxsrmLsl\nJD23qbo55l5/QFJ9P7DGQ6r3YTh6R7bPaY2H02ovqWQYJmStG0Lbw+j8PkSP\nIjjOAqy9MIL8ogdupqhZX4K6gnHM+YuBmx3BqQkAavouQ8+Q5hHyLmRB8TE2\nMKNrfc+zVlOgG1DR2sCnnIiXRIxb5t99MDuF92C5ddN2H3vkH4UE3A348MMF\ncX6JfEoFetCSb8oSG+q0NZ6ZUxarBukYEG8Y3V9cGCH21kIFJB7o+mB87Eic\n3SDV7LUen5PbGuhMMyaYcDoJEpul1viV7zLNADAFqOPmeO03YDtrWNSyFLJA\n5iZ568d+fQ32F8+KrbkYCKCfmHDdQrmFp6hlkafJPupP31sdcXtcTFKVCrxa\nAkfNXl3CfW0N48HCCDo4GFJFGQG0kHNHqsweDnBH+CiiEdj9amvPEr8tkF99\nu1NymzzguBWkIjdk6+JlX+Owl0bNEgBdqwpMc5C+xEq9FxfGK3qhk+Mr1QDQ\nb75i5mRzdCiIeGRkzjjRqcXVtiYT9Zf0VPEn5QnOwcYvIn44YqN05Hathles\nddzDKbt/A6OWVgGlBrlKm2JAGiI7n3XEIidGWxE3oLP2Ca8hbBUf2xuAgmwg\n+G80\r\n=hMwq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"9d9f3ed7bbb999eea86b898af4299533481c129e","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.1","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.1","@storybook/core-events":"4.0.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.1_1540970083130_0.018718799346642667","host":"s3://npm-registry-packages"}},"4.0.2":{"name":"@storybook/addon-knobs","version":"4.0.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"cc16e913dbb51d4b10c07e4dc2e01fd841e30fa4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.2.tgz","fileCount":64,"integrity":"sha512-7qrfjz8CWDHDt9eHWK0pcduqyjpO0DWiELQ4yBdk5tXtuw0nQFfySX6o5mUdYNCDCFDGUbC6qd0evLvuH0b2aQ==","signatures":[{"sig":"MEUCIQCycU4+BwO6EAVvC0o43+60tamh6QgAjY0UTT9Vy0nFfQIgCRrBh7KsfWk2qj4cVrivgtYs/o4eCPr1Ykk3LuIgWHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2W0GCRA9TVsSAnZWagAA46EP/0RValQnHss4ibxwtqfc\nRga/W5HW7wB+wJD9jcyKIjm21xEIGGnfMGm6t2uLn6YHIIOd33fH2PIMMnoG\nUxYgCv4bzfMc8ZbUu8x6cRhP8kPCnaliVcAVmpAR2QJYZv/kPFXtGchqY+in\nZXHDNLqWgcutIT6iWuIIk9ojReCRTb/zBu7TzsqIasBBb44XICPSMkhNpbCi\nNf50DtDgz2nIwUS/p2+vxeUca9yGvULUJw8LD6lrL0tCivWTP+2o1lcGziy2\nXMmYG1vGfHUSJTC/+QYQ8EG8qqHW+SDj0mLoH2ECf3BOe4edstnjBhOwe5qc\nRi+wKdCxaVAdAgNc0mzCyNvXBaCQFtNwiHIIo+a4dnM1EQsqwcD3B0zUBjUb\nGX+HSZ8WMGdxJQpvBzzqjKj2BZ02WYp0FxfZMH6MnqoDnxvuCMhv33H4VUAX\nLVRuy/LDNo2RFOAgcat0b6Nb4UBMsUeYR2bB/VALGLU6VDHAXR/hl5FM6UXD\nkK9IfrvGeDwwyxlL3ETmNh5CAY/ZC5GGJ/vsaHyG9MHsj25bUtmhIWH4ngwM\noR0WU63Q85LuDA+ppKiDdjQ7oKf6zXxjLxEGVaAKNhvSqpZ1OOme1aN3KqE2\nAauNu0TFNksZpGlVPmQoAvVulwqaXIHv63hL1faRYSc6kotQ+StR/l/PntMn\nx2Go\r\n=9T3F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"037f6cf3a54776739c9ec124a927657935b5c6e2","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.2","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.2","@storybook/core-events":"4.0.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.2_1540975878047_0.5526824692331562","host":"s3://npm-registry-packages"}},"4.0.3":{"name":"@storybook/addon-knobs","version":"4.0.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9b169ff58635d704feb4feb2a1f0b4670ba251a6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.3.tgz","fileCount":64,"integrity":"sha512-GzRQMUU7wbFIFL4G9uBclqdobHyvXNbLVIa7xlAoV0D7yVFwuJwR6pdOhQMshbjsIw7HTIIhGEWayS9k8D/OpA==","signatures":[{"sig":"MEUCIQCymNOCkJaO5rxAKRopnNOXp37/oV7zHLLzkkD/RM5xygIgfZCaprd0xe44oyy9aWoDgwT8nq/lqqDyBewri0gHWIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4R54CRA9TVsSAnZWagAAo5UP/145X1+iFjflsyJ0nOw9\ncFDyn8ovUtffWwYxrGYH4GzYSD06v18H2u5/fE95gJnA2VmZYU35C1vaNC9D\nI8v9/j9oEj8ig3m3KHKvF0mCsINUHo3igZozwpWv3XgqYIRGfa9uAZIF//vv\n8N40ZuMQAU36RwMUaDbJjpds7EzzGEj38/f49+x5dbKVsPQTbyNlpSa+6Tlo\nugOIffeI7H61odkR/n8oPyFPgpysEIH3vzHP2I+4QfESP7sU6J1EyO3uDkZG\nR017uhV+CbPiaCy+YVkN5V0upMxx5PiRvNAmOrZdNQmm7Q7zZJ1zvXORZRun\naZEOFuVzGPMY4YlyriyvYkf1+e2u4Gy8IwNNaDJIJlHc/cdToLKCr6gPQvP7\nNLdsG1nejZYrAUeOIGA6eOcbeVc5WGCdzrYSFsOnqd7dbBALdnh0iaHwlXID\nIPj9I92qUwV5C1HmHyH7Pm4zVPQJScO7Z8ES637ORwdY3OAAp6SsnILqPXSE\ncAbuMVqyQKhvmRZJLeYgp/W/tgRbe9Ue3HVkCOOJiUN8qOCiCp08V7ZOCfpb\nULfL3w/KE6u3W1vZuShMsMhiWczHSFFIv0cF4fivgZiAXcN1wZ4NnfzMSFf/\nIkq4No37UKX2w+NVM8eXDNp551J+B0kdViy4alVWqpcWh039BVOmAPH3euWd\nWelS\r\n=fyW2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"b9ae585f9c7ce3327b4da400b917b04d8596807d","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.3","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.3","@storybook/core-events":"4.0.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.3_1541480056072_0.9464372501236886","host":"s3://npm-registry-packages"}},"4.0.4":{"name":"@storybook/addon-knobs","version":"4.0.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"cbbf7f21a62eba27ca617970bdfe915a07d4fadf","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.4.tgz","fileCount":64,"integrity":"sha512-Ozja4/hNhBWfgXlX7G2zLwcWxqI2uv+rPrY3dYMbdzVp8p7iLQsm3bf5OJbi2h9WsmOoXJ4tydOCEsWsEgNBKA==","signatures":[{"sig":"MEYCIQDJdFuI0xnfiRyOzpWOnUMVOFJdDyCPqOO+U7r5AlKPGgIhAJ+8McBFuz0tD2wMCfM7MD1h6NcNDzqNfd2EOcKiQy8K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4Sl9CRA9TVsSAnZWagAASH4P/3KoKel8fteKdezGjdq7\nrFov85M3mfhDNh1HL7qA6nr0nRWMzHlpaVXQk2ShVfEWZivGrHVE7VXcBOwS\nOA64H95Kri9uipEly5CqWR9x2kCx2ikyk6FkRY4Nskk6fiuq+QNKtcJj+568\nCW+LZ/2Ug8bKt/orZnmVJYsvXQH//AoD8JrmpcvwjMn7lI01Xb1CPu229m0F\nNOqmZ5paLqaEoo5UC1cIYOCbvTlNLHeyOF1xk7JpcHzjy1m2mVaZ4Axo4mKK\nn5GwjKp4ekF0GQRUKBt/81QMEtJe3JUihOLpwkQDW6LArHwhWBEZFQ+bkT5+\niK7i6kG/twkjRjUMFimsrEvmb/DPQxXBMSg6mEqS4tERqB3J8RtcgJYCvVDQ\nHssVeSUC7VNXSnKVyJiIG6YQzvrPGNZ/QLG52ufPwyBFqqDsxwaSwLltrgsM\nAQNEu/XFzbkXtX9MsFO24MhLGHLcxMJw50KTsDnLa53Osj4vSEjie6LVArVM\nV7+vlYfcTYpAXHTTL8Kwz/dNbuGcsDwvrrjxeI5X8Bvt9Kn7DwRQRQlethje\n3qVBzf+OhM82bxrUQAk3kY3kMbi5ViBjK/42hV7dBJUQm0EewyUurBGbc1E3\n+BlbZ9X0acR2pv0iTTOkHIXfh54MJxgEW4nMQlwRT62+4ZZwUs8dY1UYlvML\ns3UY\r\n=ms1/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"0cc22e4b2769339e0fdf8980e572bfe950d4902e","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.4","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.4","@storybook/core-events":"4.0.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.4_1541482877222_0.589242421427715","host":"s3://npm-registry-packages"}},"4.1.0-alpha.1":{"name":"@storybook/addon-knobs","version":"4.1.0-alpha.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0-alpha.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"14a6150a432701d4c238315f24f5ecc62bf83803","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0-alpha.1.tgz","fileCount":64,"integrity":"sha512-UJux0R/ryhMUEPiFFYTL5a5dbPwqi0e80VYifAi9Oa4eSZxwsAEIm5w4dcKKyZBNlqLEAbRZSM6Xsl5pyYYrlg==","signatures":[{"sig":"MEQCIDI4fd1IPhAMcC1+kvz6HPoaowhmpUfwkZVdgvZHlmZtAiAAzoJAWEherA3tXg58ScXr8VPw3h41MP8LsmiZ2UDf7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4VyKCRA9TVsSAnZWagAA+nIQAI0kNgI4j6keyHJm7ZKg\nSTfaud3C1tBxzhGmpltDVqmkYyNx8+azytQ5/j++DegU4fGgc7RmpQlCq5m8\nuC2wffq3P5SqG63ZJTknbgpfl3BHXHlHh9orxX04wMR9RaGkDQpC5rezxZX9\nO37O2TBLmIQbycy8CcNJGF1M4dclTb8lg8tkb+7F5pPKMTTjy3RQdAx1NqXZ\nNgGMcQSYQbBZcsi80Db1KU8KKUaKHFcSUutwV7SpQ4AH8ZRs5MXuvplStHLY\neeBAWCsx/qvlKSobB0OgUr3v6GpJsVQyGEt7AwmOuC0li5JjkPzjeVdGD5/I\n1MPNv8QxDlI/W1Da24sY1JaroJiGqpuaPWPF8/6SwWNgL8bflc4G/lvDpsyl\nCW5zS5ryyycQ+cQNlyMns6Ql/YpxMDpdoBOzlwjWpyxSpR4Z0Uf1HeGNlcdv\nk6g9wpNN+0/oYJ+BY1gMvBOHI4fhTkMYpDCQmHQSQu1C4PCeVGvax81BfDkw\n3ZMWYszgO1XvolZy3onyg+WaRqN3Msbrb/CBzJDz+E2vT+7vNjQaAetCHm7J\ncO9n/Jq/QzJd/aTWovm/RCez8G8gxzA+MGrwhWY1xXTOPnzKOiPlHNQJ5Gns\nUqmL8iV0gZyDovvzqbGKCrnsc9sQyJcugcoTkq04L1RVFmmANqbB9pKhPqFO\nwyOK\r\n=u3ty\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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 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### 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":"253a667e68bac7dee4d97a6bcca020b7d05617e6","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0-alpha.1","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0-alpha.1","@storybook/core-events":"4.1.0-alpha.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0-alpha.1_1541495945607_0.8901155047783613","host":"s3://npm-registry-packages"}},"4.0.6":{"name":"@storybook/addon-knobs","version":"4.0.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2b2d57325b8efa22db83a814aab1f63eca36227d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.6.tgz","fileCount":64,"integrity":"sha512-bw7emFoGcbIOlTlm9/TPkwoRLC6VAi+GwD6LFxPnprs8YkSRkjKfiWsQBE54DowMefuz7Mo1Unwq7VDr6/zfEg==","signatures":[{"sig":"MEUCIE0cAWr/5AqL720SqnFrPDR1QLpDH7OINMPbra1WJb18AiEA3U1bSShHd6qwzMQScmg5VtwV3hqHR1fpBWsysNtNp5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6rKaCRA9TVsSAnZWagAAEoQP/A9OvQiKkf3esfAqaldk\nRPYjvCYOlqQ9KS65uoUG8CNNphAe3+93hg9iQb0CrpyP5llOWiDicDwtzYtX\nT3KhIK2X9KQJ/5cVeyK0Ysoac8BfZq2w3Mw4dQmcsr4wWI3UBhOJ3yspqpwS\nQtGOb69TtsOZFUSXfv62fvnOoNQe7sA6RkSOAeRYFbAmQF/2mT7JWO+UJYll\nCz+FmM10JCvYkysjV6Q4qstRduVXWtZrlq3UqeiPNpyfGLTxnTEn62zdsq14\n0XGSsv/YxQ5FP2qp+guLo2fYPsZxpIl/YVJk3k+Wm2MvxhbAHciJ7YoDuHeg\nCsLSIApeUOCz+8nrfAOjxFjBi/9EwV28J7MsjuOE0NF4YxGgLoyNBK5UCABi\nVVRfSS0Yz5veg4mtEg0SxH1kdJao+inEQjvLQwlW8Lx37xMtlTlCtfyn2F/E\nXI+kxsmQICoVyG8U68p85mwMEnMKn0phCqzhUZkp2/dJNWm+1d4ai5E/0ab0\nJDHF+ggYh2Q/U0tAFR4nGMPxp2cGsp927ftIY2BUpDIFWVUCWx8HBJDLAang\nLaXB8zusRXtYR1rHC6wdgSPNyw/tWTHyN4JIUNhzpeAcjb1wZUltx5tQgvOD\n6HILZRc2BsBqr/r6+OrpcceUE8FXwL2zO+8zOPjQU6mCcYARGOZjE76qCkRp\n1CcO\r\n=29vL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"5d85f5d13286129f85f3e6d78c105b67fbc35b5d","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.6","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.6","@storybook/core-events":"4.0.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.6_1542107801495_0.7190387319235139","host":"s3://npm-registry-packages"}},"4.1.0-alpha.2":{"name":"@storybook/addon-knobs","version":"4.1.0-alpha.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0-alpha.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"70620e4451fd61cd0e89ca77c939e4d4e31139cd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0-alpha.2.tgz","fileCount":64,"integrity":"sha512-NkDsh/pyNfEglbt/L87F0TCevw7UFmMNhDFokj27l6DSw9UO7bCMiZaGysAABkjW6QcEyXQRwZpn4A8kkbAnuQ==","signatures":[{"sig":"MEQCIC+HcJ/GQrecX1CMCEkOwZaFro6xWiWx3kZ8vbAiLEsMAiBu0ETxqhBF5ojlckbOQ/bQHwuZtpSUVBCsLlaKP74URw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6rddCRA9TVsSAnZWagAAFNUP/3l+caXPa5wCB9wlOG1N\n+LiEnp35Uxzfc+ScFJR6wOeOezEFjUTMuMYtgn3lxM3pq911K8c/QWJlrUOL\nxf0g+tjvb/hhdx83lkIhvmqXUs6KlgZMuINsznDRQc1iML8X1BlXaN1i3oGs\nQ3CSNpfnKAvFNHmlh+CtpgdxGERL4ctz7ZTUF+aVxVW8kQ83bBYidl5dDaWq\n22IhtewvyeRCikOpRdH6/kG60qSXTsBqQNW+COnTrF4Zodffp4YbemSMcIpE\nl34AXlBTkA1i1YjCz4qDIBwPvS4UU9OidoJE2ZZ25PngOc/0+L5/3V39j22y\nP1zTukCdZlRCBSFhPWhckW4hgTa/fPfqoVAZZniP80Ap986Wd6L2J2ccHz1L\n6Bv7apx9J8ak0QeUX8fKlW9LPJ+/0p+5Ou7NHy8rZDOOcTUaziaogb/47/Ap\n1fUZe8SDY4ixx9gP5Bhf92iBnXnKSimokxLjjeWgbiU2QEliPPp4BPXuKcrQ\nTJDtWrPjNac7PHfMGSxCjjWjD6BGCAz1wKNFeT9hmKBwEW1J0UF99EIah+wv\ny1wvGSFNGdHlHW7wDJodjNMe+Z1BNOVVyOagvcaUETbATp/nxQqEUJ/VldEw\n4WyIRO2MulJkWkr3s0oxPmSdqf8sfRY2c2o0buaiBR0R2Yx57V2TBRT+U0fb\nb/Eu\r\n=97S9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"cdb9e485eb85690368b1f698db9220ca7bc0298e","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0-alpha.2","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0-alpha.2","@storybook/core-events":"4.1.0-alpha.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0-alpha.2_1542109021022_0.4203284032699586","host":"s3://npm-registry-packages"}},"4.0.7":{"name":"@storybook/addon-knobs","version":"4.0.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"079d7708a2d4229be26089f3ac6e78aa02e49178","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.7.tgz","fileCount":64,"integrity":"sha512-ye366yZf8PcUxIC226xI6tXdepKawp7hpsFNgEntXemqdjWewRv9mTd6YhrRoSNrLhGYNLMfHzYEAOFbJ0Ec4g==","signatures":[{"sig":"MEYCIQDIwuMgbM1wDfX5XGs/Mj1XZMWyT4oTrx4IVAxDTfsDigIhAOGbLPCDSrH4PgBZDdnk3lAWcIIBSZ0jFOy16vkSsFPs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7XYeCRA9TVsSAnZWagAAWqsQAJy8pFXiqX/GRSzaJwW0\nwKOUM3phqZpwapYP51JB2XKjvGZZmNpzOx8HflqNOzjKEHV1Bu+5uuFuwOEJ\nAgTCjoa/sdGcug4tpeIiBh3uDZs1aKmqmanBm8SIwOtQh21hR5p793OAuQR1\nh9plCesEVnBEianDwWUmI0ApHUy6FsOvXHRtqZc8RdLMCnD8rtj8t6slhIVn\nh8lJNsiKDkgVJU30M8s3R9i9j+7JFH2xNbJbjg6wzV79FWchoWpNS3pQSkT9\n0+MpKLYNdzuOz3Tmxb8qyK4FVdUer/sHYLbZcocPwTVkmaxzgXH5KVO7BXoK\noy+HjtWnlBY7c+GuxhgFi49Nb4v8eNe0h7VqmxJXf2s5RdwStaVO4ioKKnvf\nHx5WHCrt4uigq2DrC6sfR+ktguQIpH8DUJLW0/5hLn7A0XHbBkhMmCLQr01O\nJlt3bymus6sZdJdnVXEJtsQhb5saBT4SPfiwX5uPL1V+G0UIJyErkd0/580j\nOTpydRqFkgt93qmj/xo1rGE8VnwxGlLxnCuaIlLC07qkGYHd7D8EgfTfGRzJ\nlb4ZCKNff2kB0OiVeCtuinlPVkF+GRzMFsbKrJi+hOltxr1ksxA2EbYMUAl6\nlvL3cRyjDjkFGk9ubzTjDgUlL96VAfeTRRkfRLLglT32IlTBe8bZ3KQXv63C\nWhkf\r\n=+ve+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"5d5dfe011db3b65ad52e1559333b04e7e07af461","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.7","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.7","@storybook/core-events":"4.0.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.7_1542288925894_0.4057352855877918","host":"s3://npm-registry-packages"}},"4.1.0-alpha.3":{"name":"@storybook/addon-knobs","version":"4.1.0-alpha.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0-alpha.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c89e273afb97989a0701d67374766e2dfa604141","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0-alpha.3.tgz","fileCount":64,"integrity":"sha512-hmieyxueqhrN8B7iMdfCTNSXTdijV57372AXEoTDSXzSudLPm1gJ68KT5mtEKDYQZ20xPMjOblVSMRsE3VWlMA==","signatures":[{"sig":"MEUCIHua40dAeUU7GiMqYwdi5DK/9AUg4O6cNf6XawMu46ZNAiEA8ZEKu3xC9qQgx0Bx0xcKfpQJCSVp5pi7cIZPPna+U9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7X9jCRA9TVsSAnZWagAAOjsP/2mxukHMo/4aT0phuF6d\n3picQZr4HgIGVb8gNTqy1zeJQPO1GHpEHsT7+G3jVML5W2DJQUlJhxiUwWb1\nG2oTN4jckfHd5Zylr3S43bpF/pxCArbwlYkmb9j6Eo8FS1KfMXi3Xt7LGKnz\n6yuW5kiRPPeIE62aSgZK1Tt6iHDoymuHNmZl15bEqTFm1cwvOmnFe8pVdYF9\npS9Sd3Ay+SfNyG0F+hDAst4gY4Q8wMGuO0IKySHz6W+mmZ01NGCDPUNt/06S\n+CBLPtdcTKeRcBD+5EVrXpq/LBrfNSi85kPbyV2Ftoe0MUxqXp8pAD1Ffcld\nRVLSs4T0Dwzn9xr/mml9LTbQwxcoNzzcLheHC5ZqdpFOyK3sK1hauis5+iPv\nLIkrQrf1m59cKVMC5b2WPX1US8JNWqEv6BS4X7cThFGqdKh7JbU1tcfRh23x\nnadhQa5fKahzgr6hNuQ8amOuwTr/0SRhUosjuEpyXbclyRNT0vgYL20jBNr5\nZr0sKMNATIVzJF4wh36N87GBgHiA8jzW5F9tM9PUlcmzUvHHACypxDgredIC\naSfIpS3z5/yeCUOdx6h+RqFLFFPAJe09kbi6H29aJTYo9MR0zdtt9FCQ8jHs\n9EkRainK6kNnYUUZBfZtbR4+QY6a9PE/NfuGq/5hWV6T+SIPPMlsRTOaisTP\nnaRr\r\n=bahe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"ddecb0b7f6a9e976a32ac4a24c2876d8ff3d6d61","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0-alpha.3","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0-alpha.3","@storybook/core-events":"4.1.0-alpha.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0-alpha.3_1542291298516_0.4141167865056514","host":"s3://npm-registry-packages"}},"4.0.8":{"name":"@storybook/addon-knobs","version":"4.0.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"7d0a9fd47760fdcc629d9838447e441cb643005d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.8.tgz","fileCount":64,"integrity":"sha512-HKPvwNFylmwUOfeJHFq2ATu1gx7foVNupWjvalQm+upp5jNqY9scxblN+mpZxRh08wWZjXnSq6VP+BgKOy5buw==","signatures":[{"sig":"MEUCICdZbAABXg6vbNzw2vNATQPyZLfP2E7H3/B3C8RY4xI3AiEApd1oROjsWEcN+0DaN0flS31mJ/umrQ8HceSpUdgdPCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9S3KCRA9TVsSAnZWagAAM0EP/0LdxOZE1R6yyB00a5/7\nw9CzmpTdSA1KEqKHYpP8/SP8tVuRCqNZrFBMcG4IiCIJgXlokjvjYiZNDeSj\n/6XlPmwvsBcAty3LkOj9r6ceHFa7/WZMxvoRQctrq0MjzlpGJojtPgfm6mL0\n2VTZcR1KKyBnPw4irWsSlApCljNERfLlBgyed196F5dfBBShM/1T4eUecVfR\nHibvwud4wEWoGwwlrMVI6e8zC0fsS65QYbH4y9wSKU8SYGLDuMeyqmkhzWZj\np+uRCDpILQdwHtDmCt5JwRhrBhLOVYmVj2T24H+HbTl9ZVLagCJvTGNdcyzb\n9Erw0s4V/MHb6VDS26dbRHZ4PgNT8C0iXNWL6bdEQeyjcy6HIIfUOOkhSsla\ng/8Ny6OoZx5frYaahXHRDgplnbAhaLVOQNNCF3I1NXxGHnhkzBeoxPO3Awr2\nOVMuV+gPtPiAgKKE0Wxc+7NSg4i3mJ/NEEjXS674wZ/Rik5VX8ikuRqmAtsF\nQmO2NJIXeHbDxFiT0cdJs7sIRl3/7Qdnmdz7dqFR6odwatjXA6D65rhCEqtv\n5Bvii2mFxOybTb+wm1hbHCw09oA+XUSu2jG1c/Bh7wMQquw+7TA/ne+T73r1\ndX/0flb29yCpU7qiFvrXJEmjZK6BKPJ0gNw23F1Forzuvona6ybkVtPUqbuH\nwB4e\r\n=W14G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"960bd59b7d7fe3f63bc291edf55f7874e2c10a31","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.8","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.8","@storybook/core-events":"4.0.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.8_1542794697615_0.7933099424091645","host":"s3://npm-registry-packages"}},"4.1.0-alpha.4":{"name":"@storybook/addon-knobs","version":"4.1.0-alpha.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0-alpha.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"747a1e7b059e463ceb43e8e607528650108f86aa","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0-alpha.4.tgz","fileCount":64,"integrity":"sha512-XsZOVofTaMvNYw02Kp6cj5l9TRsOYLRq4XtkaUA7SqgPvm2uEJVOmo4adAkrsFZ59kxmQIZrpT841IHEoyNvRw==","signatures":[{"sig":"MEUCIQCyZ6Px4HPGE+blmcC1c0XTZsDicPhHGPe7jPHP+31dJAIgQtkFZ0uCaysIt57sFuDnDAhrSUUDKRCe0ewkYbNMQyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9TeZCRA9TVsSAnZWagAAZJ0P/irr2DlLK6QHofRP9Ms/\nZKDvAHlkWFI+AsnaDN9Gfmew83cI/mWRAfvOPsrdjR2S0AZtKncsPGdbbuwy\nCcVyNn/wiPowUZXDBlxnzcJqGogX8mU5ss95p+mQnsG6dTuWoa427wvTYsq2\n7UYMMavW4ij8sGJSQd/V87Qv8009/KNw7GeeGVArkdHhNhlrbaTmYEpxXeDX\n+HNcOLfdsvCqvc94e2OiSdm1ecD3dlUA5SfxQVCN6eK/lczuLLWU+0IeAsL7\nj7x2gzLHYZo5MPv9Y8Vf7SoJGbBdogoX1/SyH4GJtO/ZGR5LFWRUn155HIcQ\nkXdrWXB98YE46hB3VCyUPs8L0GIHOZGX2jZuyG+x4m/S97/a/qcFcRblHQGi\nZVXsVTI2R/KRMwSEFJAoeDGX0BhMUju262jtVggGI3p8SVQ0A+82IVLLiuyy\nqfaNugvWgEH4QVNG50iys/WuVybwzoTl0kXUHPiBD/z4aSQ5aSdqboNrFKhk\nDERXaFhuEzPeMaMkaIB34ckd42eEWB1h+Eg4oX9OuPOke6h8EMq66J1E1059\nn60QEKYgYfHu2FGSSn95LP1J0O3eS3kdxnDXF4AHz5ikhfKW2q7wm3QVIzEi\ntNdW+2ubVSc7zk0eXzpG4DB9Earv5SoMTLzfiMYUpO9WViGpy94WecDASLr2\nuwC7\r\n=N66E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"d8dbfcdbb5c7a7bcfc4865559dca8fa45e057ab4","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0-alpha.4","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0-alpha.4","@storybook/core-events":"4.1.0-alpha.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0-alpha.4_1542797209101_0.34865632975377125","host":"s3://npm-registry-packages"}},"4.1.0-alpha.7":{"name":"@storybook/addon-knobs","version":"4.1.0-alpha.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0-alpha.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3919baead2060281454c216c8ebd2d5b7fb8d282","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0-alpha.7.tgz","fileCount":64,"integrity":"sha512-kUIbTPpS8HezsfeUfmmRfYCp7pF1Dsw3qKban1Y/QWo8SCnE/vTwSUgqhTCXpmtaUb5xCL/b6i+8z6VX94V6tg==","signatures":[{"sig":"MEQCIH1E3WBqm5Nk7FiMS4Ja7gciyShJB5Rhcqo06kd1jd9CAiB9YbdJtgY6X6tdmDdYEvq8tfKxr7kX/Ba8IwonnJ9SIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9jJrCRA9TVsSAnZWagAAThsP+QFEQCsGjxwV8w2UbHoT\nM9AUA9TbIRsiaTtW4D9XaLbcQvtbf3bviB8T0o4rShgx5Syh7bKQouYswb5O\ndyXSLm1ATxBJo7zf/ci1bVIysDIQudUOZnjPgMkQpI48kMpopK1xWbyepUWB\nI9laJhxVy26n80rWOnahNMJ5zRR3ipfaMHCUXsDPODJcWk8XIXG9bWo7adXs\nB6ugLnOmum5SftwdXizECLkogGHrhmOLEEXKaUZy0j78YFmdbkasgOBsNwRF\nYXijEB1hLKv7n8Z4NlAtnWuMtHgW3K8DaY2GRryXecg9WTFofCivtMVM/8fd\nSsSM/pYVqjUHIHmoSG/BwedcEqkUu3WxrQb7NZCatA7o5me++4YJvpo95UZg\ncd3lwXs2uULSRXhMoXB79S8+FjJg72CL/MXDKs4LRAghWus7BebtZUlN/TTm\nm0R27I22K5YFixn21XT7m+SH3zxoRpvavqwAMWjToFvAx27Dk1DnJsTLw/gb\nh8P9rUMlOiviYg/gAijfOlYT668gFcOZw6PbzMhrUzSOWrPxbdFr73n1ZL0m\ncy8EI/qldZ+P2jga+v2im1wiOod0jlvy3fguHl6iMhksFJf+oZyE/93fgDxq\nUU+Aetsrzry4GLW1wXV8SqlGIxGTTwwnr7sNEwPw+C3AkeZocG2uO0jDQXz3\nDsed\r\n=8Zd8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"d507e2edaac929bf57aff9e62ea94d4f964ddfce","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0-alpha.7","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0-alpha.7","@storybook/core-events":"4.1.0-alpha.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0-alpha.7_1542861418699_0.4234274876792492","host":"s3://npm-registry-packages"}},"4.1.0-alpha.8":{"name":"@storybook/addon-knobs","version":"4.1.0-alpha.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0-alpha.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"821c76fd06a27b2f126e49cecc252e4782e007e4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0-alpha.8.tgz","fileCount":64,"integrity":"sha512-4SA1Qqr2ZFUR5+xXPzPk3lrfxDE5El5OLFZdB0w5avwGAst2WaqL4h61GX/a6o+7WHOUk+3NjHV185FdW3zN/A==","signatures":[{"sig":"MEYCIQDBdi+BIz0nVVAB3f8E7RoIhb8Wv++hnuwdTy2c3D/qgAIhAKDmwsmCSG7nBtAIB6pq2uUFsC85duiWGpKrodKAzyEd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+gMmCRA9TVsSAnZWagAAKR8P/1T5r2Df7G9oWk/AYtFM\nJjVyR616G1XArrpAFBBkdMygJRPUuvnsrFPxVIG+9321WN5cEp1nb6dUEuqW\nshsHm7i97hKUovhtPYApNlklH4X1bNBxLuaGhMydU7m0hOcN7mFilWRieQIK\niZioThsQjBc9hqDE2LLz998neHUW28DYAJmMF9KL5oAXqVm0v3CZRiCNYcGt\neWeQDqXvpAzMDMXqbgG0KrON/RqEyW57goKeLig1baXJ1Pzu/Ux/O0/uPGYX\nw/vJAtg/P0jWy12c75sRlq44n9AemF9AvtjzCqrXJEV+kmz5qiIfkmQFIRJb\nyWz41y1SYGCesrtCT9TsHcm5iwYxuZXvloHzBOwjFGsjVs7yg4fLgiLDqhxl\nnuhhHQIlVyeKD8W65it246/CdJsYW/vpybn4rs8ep4eC0Mdf6I938wphfqfh\nfMXrt8j4V4SG57643cx46Aju0xo4+eq9bpX5fSP7jB95mIXidpJZ3t90+sz+\nP3L1Thp+PEUot5F+KyCjsse4PN+/PWW/jTqkR/A3o7kCq/rho3tjK6XZMdVA\n4kIbs1FZyOrzpMkkupnNwsY7N1fpSFwtNiCoQMgjLhov3twbJ4zdi6p2pZKz\nZDkx02u/z5BeAkp15Hv3Lnl2wuub0/48aanQ8fLx6aT2kjH8tK3m5LMLDLXC\n/pW5\r\n=P+UA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"0833a4b8a97c8f95f484131b552c14a55194bdbf","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0-alpha.8","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0-alpha.8","@storybook/core-events":"4.1.0-alpha.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0-alpha.8_1543111461957_0.008318618165669145","host":"s3://npm-registry-packages"}},"4.0.9":{"name":"@storybook/addon-knobs","version":"4.0.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9ac559405d76a827f949bfe50b64fd7dd61d60e9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.9.tgz","fileCount":64,"integrity":"sha512-UBJfi48Zrd5bcuw6APU8meQItNHM1q4ZjDINfVt+sO1Ucz8cMWsCv9XiroknWs37DKzVVgoWa+OkJ09zTn9oXA==","signatures":[{"sig":"MEYCIQDwYAVVOy6szv3/BJ3XMqPdzCZ+emVtx9BUjKQilsItDgIhAP6grw2asnatfouBa+yDW6OS55Z9OGwck49Yq9u2IeGB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+sCICRA9TVsSAnZWagAAMZkP/Rb8vN1a0GW/71bH+Mmo\n2hglWQUfiloEmk3SgO+n/eM3Ey2Pzh1AIRHMnjnJ8E7RWC75PIGzWmr6kP4C\nEscaF7K+ErQmZjRHBd8n21eIZK5oMlceSsqxDoj0R92b8jxHGvD6oOmWDOqR\n3qUPNSGIbETyNu/mlyhgGx0+vIItDpKbDgysmo4orHb0VrYEAdS4jYhE8ceL\n18GOCs9JQ54oreisN8lI+FkC07F1ce+uFhpx3WvGfe7qZLjdKaBDDgSDbtco\n67zZms2Q2bA7vBpajkjvuUnBfbAT5Fk9IV0K3xxSCYsU5iqU1QwEEuLYJXpv\n86kHHSXgRiG27hsRIqdYLjd9oquDxUadHrw0BaNDVSMAXcQFFSRH2bILF5GY\n2GTyjU32cZQmwsqiFf7IeLQicjA6OqD/R/YUQyqGvG8frvIMerxgOoe+TL4v\nCTYxkooQlMsimE6u1kq3NxAAJIayY5ng/actc/W2fGrSGRPG3GR3CRefZG1K\njYlJ0K5Vm7t6VzRjpAlc2zbfD6e8DvGacdEZszeJTk6dDkSRwKHzZ63n+ctU\nK9IOyYZwIYDVQfT+aD/Q7rck6kKqmE6RiZmUwkJxGqjWxo800v0Li+laWk3x\nldhLCm+zgWp6Msi5fByQ5bFT0ijrJdB01NxAB55DpaNLOFD/i9bWbbRtPTNJ\nRBbr\r\n=HS6h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"378688ef2aaf78e29b2824853bb29235901f5be6","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.9","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.9","@storybook/core-events":"4.0.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.9_1543159943656_0.6339230538397571","host":"s3://npm-registry-packages"}},"4.1.0-alpha.9":{"name":"@storybook/addon-knobs","version":"4.1.0-alpha.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0-alpha.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9648eb712b539a83b113db284416e6c45ec00300","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0-alpha.9.tgz","fileCount":64,"integrity":"sha512-HxIbp7W2XFsvf4ghv2s/y5FQz465+9W9c1KPeu24JsMKFE7qcTUef6E2ArW7XCnejVRr+f9Bz8MoFjGxeO1hmw==","signatures":[{"sig":"MEYCIQC/YY6ULjRhLZr01+rXrcCAnllRN+5c5n0B2srn2q2CdQIhAMQXCuVFTODAgW12r0ibkmkVvyNpzh0OATONNb4VdPbE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/7bTCRA9TVsSAnZWagAA/lYP/ih1OhX0P1/AiZoRHxNt\nFyC9Dr+aqHnJkDyQlhCMXulG6In7p2zFT+jYu5zPSV7THs0ji/0iKDymRcFV\nVhC8jpHTKsPpEHiiApz3HfrYAmnkb+RS9B5hyTBnLgdK9fiq2i3czmG48Uh+\nAE5Tfeljy7kadtQ1gE4Q0GKh0M7b54CJN1nOiJgsH6aWM8O+opbgOQwR0F9W\nGr9wJi04aD8QfWovb8cXLRP1mrrOWY0VdGx6aq/5gPXzOJ+sSik0+2g/BO5L\nHU9PGAI5VuuRwKFkzQ02PPlBprs3H8hf3n1jhj03EUaeeVKmSojRbmmXhcnH\nS843pKTeE1VBoi4aoCrRxkiE+t9BTJ08JjFRozijR9BsliLJEi2WjBRgI+ZE\nQxF40OneGY9dPS7mhycx7Tdd7HBjUptM71BakDlaJBIcghjSLqm79RmEdxlF\n9WxivCt1tBtV0w16dTQjf6CCoCS7ImZcffGIlSBsbSi3F2TZYgsZoQcx/mTx\nX0yAiGYLK33nyyoxxfQ06DjWoUuk+uNVh7i1kLrWMJhT/Km3D/bQkqWJ8i0z\nNSQfQHpT4/4YezBm3KS+ZdZgxdyCRP4JeI4hMY6a0+SsddOolNyGI8YCr80E\nrnBoTcAVuWW70I6i+2mqL90eDN4DxkZOGhN5s0eZ06HHonflPHsVo3W25bPB\nbL8N\r\n=jzTH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"6b224a2cc63e72f684610dad84cf898518d2666a","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0-alpha.9","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0-alpha.9","@storybook/core-events":"4.1.0-alpha.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0-alpha.9_1543485138064_0.5165344987710074","host":"s3://npm-registry-packages"}},"4.1.0-alpha.10":{"name":"@storybook/addon-knobs","version":"4.1.0-alpha.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0-alpha.10","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"1b95f9fb23711722b2af5290170ec2943dd9de76","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0-alpha.10.tgz","fileCount":64,"integrity":"sha512-4qNgprSujmhqz5w/8dUIJxEjxSIfg1rZJw/yCIqghk0EtoMOhFzawIv6w+9sGYuOmtvcQYWLbH5yz1z3KR/Opg==","signatures":[{"sig":"MEYCIQDUd27vCniODmPaxlcIKPL/H9l5W/KUjVQOYTIzji+xwQIhAJj5auKucED8e7r0jI3FJnkPjxfwIypfi9A8dWliqroA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1243199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAf+yCRA9TVsSAnZWagAAZ6kP/i7sKrb+5yEzIAs1QRwr\nyrCgldsrjiX/ytjg3fB4sWBXbRY/ziQ2Y0xqHmYwHDqhbKOBYZ2//JrckkvY\n3UZyunxQai7cytbTQ+IJitQnEV79BGp0TJAH0Kx+JalwPsKagU8SMJdoHIEg\n8VBAqPuK+5l9aSj8zjKWdje4SdXO9UdzvDHavmovJ26jl+e4Uyi41JHV8zFn\nXy91NMB1xeFEMfV2gP7i2ZAjqlAX916m1rBkKEPHuBZA+8YomzrmQ1gwIuyL\n+omDxl9nmMZGe0kpmJJc+sjETe7OWWbJmtnqUyh1EUz4n1Ko5Ga6l65/fSx/\nxQud4tNUFWYb5R7qkeD46bskTVf5UIC2Fg5pSJoXnFj0rCbdRxIl5mzHqVRq\n+6XKmpygj4Ig/2TXIg5MWdI/EPSe++ummKUf+VZrIG/TBTvKH8FgQaYLyHOM\nEvzvDKYRVHeko4ugUyASbtFjcFXsEAgE1udJYCmgctA04JH7+fv7zYiqS5Jp\nzAl9y/Tft/QF3tk6I9PGKBGZAZJExQABLIJWs/+AQTHJgokf7bPtmd4JY+L1\nj+PrhL6M+Kj0yvq94MROt1fmPSUKmdUYiRxAfLIWMOQywzxnpuADBSVfX9dV\nQyLuXyvGej60yAPOlv1rjp+XGOrM831juD3sSLirQl9AdZURp6RgQ5dLgQsI\nP4BT\r\n=YRap\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"3cd3ae347e7bc1edbf70fcc8dfb4959430dc9bed","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0-alpha.10","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0-alpha.10","@storybook/core-events":"4.1.0-alpha.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0-alpha.10_1543634865606_0.8406832645301103","host":"s3://npm-registry-packages"}},"4.0.10":{"name":"@storybook/addon-knobs","version":"4.0.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.10","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"62e677d6102f197bfd91ee5d335672121aa52b54","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.10.tgz","fileCount":64,"integrity":"sha512-4LEwY9IwWV/Jc6BlEyPplzkiaZT1+ZgjhU4lnmuIHLWIdwSc0Mufor4Dce3STo8ksQK2LW3xElMV9254sBLMEw==","signatures":[{"sig":"MEUCICRQ7lfNBuUCb88EfA1JRWfwlDXp0GZcUosLB3z4l1bsAiEAlEIULOp0WA5NLV0xwdE1bdbvkXXU/Al2TsRoW+Lxpao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAxBQCRA9TVsSAnZWagAAaBwP/3aBBZ6u9SXNZ3YGwfE8\nkrYCHuYCpBfT6dmTYG6VN38oopvBpmEjU2somIpd3/6kcOAOkEQPYM3s/8A8\nI1v8pK9FqeXqRC+jjvOekRQcj0l6fQB6pl8O8mO1UtwVAmkTeE4APG29xtBz\nGOhclHmmBDFAJDNAHwnFfyWOYdzvi0qtdLYrh1h5EmPv03tzGKJiCePnu1Pl\ny9MRT4eeU5fmuTyc72QjAB3vktYOUct+DVAS4mKJha6bE9+GkcE33PBqFoOk\nPns09+K4Zf7Ylb54Iqh8f3OGuL9NcJaHNYUEvALN4pUPAMQBps0tyev4nv6A\nGHqIJqx9ckBJmLRSSEkrgvOpxzvIyX0PlMZjmRDRBaTVJOfWZedhItadwRKc\nuiTATN7jhydp4LjHKdj/630sKCSmWDNkfsDA+lKGMiTvNY0ikIp5wjCTg0SO\ni0XAyTdbmpl3qtkIzlfxv5us007DkcVBXdh8SZqj/00tp/ONYLM6pnovmMY4\n+KtDgoXjzu7wZW+qmfGgtQADEW7KNJAU3KbJSUNxKfQZAbVlvIB45eeaKaJm\nn3iiAafPA++CWMdvba00K9/STwJU2zXyOaw0LVCFXMKPD7hdJHADRdki/cND\n4Ki983bmI/HmqIbLXPBMkNActZ+wTQSe5hrBYqAxKLXU/O1QQz6pnel0luaP\nm8BZ\r\n=JbH7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"c6de6497c36e2a3fdc5c5514a1648ee2462a080e","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.10","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.10","@storybook/core-events":"4.0.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.10_1543704655644_0.00695560881548718","host":"s3://npm-registry-packages"}},"4.0.11":{"name":"@storybook/addon-knobs","version":"4.0.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.11","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"14f0de5476e5429dbc745eb8d97d67d73497b937","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.11.tgz","fileCount":64,"integrity":"sha512-bCWhUjqIzEoQ2YfLIE7pe16WpJ7sCf4P+HrqOyE7Cko/xo62S/jfFjuuspNbs6gB4jKyG/WAXdiS4BtxPMj1ZQ==","signatures":[{"sig":"MEQCIAXhgHl9llOAS3ub8ctP09vJA0Ma0x37OAgF7z9NyYdyAiBkQ0x+5a9MOB4tvhpTLTB/L8rqpWeE1lhBreCzPMVVIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBJmyCRA9TVsSAnZWagAARQgP+wZSynpoWeh2RZ9yUE9R\nIVYmraGagso0ZxbGOrK7Ergd6O4iSvsqdR9UUP+trueESzMVqACUQuiWXVeR\nxJV/Q9EqRhL9hhr0cBvwhtlR752ivYUTi78q/3sIMcHPmLY0WbhBIYQwzt1l\nZczXWJ1zRCL4Ft1cEEavvO3HTF6BZ9UEZI4uQZPHHeVF9rjEulYJN9r/UiMq\n13a936uNjrNnAzgMLSc32uCCQ6IgVQBDMp+ThHBhPc6D7ykiYIASYp7Kf5je\nqUNWK13ViyOJzgQv4hF3oaxyOBSpuqgt5i8Rrk5t+AfKaMkOsNsKOftmLnou\nXKKlhp4ns/EsOXEaFFe8BLmp/vHaGeF2EvUJxOaHXMK/4hMUhEqMaPclikpa\nvM145CQzxzaBWnpShBFt/TztLWtP2DNFAD2dJUNkAzwIdVJ6BYvLZpOKXlNV\nnYJEvh3aBPnefRYum3buLqYXfyY70khX7o1dxuG4bptjLcmHJxyihHoS2GXs\nraJF8t31ULUo1kLrGkX5iyhroH+Hu9nzGkL9vI06LjHuXHOaU+fei++iMaCp\ngjKC1kLMWtR/PCe2GBeTucmbL6QAacxLa2ZbdRBFfjBAntdNOHzJeY7b/ODM\n9BSDDwAbYK5azEgpsKb1cz4VVgTMCgyju+lEQKgTwGpYlFKZ1t/MSAlhDRno\nfw2F\r\n=JZM4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"99598473bc98f9516cbf855929b54769607fd7e9","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.11","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.11","@storybook/core-events":"4.0.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.11_1543805362169_0.3995710417683853","host":"s3://npm-registry-packages"}},"4.1.0-alpha.11":{"name":"@storybook/addon-knobs","version":"4.1.0-alpha.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0-alpha.11","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"acb86ed935f3292b50b8054aed475d38e11ef778","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0-alpha.11.tgz","fileCount":64,"integrity":"sha512-Und51Oc411/ZIMJHsZHuxpDJsiR/hiOTeLMRZX3F6cUPqWL/HjOauFbwOb0MMd/+Js99w9nFiYV0rKeZcUXHDg==","signatures":[{"sig":"MEUCIDD6KRBXOs/cw/OLdenTHSvgF9kHdblWSYPs31lAhlg8AiEA1rpi1Nd8NMLd6OlMjle7VOx8K9VX5ByX7LFcUdqkxx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1258932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCCOmCRA9TVsSAnZWagAACowP/Ruhl5eOz7kHtcuQeMib\niemRYyToPzi5FgvzTVlRnVbd5Rad/7L+RJzdiF9BItwga5wEsV0us9VKs0q0\n6Zr1Lr1IKIfAa4nphvqiCPcgMmdCUC5LqF9hNM/m+YAUzqWmpcEEw7FxB5zi\n7q6gZQVlRifDC5urzKNAyXdv6w6C0nqxe0WQNXgrVnLN8g9OWXXD69AbldXN\n3CFoY7NOguSEgRomtYMjyEAbGymfUDnO4Z92LtTl34A2qmmeFgw3/NrXYed1\nbJY738gbqgPJMDmelPr20fCHZK3cZfFaLdZegn9MN6rO9FJRl8SaYSCnQdfV\nXcwMLoaqMzNDOCxaW+oF5sLrLs6TJ32sirM2FbDjX/mIltJhGGXUPSI5xtNQ\n34cB9BJPqp3XRgjrJ58HXLxmpVTqUXk0ZqM/E7L8xKG3KLj3wCnohVvhk7Qu\ne99LDTLAxsbdkKpr6CK5SkVSx4HvYJmFVm3/cI1MJBzGgSA1sO9/gc4J/flj\nQa3MNKIuD3FubdrxD5ipYLra2IgQOKkBhmMlyD8lmCAl01slMeI5gKRcnSTX\nTrQ4bkrC+XN1Xl5/7D6/vUPcNV3IhVdULzS0N+aygcgNDLICP2QAEAO3ivUI\n8W0Htpd0sO8BcRQt/P/VvSmJRCu3eSza/wMO+q2GU9MNAXPvOdO9hfa7b2vu\niyAn\r\n=ecfW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"1e9e66bd9d89584aa39470e20e49d176962ef082","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0-alpha.11","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0-alpha.11","@storybook/core-events":"4.1.0-alpha.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0-alpha.11_1544037285926_0.5541936749075633","host":"s3://npm-registry-packages"}},"4.0.12":{"name":"@storybook/addon-knobs","version":"4.0.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.0.12","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3441145c8a83f7e09c2c615fbe9215bad4958dd4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.12.tgz","fileCount":64,"integrity":"sha512-8F8tzbnF8znSgWGC3UYNDXClv/70NDo6LYgrWpuDvE8pYZ2/BJe4UlcNyhxwsYIT4/ThStn6zmKexJ5H+GiX1Q==","signatures":[{"sig":"MEYCIQDFF2pfIuUwfCYWnYeejthsXHs4Fx4PWSJy3ECme3LCHQIhAJZfw72PhzdR6E2GajDq9iUQmSerK7Ad+JBfeB9AdWsz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1242272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCCdECRA9TVsSAnZWagAAn+AP/iNmnJyMDOThoRD1xo+t\nWWhpj9SGOCUWAAVX/7Lj6qKYz3em1IN8uVUEMgfQcBIfYmf2gjqE4ezzAuSC\n6r+RhYHwjlpI6AQCS6Ankmzo1ojRiIuiYaG2E6L9TtDwf20Pir7chVRTrm5w\nxF019+VCissQpHBQVEnBz6Nt6yKoxQpAU+qMSiT4/qNDBMGYp9+m8Izq5SXm\nWbUshYd2zS/LYDCHR/yzrSUrU6PhxDO5vFhWDwznhBFdL2dOeQnt2c9R7oFl\nXk/r5QvoSY2Mh02mIPta5CKrFC0XxHHvHNUWLP+6dv9pDZTgWUjHnF0OH5Pe\nVpHZ6Fb9JXCI+k1LKGDcjx0iMyknQbyPLZyG2kuG8i0Ptz+JpP2F+faTCupp\n/N06fV7vDus821tcPksu4J7lBN1CmHmHF1Y16ZlOqKfN/QRBdgPz4qP50KUf\naxDV396vt2OqAmxRJPRAAtxSb/T8jHR0XCKv1oSszEPO072FKWIxFf8NyoKE\nPhmfUL2V8IANW+kOuMQtCiCrqfscFW16NK+3Ikhkns1ucapJxWOAsi/kg8s4\nrUMLNp4b2zegW8U9Q+p1eqj3th8ge3iBZCd786VWTgS9ROnQGlrXofl8nseC\nmPkCd28T6a27sEdXuJN+zACp2KoX5lBxl/U8H0os+BUnYBXuY48RZFoFB+oH\nSoeQ\r\n=07CW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"d22d1d183e34417b55754330129c1c5902d4cbfc","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0.12","copy-to-clipboard":"^3.0.8","@storybook/components":"4.0.12","@storybook/core-events":"4.0.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.0.12_1544038212247_0.9877856582282027","host":"s3://npm-registry-packages"}},"4.1.0-alpha.12":{"name":"@storybook/addon-knobs","version":"4.1.0-alpha.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0-alpha.12","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"6d3c8375f9f12f02d1a2c827f365bd89a3e56ae2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0-alpha.12.tgz","fileCount":64,"integrity":"sha512-Yjn9f3OUq6BVFg51dYl8SRSF3LJl3Z2S3AH9HjnG9pkqnjuALWfpEFqhGiIydBSYxfqmgV3iKpVKyWNedwPxYg==","signatures":[{"sig":"MEUCIQD9+Tn2pcWO7CVZtDX6ocG0lz7g3Dho8RXvLZcn1fy8aAIgEuzqVUMIXDykKFuByT/qxCM+dav/BB3DLgfbT8MaQTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcD/SzCRA9TVsSAnZWagAAN6kP/17H5YvSuTZQX02Zr6Om\njP/tLWjPQbj5carR+njiT3SU3ilrJtxAu+Popp8s6taHlfL9++MM60zEZGMx\nUOj57aZz3tgnaVmAUoFaUGWW5R5+ljic/c3paQ7qQNoWLSE7QQJ4eqHfVyK1\nCAjxWFx+tshOOS/9CG2t7/EfKJjckz72Wr/vknCroIwCoSZE1EVXtyynCGmc\n8nj+i0qsw7K+EOniHuQNs2kFdvev9UGx7ffkno2Pdy7n5xevSW23Dydrk4HR\nsxS6mWi1z/6n+Kuku8Cf1yLFsjvbx2aUWHhEuKxo/M86LvPkxkVxKIMALNNi\nsBFZl3sXHQOPd/rbQTwwEyng0VrUjJ8JU3vobC+y9y3pXgGAFoAu9j3xOKaC\nEM3eMZS/MfE3/iI3X7KLiVEVi3THCJWYh18Z1AD8Noauv/JrOGSI8x1eFGSW\nCqTMsYT+86YvrAH5BLWkvNuHaEQYlhwOh4ESDXvndmixCmo9vsoxo2hF/pAS\nSLi6X7x5n0IXtLUn1Gm0157F9csWFXF1Rcs+Ssd36lZ3fIUMWtFUg37XApZq\niajS+ZR7Z9atvYFEbKaE2nK38vqr4NLhmLLD8MFZM4yaXsvLnu26TCxOsL0+\nDj8Wyc3wtvNCtlhhQYgS04sctQTeZZ91iR7gfr6YhHzXRf82bdlN/Il8smoz\njwLb\r\n=b67l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"4ed93b4baf960fb7d614d55dec7981854cc844ac","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","dependencies":{"qs":"^6.5.2","global":"^4.3.2","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.0-alpha.12","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0-alpha.12","@storybook/core-events":"4.1.0-alpha.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0-alpha.12_1544549555054_0.9153789156235141","host":"s3://npm-registry-packages"}},"4.1.0-alpha.13":{"name":"@storybook/addon-knobs","version":"4.1.0-alpha.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0-alpha.13","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"ea44dff1eff879272ada3bfec3ae3d94f26318b1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0-alpha.13.tgz","fileCount":64,"integrity":"sha512-W8UEL4YGWdweywSSgXnPIaanuTs0AJ3lAXcjEkb9iEVtp8sIQs1mdk46uIFllb6/5LpE1WUeNdZMBPG37ghsWg==","signatures":[{"sig":"MEUCIFvUdXzWLmMZc4GJMw9Ov1IAwtKEYQqOTdgjhEvVFkD9AiEA6ytKwHHcJkUIi1J5et0rfPVp7bxlxGom1UM9Dr/DjCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEUnFCRA9TVsSAnZWagAAiJsP/Ryrux3hsMRfAghABucQ\n9PKa52b0bkDR1gct3qObjRmkSO1S1Xn2aTE5sU891dpe5Vc88m31NnSmktV0\nCSDtFNxJvuzvNXHMmhoYd2+2naLDojawlUkJ8pN3ZkskQ96Z0G4eQeFJf7tr\nko+VGue98s0FgtLSzW1fluY3/aEdAMwsjOTXZR/7SmAi/DolXLSWvnFGTksK\njQJQkXRQjqrdKGGKrMgOPuc0ydhqvfJJzuAv1TWF5tNrEgER02hnHfa2mpJj\n/8zOQaIgf0OmE7XTMphW52+GEVJcgxAchsZxTD2bu9BF7n/6Z6VDYn5Yjiok\n5xFcZFh4P1cShIJjkcUHye7cVzCNoRCyyuwpHkGJaqHui1DTNanRsMJC4inR\nASnSVIB/bzA7AD2inEj8ou2gdtVRZqSVMoDWHiGSyNUGRiw78A6a8PLF+5R7\nXOABdWyyM7TapAt6vAENUqQgqCaC4KMb2bU245U8C0StBZNl+rlQxWWu0HeV\nRF5e/LGNL2Ig0sY4i4Z8kuzcc21zHrwgL7Vdu4do47cSyzBsdUvwfp0v927k\nPXL7yzfgZVfYCU7uX70qZnbbgeyorjDxuzZje2kKElitmiIATSUsu+Sbxnkz\nqC6Om+sUlN2eAVnq+cyfj+YbfuEhqc58THjExAIitpZGxq8bHHspl/bmMHRg\nNdl0\r\n=TLMJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"de9516f278798d017ba37ec46c28a443343941f5","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","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.0-alpha.13","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0-alpha.13","@storybook/core-events":"4.1.0-alpha.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0-alpha.13_1544636868074_0.395663361588642","host":"s3://npm-registry-packages"}},"4.1.0":{"name":"@storybook/addon-knobs","version":"4.1.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.0","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"be5fd93c54a420981abde761dfd42d39613ef4cd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.0.tgz","fileCount":64,"integrity":"sha512-1dE0O1kbDAdbvpPCb4d4OLeYf8quHFDZ6slxyRGq60ohpZmBpSZiUDBO5/CAFNdcG+4vNkZHhKhbQoz5G28X1w==","signatures":[{"sig":"MEUCIE/nDHkdLFX/epyexmfkgUXGFBue09GmwCJOY5Wh51GzAiEAlW62lEmq+jGl07s7FuMb4St6wcMVUOY7E8KHuD3lLWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEVtpCRA9TVsSAnZWagAAxzkP/R60EabBS3VPJFRBskZn\nxBLVUqEarh4RE8GzkWl88pn7l+ie2jraCqevkV3b2KcpKsCWN62s+5Y0LCpW\nj57r/tKBo9InY47HnOCl8wZ8/lczUDpjbk8h9D2FBtIjuQLzP4RcrOyQF6KL\n7eKpqtYs5niiCHqj1i5AJmUB62qhs794D2U+2yPLx5iJ/vmWj9KVww745lVn\nVwmZgszorVQkhJYjOnN+toCzvV/6IHxPBXDnuEXgz/qHuvBwRZDUX99ZpxcA\nH8oeHi0xyKQVl93kOSHHzkYSQH0m99rFL+ZzHgNcIgInNwxwFnn6Mm4nbziP\nSFlh6WkE5Rctur7z3d4rCg1hMbRmijOCdHeGG//jbBRSJStcdh0HsrYPkQHT\nrJFqK7QMeUc5BDJ+B69EPV2WUo+BMjVxaoyX3bbJ+eazzZG6949OYq4AHn3o\nmwqOjzkrdWsXJVl0RITsNth1u/pSOhX9QFAHJYyu9dGgFr5w/HoaoeklIZ+l\nhB1SNxjugJdGEdDSMVIUpn3mBOLTEzo2sNbjSeWvhndWLh1Rn8qG6F/muYQQ\nSVgj1DYfACFbbQgn7z2/FFG8eSAx4Ta3g1zAe8CNgUO0DmlEBFjzYHW1LzKo\n6K4hEXrCqdPghhVv54Tgax02JrKYydNt8Rg50koBD28967ccwIvkdIdsFFPv\nv0Uo\r\n=KR5e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"75d45d3d10a182cac209723cba2669512bb436d2","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","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.0","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.0","@storybook/core-events":"4.1.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.0_1544641384767_0.9516313231018534","host":"s3://npm-registry-packages"}},"4.1.1":{"name":"@storybook/addon-knobs","version":"4.1.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.1","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"cb131121ffeac10d5d7ddfc28ba036449c2a4a11","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.1.tgz","fileCount":64,"integrity":"sha512-SmXdN8YTGkWijKZeQw/0IkfP7pkLaywlKmrb/6eyb6fCqwhdY9pPmAxiWPBwmBjozQPYcYkAzWi8lANuehDt2g==","signatures":[{"sig":"MEQCICZnR6t/z0PHBD297Ok0FwWUFuL/wsOaqJf8kLB6/yIaAiBgiLtbKrnaIa0AUxXcEm/izYYB4y0gBaYOeRiyPg+0uA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEbS3CRA9TVsSAnZWagAAA+kP/AjWXKG0/YT37/Jyh3NO\nsigcmIo3VkLpUjT+qHE5tXycKZAEHfXutICkjnrZGRLGo+idcvSQ1vHBzMKu\nY4V/XlI7GBQEaRcuFlJmLWe3ppBLLmleQp/P7WC5FyRn3fShaI+pqRuAQMZE\nnXsPv9fiUCWPqu9ASh1P9B3+fQSITWhuNlQfMXi+eqbXfjXgflxr4u8sT9te\nquJaROyRSsdLLG5ND/SFxOxsYDYmneOw63usEd4kkMmu/ItC19W7+L6IMwNa\ne/LTstRFW+XO0n7VohmiVr6vi8499ILmRYSD6yEL1rMpdAkeSC1qoqtBbr6p\nyauk5VjmeazBBel27DAd+nP83I1q57ecQLIFfgVJqBjFj3tQuOVQVRpg0LtK\nvLcjCKRTU61FUsa0KVK9JwJExDTDj9EiuFZsMzhC/0lH9ScToNAvv5zy83d3\nCvDKmIyxDlAEz/2wg9P6NNBII0VJmnlbG+iA/0CY6250NpXJHnLOh7tZPKIY\nmgjEvh73eymThopSTVYzgYT0zISlfAEpcaLZYaDGuNdWven+4s5cuAUpwU+Q\nKJBBTUsF7juBJ8hxSr7TehsnxgR09p2N/3g28Fqy6O99tFZGE1ptJc/EkfRF\nd8xz9BgQr/v9rhTjGUeOoZdExieBnN9WCg2Bd1aygq2VImFIIB/B4CqANo4L\nMCU5\r\n=PdJO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"03eaf5fe1b473f760cb393fececd20461074c54c","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","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.1","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.1","@storybook/core-events":"4.1.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.1_1544664246669_0.2834537062115394","host":"s3://npm-registry-packages"}},"4.2.0-alpha.1":{"name":"@storybook/addon-knobs","version":"4.2.0-alpha.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-alpha.1","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"38b72af8e48a2652ed232306da98730830529d17","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-alpha.1.tgz","fileCount":64,"integrity":"sha512-kqoCHkj9uzGaEkU3WXifSIF9RtfmngkuKXkClqRC7UahBs40WfWBGjhv6sBt8Stvq3v6mBey+CztAEBF5Pjz0A==","signatures":[{"sig":"MEUCIQCU3jdwT8MKf9IiAp74znsm/EOA4jAdH1ZSJ5pYC7DisQIgbtF+oi/lUQVjVXzW+uGPSL9/zOBTlxijIxGyefsvoWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEb23CRA9TVsSAnZWagAAZh0P/jJVFw4EM4H9JUgLaDKn\nCnXL4TIPsGuG02qHB/jlNKp0HHRWczcGHzHIKd9UvUMJMbiX3atcrahw/fDD\nLGWPDrGE92nWKGgwgcUNr9NCetS1gF7RQFCXA9+s6OUQvQMnd5dHUBx1/PKg\nOGUj+/Md8oh9/6SaRObGBsObJmmuu8U7v9k7XU6hPD5dphiLmeYVNB1kigz3\niPfVK9sdCPyps6COZN9eimb9Usc/RG2OjfJVOCVX+2UKNdTeii8o0ZA21AR3\nd1U5HjehRDYiY1TCpMZwB3V5rO8dgdT4kIFXZEIEVpgRjN5BdhWF70udqxlD\nM3HPsRmCcqmPpMaas7wapZt0bBjw5M7uU5RKf5F1gu51uT25eXY+gUWuufDv\nek3b0QhZgXJpTTQjnp3DwKXMlDeMmflNdHDG/6qz1FTe9wBmVNv4ZdqAjFaf\nHy0lLli8Ycm9eEFUwcvY2UklZWzK1Gxh8TQ+FhZESyc67e3SIA4uWejaOsJJ\nvy7EbtR254D2zNR2luwqq0H3fdq4Ibeahvh4iLjDeQRg1++d0/jMM611VzhL\n93iGuRgFztMAJv6Y5k9sg0Fw4EiT2Qbu0QthTJ3TWfp2HziWevUTOxE/0AXJ\nh/ZSPw9OY/7caEPxcfc0vNROAgmdnifmjIQBNtBK5S7nppWz7/R7U2mEvi2g\nIfTc\r\n=y3aY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"9d23c3dc1a9647e8a465e4032322f95c0f13a870","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","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","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-alpha.1","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-alpha.1","@storybook/core-events":"4.2.0-alpha.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-alpha.1_1544666550495_0.09460487739882129","host":"s3://npm-registry-packages"}},"4.1.2":{"name":"@storybook/addon-knobs","version":"4.1.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.2","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"bb79d443a51788701dc2d97cd3b821267715cac1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.2.tgz","fileCount":64,"integrity":"sha512-qtdsFhzAoHN50IzWbqE2bsPkaaOMbBb8OtX8kriPqSJaMkNHYBq4EyB23Bgv7zIu9sk3smoCUBA0ArhaKikL4A==","signatures":[{"sig":"MEUCIEoC4qgo6qUyOTKPEvvjFZOaS5dM/Us2lQCtRue2Tg7iAiEA1JdV+xEEu13nJa9RN+4bzWfEO9lfu1MHVFYK42ikZJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFm3wCRA9TVsSAnZWagAAyT4P/RmvKvE09P9/bR76dB1/\nX+l0RuqKgn5gXtORsZBZobol99IqPywFoQJ5T5k2rs31kfCCzY/bZEYv+ajZ\nWsa5oVbGtUbJGxklnyoH9V+iciOgQgT57Mv0fnwECa8SOxtL2GO/BnTiFimm\nOGa3uRMNcZvM5IaxFncVbNx+iuCczpTVNAzui/xTR2b5vXRUM3zMppJocQAs\nq8E9am7WkdzinjSGgBImu62LVA+Hu5YnIJebGn0zXqDhIwIWQ6g2iTo+SbQp\nSnhidrVE82NHCnYoxluZyJEEkJQ/xUcQQ5ncGsEKXOGZhz2I9B799pBaKlEv\nkC6NIIYLMq0Z199KRJDFJPlDJoqDWmsR++DS1MM5abhv8hSV7AId1aV2Dkvl\nW1gb/R9NbN2Tz9ghjoa6oE5sumFz6FhnMQ3qHEI2stlKqHtFdxAvr3qeFJx/\nTFiqbUlNENfWjcMJmv0jSnZY7nyw8v3273cCXQlIikWTLOEmhGa2yZ2fb6YZ\n+qj4ZSlXOXHON9jp90L21FKDf4c0NprjIwbMiwXYf3erM2uGP1mu9Pcu+ieF\n+FJrvNU9k/GScv5yoTymykNJzpZl4z4YcOsCnIBEXIigjk3tSPARfjF9XXE1\nsQAoOdffxab/ujmEE5gdLpIfkr6O9LAuRGng+auNHGaAfDs3NsTsWGjRQxRl\nfutA\r\n=qOfL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"c4a0f5de2bb8f8d4bc4ca3f4ceec0403307aa101","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","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.2","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.2","@storybook/core-events":"4.1.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.2_1544973807938_0.5207684784631303","host":"s3://npm-registry-packages"}},"4.2.0-alpha.2":{"name":"@storybook/addon-knobs","version":"4.2.0-alpha.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-alpha.2","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"200e1236d851db0e58236091b3972ad3da06d5fc","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-alpha.2.tgz","fileCount":64,"integrity":"sha512-Gfb4E/robSCnomgq3vXXVJR7CmedhebeH4UshaxTr3eKNXf/JQM+MP9fPPGMQTjOjrxlmsvud5D4Ksu3vhoT9w==","signatures":[{"sig":"MEUCIQDIQPZsY2f65ofIm1P8ND0tmHA73sr0Nif6TjggbSdAPQIgFbzA3PD1BI+95sKOnpSaVSLl2zKxzGr8tAm5ziErUDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFn/VCRA9TVsSAnZWagAAgAoP/1VuyhZoqLipGcpjfLZV\nMASMqJ53wJh68yjYEydSzS2lU1EkvJA7j+LTL8I1iaS3hznX/8pnuFberEEW\nfGrnY5HFmIMhsgahiIB034sfR05tXEolprdkaP0FNptNhIxxv9ha1bwbDgRW\nB6yt2F5eIUUQMY2f81L6sPIsmGSqRxHkBIdsSGYYuINkXcNThnTRNYVnqSk7\n0STbsQP92OQlu7usJI04FkD6Gey+gi0fAtR8f/txWB9gWtDwhk35rld99wV3\nZj0VHmJIWnoFLOu3VerB6YQNhL0FOlXjDPXDNwKYuvZw4xlpMFyQWEVD9e9F\nH/pcdvhNjtRIDF/Lv+n/fAO8PktgmNYLpbvwB37rcabf76ajMSppy5cD7k64\nWbW2selWxVTkxke2I1E9KRlQTvVqpfH20rG0Ky53iwiSTCC5MhTsxS/3DJD4\nEIa33aFZax0ISXY1hg0SGhfv3HyIYWL97PBblmpxIUOhwqHdWMiCVvR6hXyV\nq2zPr5LDemro7NWsyO7E4vWBcA15xDDPN84zbGK5P8ToaGNAyPhhsiiyj2z+\nQjAwKeWcEFa6R0PKw5FOWVsOeDDbFOI4LyEMQXYRYqKChq/TI64ML6yfjEla\nTAIdVnhRdlAfCmSyg1B0i4TnAmC9pSz7gHijUP1kPZcvOIz4IGWYAg/6TsBZ\nSSpR\r\n=MSzY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"abf2c4e1250d5d4c55b992d85f991e40327a33a4","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","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","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-alpha.2","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-alpha.2","@storybook/core-events":"4.2.0-alpha.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-alpha.2_1544978388645_0.23033266712039868","host":"s3://npm-registry-packages"}},"4.2.0-alpha.3":{"name":"@storybook/addon-knobs","version":"4.2.0-alpha.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-alpha.3","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"350301bb9f2f45ee4f7ed42f4a6bf6c9458a25fc","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-alpha.3.tgz","fileCount":64,"integrity":"sha512-A0e/KeRRuk7Pi0UVgd31UDRmW7SZb3tDAzexZFTFU1969drbBn/PlrTfkvZrRv4GqOTSxHX+Syq17bVjih4VzA==","signatures":[{"sig":"MEUCIQDv1oec57yFyq7AHzLWswbksLVs+yWJeaeRdfuqlbnKEQIgapTMcAWMqHOAw/KghGfu2veljtk4O5E0V8b7usOow2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGQztCRA9TVsSAnZWagAAMiUQAJq1FV5/bQehFmIdmJq1\nLEb1ky31gWAyx9FNNJDKGkQ43dk4wI7mBJTb+a9dVXOJvDKkFj3GlDuFdScQ\nWuo2rc/ikwypv9P8Dit1E0plti53SWYVEwB7WScGSNhORDywwOvh7l43dMbz\n4hch7al2vG9dbK+pncHN/6MseqmnjHh39REo43NsBWHXzrWg7ljp/hz0GfBZ\nG6YECdwvGkVALOAsOrwmkw5YP93MXbtRsqmB4ZdUOBE2xpzipBll+EbXwFsc\nL+QWznHxlzDxpBG1i7JRCmq9Cj0I34SPsF55QMmorG/xUJR8FFCR66ppUqnD\nyrMnoKdpsM+H7LbK6442V/nCqr21Zh9Ftk/8q/Oxp7j/nJRm82QoFWzFrXku\nuT78GfRch23Zg7MLzapSmC+jlK3DgrjuA6QKjTS3gXOvZouUXHK9Nb+JMsHC\ntFVOY3Nr55wsg8qt+5FJE+UhRRGJ2tmzr5Kfvz1Nkiv7DVxIpCKJdZIG639h\nGKFVMf34Rz5H+rrHnHjCFjqdSbnSRE5RHf2wgBqIK4pnB/RsVfC1MJqHgUJS\ndrCoRRF/+DHkiv3uyNhp+Mer3gblf8/PArtHy/gYi27Po3F9GMbicM2eL7YV\nCnZ9Qc+SWbNQowrmzY3ZT67SlWkK1GsAA78FB9IvVnwlAXwK4uPQxED4cY0l\nTO3v\r\n=59eQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"15d34d0f3ee9fb191434bb5447824beac4f360ee","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","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","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-alpha.3","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-alpha.3","@storybook/core-events":"4.2.0-alpha.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-alpha.3_1545145580343_0.6588842754506177","host":"s3://npm-registry-packages"}},"4.2.0-alpha.4":{"name":"@storybook/addon-knobs","version":"4.2.0-alpha.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-alpha.4","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"a4be20977687330dbba0dacb71df122e1e301c70","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-alpha.4.tgz","fileCount":64,"integrity":"sha512-LdwpI1NHek+GGgVTtm0fM4r0nSNChuYJQn7YC6BmV/SxOHEjNC9rfy33gYBtQ0fEvsW7wct0+aHjTC1Shn4SPw==","signatures":[{"sig":"MEUCIQCDku9tlBM9UwY+JY0PPWwYI4+69NXKq8dMLvtCkcKQPAIgBmzp6YO+Y0uDEN0ob4+E9MCl1HwF1ZP/HYrJj++djCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGfJQCRA9TVsSAnZWagAAOcMP/3YAh21ChiPYzSebpHpI\nKsCZf6BEzkSF4wLPoXIOsCmMUDRt2ZH9KBL/GVZMv5rVP1Z8hyvoLSpkM+HD\nRj4lo3S4E/TqR+6JCRhkcbQ2BLUR6kZp1WtPO4neINPVzI1IkoEt7gSvOX04\n33xJmjb3RZrbAjHU0cBDYEg51UCEzQo3NLhEYTjn/FeRA3cqDWUISf875SRH\ndSgfzsJPblnIbxoE9jhOqMRdWn8RWlkVR9k1vFqJJ4qJrLOGW5u2bJrHwfKX\nqPYEudZHIJos/IMSbqmwBL+8jHA3wkeIBurop0jgKbmcTbg5qK7rbuYbhS0v\nYr+NTl4cEF/Iu8Z40k1xC4XHuhMOrjQ5/CVu3MXZnimz9xGHnhNcs7qMBHQN\naeaf+JDP32YVcxqOlp1nw3geynEJ6P4wFNtmRur8rt9WcFZIwVDK5gkfOWIl\nEXlC8cEZTacXSB8Bd454qadVdIgEXJI4vuQHPEdadBzd9gGQs1gaK8FXL3F9\njW32pYQZhTvh2A/ipa0CAwG5b8VppaqsZOI/ZeeO5Cg5n7KU6iVoqCRXBHa8\nn4SqUOFgeWbvNGCRKQj/piyejYB2aKtjyTjtMSy47yuJcVXJzmivZWvLoN55\nkWB/v6DVv1pzQ4xtw9KS/qyrdWHnlNb8eMJFSE0M9OtLumGZRKudUUqOz8gG\nvUJq\r\n=GJac\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"a5b4e89e4cb2e2029d0ac881aca6b19a454b1821","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","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","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-alpha.4","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-alpha.4","@storybook/core-events":"4.2.0-alpha.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-alpha.4_1545204303931_0.0759059560171853","host":"s3://npm-registry-packages"}},"4.2.0-alpha.5":{"name":"@storybook/addon-knobs","version":"4.2.0-alpha.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-alpha.5","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"1c69cb60e9d38312202a48173860b32ee7142f69","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-alpha.5.tgz","fileCount":64,"integrity":"sha512-rXZHvrn1qHZ75n7mAYbCRMgsxkIQdrcD7QQBmdWAT7L470XCXbKtXxbiPFig5JplAS+cMDs0Eaq9dHiCUEyz8g==","signatures":[{"sig":"MEYCIQCaYeWbaRXZeJObCsLsLGPxzvilB0IoEYgAYA2EfUAyFwIhAIpPT5DJPwgWvbPdet8ZsBD37aKuXhBcyOwlSUCtAr3f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGmzuCRA9TVsSAnZWagAA1DQP/ijTTvOfSjNPxKBlaJCB\nu0F3rEhOjbdF35FDaYxk29mTOdAConR1aBXGltX60wdrJyzJAsrJ5Kz/lwll\nJ7RfTwm0Wxww1LLkTxbdPAPL+UviZpVVRS6gNOIIq2sG9KfLfOuiJmukZ9tR\np+CuIpEkChkpYfAM9M6xulCuhxIdCWdS5ZDkzeZOXYVq6Xwx87z3631ZkFL5\nwW8kLsx3C8xHTPIORMZ5nkon3rk4So8W3GHaUOhQU5Z4rRSwIvkhHEiI9Qeg\niPvJo16tuiRKgHbirZpK9daOVglGs7M0MIbDn86aA9J9Heg7lCRlLp+9/FRn\npHjNPA5S3SXAz7/yoNa9SBp8glV/SCFcubBxRrcRC5dTQefkrJJyujJANAaV\nVTm2j2qEklL5e2T2+CTd42piPK2LEgpiNbx5fH87TKybB85Ou0frbXHMtXoE\nw+EGyh4zztNntJzxARUwTxj4scPF2cTuEw+Bc7TVAIh7FlRBwaZhdmw158pJ\n3FNNwDawocqpf/MCbK5QFHa+hfhW57TGH5KVPPNmtiTW2/DR2Kgg2ggJ5NB7\nhV5jZoBHOo4TZLHXrMk1b0yIgIzfunLvbLsfNj5bf9IA7zwoAsL7MeE3Y+Kq\nlGyV2x3UZVrIEDaOgXtXrY3wq3+Z2ynW74kS81IzIicLvbfB+PkgyhcE0YhD\nmHQg\r\n=mX3o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"fd600487eb3d295b22c3b32ba659f9b3ce7ef3e8","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","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","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-alpha.5","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-alpha.5","@storybook/core-events":"4.2.0-alpha.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-alpha.5_1545235693742_0.38665536180036164","host":"s3://npm-registry-packages"}},"4.2.0-cra-debug.0":{"name":"@storybook/addon-knobs","version":"4.2.0-cra-debug.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-cra-debug.0","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"99e40fc9bc7dd0382e4ce875e12e420ffb23f840","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-cra-debug.0.tgz","fileCount":70,"integrity":"sha512-EpsVhZa/gfwfqMnZo5oPSAUHRH1DtS8AKigKOwPQmWZn7N3YuqI0TxdHgSl4gdOykqLu+EeSuRa+cGefWGxx0g==","signatures":[{"sig":"MEUCIQCW3iy+eIc8DxB8KxiVjnQ0m89ulI6oXg668JYz48DA2AIgW6znlAKHFSPlAN6jQ8m++RUw1RvzLr95b9a3QrX4TWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1296623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGvUeCRA9TVsSAnZWagAAimIP/2mfFzvMG0jHrVgiWjHj\n7tdvwzqdDa35vnbL8bBrDzYrwBwsZXKDhGRpNcBRaD6nR2GIaUaTivojntUo\nEHCEniLv0qGhWQJzGE7D96sMALUh8azy25Pq3/m7pF0Q7lyFobj2h/GioLR3\nZ67dF3fuXHVhQgRqOL0Hs9oAn+/AZausptwToSWr9osaZJJIbiplz/LV6tqM\nhG1xyyU2w85o7trdb0pNKJRakoqJrN+LWk5qVllUV2eX9Jo9Bz+roKkZinyu\n/xg9ivxE8Y1nVIJ7OP7bAvbUdm7dijL28HZnCB1J0neK5u/nRMhH2dmBXYty\n+PfXV/MW4C98vAeTW9xkyLJV3QtL1yvJNY/Zp/z/dnTJboymzIVbWqYTYUFm\nhQzNbsezh2gnMzC1HZv9r0ifqWOrYKqJOjAHNXIiOQl6aon2jSRSW3SCYZcj\nWHe4sVr51MTuqN6B9xJlZ9S6z1hVPzFK9RuX854iomdfYOZZ6xL7J+ImPSnL\n5RuRXrE2hj2aFw3I6GDVqPqjxbW4nNJ8Lo/EH1KmXxP6Bm8NUkhDdzSuietF\nXUggnzXJKZk1qh67pHcnMWtfTOzX3WEs1gSl2NCWjFQgfMBc/rO1RKDj8/6Y\nbm8P+wLQd0f0HeINhrl9eWe24zZ21z5y2wZae5hNtfojN3TNF/MjRX4d1Svc\nAg3s\r\n=jwz2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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\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":"0c1bce162c2cd7f3adf56e7c0ecb9df7603064e4","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","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","react-select":"^2.1.0","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-cra-debug.0","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-cra-debug.0","@storybook/core-events":"4.2.0-cra-debug.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-cra-debug.0_1545270557759_0.34153443387524285","host":"s3://npm-registry-packages"}},"4.1.3":{"name":"@storybook/addon-knobs","version":"4.1.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.3","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"5fefbd8c581de29746b9a09919c28eea82ec7196","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.3.tgz","fileCount":64,"integrity":"sha512-HoAGtVeZx9GrOt7j1OUQTnH6RHLHlRvorQX80z+fvlD1S6j9UyII4uGHDILo7bJNR93jULx/lgUfbbGK4g/3MA==","signatures":[{"sig":"MEYCIQCSgIVPf/fAO7svd7RfwqhESAhHqLzkyPvY4tNb80S3XAIhAKdX3+y8oODGu2ucPzaQA4XSpLz2qESHBT/0Kx5iq/oG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcG1E+CRA9TVsSAnZWagAA14YP/Au/GToMLA7sqeT148/t\nYv+Qxp44+t7ENP22RYLepgs23/XJsvcQqwRUxAtibP06ngRcICO97HGzWyhe\nnVGjItTOIYe6AqpJBnlvW2AEUDljI30eAIkDpypGziWH54yX77wEolBLAF+m\nFU2Uq01w+CgYL8kc86gGsjfbiJZIqYNUnKbSwG/OIIH4lJrQESvVDbh/G+wy\npBAVaeOOFDlz7KN5jkW5jWU3MP0IYsMRXHDz+BhCRrv++PLpF/XkvAxeFebs\n9hVQvRZDcUjje1D2O6jJ5x8BbGHTCHPgfF5YqootqmFO/BAo0EeNa5o4ofy1\n1ebw/ss1YBhTEwAWn5uvYUPG2hiS/BwnCuNOyAJCUmbzSZGD92VZ7qsL0ui/\nJW81LaErDOf4fu4J5tL+f34XJ89NSkgfscfbBBGtG0DudcVFdurazxohoJ9Q\ntxXlEtKoYfUJNcK4ywIpSWt6eOTP6YFPysNxfTEDYtljzOSZAk53BCEqUjTO\nFgEcS9oqr6pxeRQcU2xP2tyUv7RUhtFHYuwEsh5MBDiQonlZ2xx7cZLJ2YYG\n5ruf8NonYThjkVGixT3BGeTchkDtxV14KjORXoz91Nkn7vQYbLws3JkMncSU\nTbCKlIUa6LoMfKDfeQkEr472NDaSkh1/LHSnyEu3Pl/ZfD1UCIEK3XiR8zhc\nwDnP\r\n=y6Db\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"28497a9bbe829f0cecfdabf8d18ae92e33d31db6","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","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.3","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.3","@storybook/core-events":"4.1.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.3_1545294142263_0.14238142315900792","host":"s3://npm-registry-packages"}},"4.2.0-alpha.6":{"name":"@storybook/addon-knobs","version":"4.2.0-alpha.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-alpha.6","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3704a9de6a0842d084db7b583134fec365833e0d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-alpha.6.tgz","fileCount":70,"integrity":"sha512-iPQIfuDywdzAQCBWhpoBQJ5ThyR/BwbKx5mdvYPkT0FBrdOP+EGTuDeACFPLU4Fm7hXZMoqbcmjs/Wz4qb1jTQ==","signatures":[{"sig":"MEYCIQCnRIM/CYjKMhsPTa1bs5kQd+t6Y7Zs1svjDec4K+FCZQIhAOFWrRq88J8P2tRvKehdhQ2OC5BnxfRufmqd7mTduQvF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1296607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHBaaCRA9TVsSAnZWagAAQBAP/i6JaLG3afRFNntAB/Zr\n8IQtxeBSZM8M/74kBl1JZxZXyEZ77CQ9QRDOTSAXMNSr4jRBOzscvsPSBs46\n08+XM2lAuPuawuJ0/VCFc5NJZew1sXpwHIE7/MlpjAk10U9yCNnl4FfKG3Vy\nEJc1YZrVW0eZEhlQrArfSDD396gRMMbFA09xJO617wUGWJZjHrj3I5/Irkhc\nWHmk67pGtHglJR42S6Z3on8GxXB1iJ/yonQj3DXaVDZTIyESFgIn8W5fGHWr\nDZzgt8r5wXVAnUEagLKnLSXuOXfVu4FLU0hQgjvgruupcJJpNtWXZWL75I7y\n1+WmnsjPOUmiX+aH7/g6Wq9+GbWDhgg47IPHHK8qDUfCyBkU1eytD2e5UHl5\nhuJGXfi0HrPBaxVcrHdBmOxrbZzFZOyqTj8X8em8zgumhp86tk8CR2p7HzdS\n74NzETTcB5tZFlARqhE9aatdapDrppY9yujcVloBWMWbkDE2v2k63AOf9ewg\nbyARcCsS1w+xhuj07o53BlipxZviXkM6Al7PI7yoSXhh0SqWOiELY9JqT/h7\nvYndMJq28S/VhOCRo/p/+ILaEF/ijCks1C0FzCL30R8eV9qpfJiWFHupfUgL\n8xc+7AGoTn71XDIOolLEl4/4ZCGF+S+c//kH4uHbR63zrMiUy2BTRSRsT9pI\nt+Ht\r\n=z6MN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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\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":"bb9b7b3d5b996ed037001f57ca60bd26ac5c1326","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","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","react-select":"^2.1.0","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-alpha.6","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-alpha.6","@storybook/core-events":"4.2.0-alpha.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-alpha.6_1545344666025_0.2587878521791167","host":"s3://npm-registry-packages"}},"4.2.0-alpha.7":{"name":"@storybook/addon-knobs","version":"4.2.0-alpha.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-alpha.7","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"130c43a9562a5d37924ee2896e823ac95c85f9e2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-alpha.7.tgz","fileCount":70,"integrity":"sha512-p+AIdKwhr0AeEBm0MMFaulRI7CCQW2i0wqGQVf5Q4ObMJZUzx5dNG1DUxEr9klor+cceBCrjJSnsplAS7vpKyQ==","signatures":[{"sig":"MEUCIGFWf+xe8+Y2D7QFuRLhB8tGmYiZpW2l57zGZXoJkgpCAiEAtM8BNI15Wwd9O7I7kAQwZqjOnCjXtoHUOa5hVNWo5ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1296639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcIpRSCRA9TVsSAnZWagAAkooP/3VU0hI8hM47YXtetYTf\nf0yzRfIG0vbj9dkuFWrkxQRQFZg+mySBJH1SDcQZjMF8bJnvvfF/D1d86Kua\niTqhKyn3eeOrb8uH9vyyQDMuCN9pErvATMPDVNKnDSYMxdUzO3cbEqfh0cYs\ng2zWzT1c9BIUIKlSZWFm1d+kZmrkkndwAHYEAZHXvsBdoMvRL8SiazK6h1b1\nTspdH6lxtkHSiPePnPR/LLMZYfj+c31MXFSsVgxvSwHfFXonoeM64OovkBCV\nOH3VhL4/dXGmC5zMHSxPrHK7E8pCzy4Cu3IPiT8Uc7h8zFZ5SxoQPoECo+6a\n7oOJUr44JaDntqEDQ8OCalcNjV/7NGP7jW3n1m8SuHY9kFM+UEMpNd50ODq+\nlyNpUl2fDA0B+EkP+gZlqFUPoB/apSjIADs4ch1kb4nGFG5fiSag2qH1UP03\nmFo/wwlNNhiJWYjF7ozL39KOvMg/ulOfSRBSlRZSV0pGi75YY64BssWSojeO\nH9LeuVzMO6057EmmrA59AuTfjKuGmbxUDNNRTHr/Zjcni5DOmqKYhwNdmLBi\nZ17IkjHv2nZfOT+AIdzQw/w2OmRMkTYNgjuGesCp11z1I0DgMvLCiZtH4QWQ\nyWvytgwgauxkBtwp+AsPTSqPI/eY5PwO6bHWNELJYqxkpqGirX6AgTQUgvhJ\nLJSR\r\n=gXJS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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\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":"beba7b395779bdac206d53864ef01a187ddaef97","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","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.17.0","react-select":"^2.1.0","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-alpha.7","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-alpha.7","@storybook/core-events":"4.2.0-alpha.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-alpha.7_1545770065594_0.11907957311469675","host":"s3://npm-registry-packages"}},"4.1.4":{"name":"@storybook/addon-knobs","version":"4.1.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.4","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"aa5f0961955ad330f020a2db45b764ad0485c0e5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.4.tgz","fileCount":64,"integrity":"sha512-gQxBuZtMkLLYt8KooqRwJHDSswf9+ojzqPF/eV+L8n+n2wD+wZvnAuGmBWvDLv9CrNle+IHCxkOfSiZNswY05Q==","signatures":[{"sig":"MEQCIAD+LqJepmm3tqDqNlf2k5ANrm945CGzIlyEZpb3b1oWAiBww1EEaJDgPmr7jYtHAva4Y7bddwTvCC+rjyJU6pX37Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcIp09CRA9TVsSAnZWagAAshgP/3tvfsX75wA9vFOjdqR0\nZ/ICkqRNwe5YbY2khUEERNgl64rOtnbR5vysr4h/mTjg/0cCnrXvIS/lYnJZ\nhgUSLZ/k0wPAj2aNroB0JTJurQI665HfQE7rZal+lB5oKwelh7FaSGFtK045\nUz4D8eIe3+M4ihkiox3P57bnUGhc6unbx4tdHsV+DjWBRcyPEvwHcPhn4Y2r\nmEEhRwwrbLJ4jbj3e0vtqAVQ3xSyqaOCjBOuxIDgpl58ygGF4kSzLRprq3x+\neajtv/X/1ov6dRF73fyO/OXsIk405hIyD2K1Qg9TA3/JDaXG8jauxklzxD6J\n/ebUMw1ywJ9xKjzAkuGYNvST/YWUGbjmJYHbghsAVlfb+rDTCMq3knlcrY80\nTX8D1clAfW3e54sqpMycxxvVmZs/RjVyi6cCZqIQ0/q7BJKoT1hiaejdyN9s\n3h3PoFXjtVeUz3J7KG/BR/O/6RfKE5jRqj8J+UMwoThv6zevH40M2sZtDIDm\nxrIq7UVw7l+HiRCNZnkyWbVqlQp800iMhqo34FRWgEaGGjgW+d7MIMKu+iG2\nLhEttuOBvAM62pd9EiohoXFTPMfI3BiDikBljXLCg2xsisdEWcsd3WGvlcGy\nwhpzNJwE+TnTUstYPpAiY62I6AKspDYe/V5huWmpeQpPlNeFHeBBW1py6G+9\nZ2Do\r\n=UZG0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"9771b1ae4b2c4fe007289c5a41091ae85113140c","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","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.4","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.4","@storybook/core-events":"4.1.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.4_1545772348636_0.8652340490391655","host":"s3://npm-registry-packages"}},"4.2.0-alpha.8":{"name":"@storybook/addon-knobs","version":"4.2.0-alpha.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-alpha.8","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"7e7b54cc09038b5afc0d9f1e19366aa4cc937568","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-alpha.8.tgz","fileCount":70,"integrity":"sha512-a7XAH4W7eu18lq/RHMbH8N9pFqkkloAfn05/KpvpSa6xK9HgEXB51KM2v4wzMX2v5NgAO0csdz1XjEZyHtWoIA==","signatures":[{"sig":"MEUCIQDGxSUBlJsXcM+yIk08hOLuNkETwRuA24bDNFxQXPPh+gIgU0U78eX27SZTe4GotLh33xGPBzBI8mt6sL6Bw4P94EY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1296639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcJZaPCRA9TVsSAnZWagAAI5EQAJWqebNXlYs57W9vuT9S\nFKXZWsszJcScqTVylAlDoVMbhUbd82DrbIguDEYUDAtXVfnrs+vKcPeY8WcU\nE08XPoO0JUn7hbV/zLiX4qOupUo7cv2j5lKq9lWrl0Okegr5YhHXfP9scwBd\n6i711iOzoA6uk2nzDaGWORw687TQMLc1Do6NW62nag4VgknqpxZP3i9dV0av\nFnkOOXMd8s794x9g5zvnjF3oGwOU4lOomsgmav30DyxYe3yjEEdoKLlrjCXp\nlJBPa6+zIBuo34tSNGDe/rjkFGPMkQtU2adeIodn1/z7yUAmvIXgwGgdr/KP\nYb1UqlmIHtP2igkKW5fv84zIwUB3Kpy9Qa1hCPoB+ruayhnZmi2kmW3aV/NU\nci0s08mHzOxvPuXZC+ODMFh7Z3To6e5DotBvltsV/YMLVgi9trN0Mx8W4P+a\nDktyjl+i5OHGJHluiO4OBXGYQAICWeGgLRdWiMTzZUPHeTJKk9NsDpeasAJY\nFuQIYypCtv7ft17FrtFBdbJyaHIPy5h7aoemTwEI90vEWzYDBGBsk+/DLCCm\nghaUnHNWIcZJJXvceJc5oizxpQOUGOHvXETMV9+pHs737kAVYIFCQEZNOl+r\nmcoAcomQckNi5TI3CVQvTYf7RgHuacxWu/tnv1ao3ChShYlqOcI9LC3+spVS\n/VKb\r\n=J19K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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\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":"1723c492fd1153251ec1a87c33090c2cdce68c10","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","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.17.0","react-select":"^2.1.2","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-alpha.8","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-alpha.8","@storybook/core-events":"4.2.0-alpha.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-alpha.8_1545967246337_0.21879327876730925","host":"s3://npm-registry-packages"}},"4.2.0-alpha.9":{"name":"@storybook/addon-knobs","version":"4.2.0-alpha.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-alpha.9","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"282b57d6d04b406e2126b95d5148899804281645","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-alpha.9.tgz","fileCount":70,"integrity":"sha512-dj5ohNwVemHXj5IoCx7DmsnZTpAHRPb9majPPbf4IQ0bGfnkdXitjtS2jQuYE275M6LAWuGR+D1tnUenNTsv5g==","signatures":[{"sig":"MEQCIH+/x0Z5kU4ZDUFw6dIMrL7vewjytoPN+ECh30OeEsy3AiBxspES8aB04Bbc7nXmAHtdxKnh/X30bhZfFQirrVrzTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1296639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLuPRCRA9TVsSAnZWagAAJlkP/2JRRLfZzSzjT2F3NMsp\nt8mcwpf+1+Zey3F+HXeAtY6txW2BsOa6czJtkrlkqKYE5YgtJrlOF7XXep9O\nDw/XWOSkM8WswRbswZCiMG8Q9H6quesRcy004LATitWhKY2y+g3TkKTcwG4r\neb6KuBCsF2lRp5msT2+zjz2k7a7Jz8Sgrs1a3MqSdUn6xJvcWsMjuiWuCpzM\nRnBr4JBBxRdKwOzCq/qf55sdqv7vh5CdLArQUXiXKYHLIkwON3lc/4AyYlSQ\nTwllKke7p/ApPrJqnKBgQ9c4ZxIcJTnHl6WwPIXbV457zJvZO6WYsEUSuwNY\nosQGzPSO/vkvjRpZ/YMNUYJAAof7quuPCBbSjr9/8oRZ9nqfewkrZMQmW8Nd\nBxyplkbYI0h3uVsiAJN9Wt+gXrf6FQQPdLlPTQb42mTkv5p680VuBnaqxiFE\nVHccQUGhacUl48sByr6d3EvAkqiXFDUsKydcN7TfRvnQN58uvbnI7ZdG//dD\n6TYBOrohZ6OtGB2juH+LKcJyF4LwnZ/uz5ZBIwyxBZSGXqUId49vimvSJ8p1\nQKoEIXePTNQ0Lh7n5ktATYBxSpbg14rmkPw3lwiFH6I8sg9EiSizgaRgU/74\nwsOfv8hRyIC4pndL2u2RtXRO4aRtNNRdjKsqqP2AP/qgT3an2h1qUy3FPBSt\nPxVC\r\n=+qGe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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\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":"ee0f498dba1b88b81b34b89bad13839d3b19e978","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","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.17.0","react-select":"^2.1.2","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-alpha.9","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-alpha.9","@storybook/core-events":"4.2.0-alpha.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-alpha.9_1546576848788_0.188936119452201","host":"s3://npm-registry-packages"}},"4.2.0-alpha.10":{"name":"@storybook/addon-knobs","version":"4.2.0-alpha.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-alpha.10","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"22dbc7535c69da76cea12c60029422193fae8f23","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-alpha.10.tgz","fileCount":72,"integrity":"sha512-FeQMwc6WY3mBBbKZ/aMXzqn5MVjZUgoK0J7dcaa7jDoKemAySoADvpjn5aDJNTTUzOUh7MDLEaNnBvqM5Ie3Fg==","signatures":[{"sig":"MEYCIQC7KoOTNDRKMOqLxYlieYSH1dYOgnr3z1tMsRx6bF7OhQIhAM3kKHUdoEp5eGpXUEVnPRGDKXsWGPyWIb/8rUj0WQAH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1307456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcMd/mCRA9TVsSAnZWagAAhdEP/AgbSiQxqFcBU7YzJdab\n+WkspBmR3vWQ8w1S2ZGv6AayQ6GzVkihexxH4yt0XjoDiS1+qA8/rFzT/sP0\nZc9WH3O8goXCh9qY1Ju++UOW79/MHdwQQOK43iMCBe33/B/xQ2H82s2noiyb\nJGopYH7k4T0fMjjEiChU0oDR12ghvgvwcX744N3zRn+mn1cqk9p9oOf2s7kc\nDWYnwG/VkRrjUfOoPV6ozTnurJ4Z8DNOPMomkrLdK/mVklExRLbM/VIXe1oV\nICoEYPJH5qPfnxM1VhUGdshdLGaK5i4e19yywA9HBZcEHZAjHY/7IRkZObg1\ntk5Af1rRWoJPWOpKUIh/CU/TRDbRPc/O0109gj/EDrlqEzWqzskazuKMf08o\n3miP0YNMLLz8fRPB9lqNxKRsKCrqwq2yQP4huKPv393tFKGVj84FB6COZYXO\niOpbHjLnE58XvmgX5trKz1LtFBJszBZEhgTarlAtYgK7SQEOZlNKod/nFwNL\npF0QlGbcBm2EB7TEQKWgvAOlSMrjqbRxByiyMLnlOSw+LdNRBudD1y6PBexd\n+PcVIXTFemBgNoVJmNzKrVABHqVHJR+uU8kxsFLiAzX+ncuFT5j0feJ4RPle\nAvrBuFKZQlTimInFOBwMcTiN7trEktxRg3iK1sBR/gUQOZe1VpkzkdkeZFlU\n7QgX\r\n=TKLs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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\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":"0fcb70b58c24ef0906062b210480765dd374799a","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.8.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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.17.0","react-select":"^2.1.2","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-alpha.10","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-alpha.10","@storybook/core-events":"4.2.0-alpha.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-alpha.10_1546772453797_0.5636847665249021","host":"s3://npm-registry-packages"}},"5.0.0-debug.0":{"name":"@storybook/addon-knobs","version":"5.0.0-debug.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-debug.0","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0a081f9b9a93791a1aabc493d339f3602e9c89f8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-debug.0.tgz","fileCount":72,"integrity":"sha512-KgbU5hTVE51MxUU2DIqCm8Y4a891qoVOt39OnmMz3z+t+mC4vFytEVDy2gLKlAhT4OolOmvFm9bmPmPSMeWDEw==","signatures":[{"sig":"MEUCIQCNz4uGh5m1EXdwi+4/x+FEhTMguAj0okLvSWd3FHkVkgIgXUEMWpDvtlsY1FkhfnTEom1F405cXvUbgunibzqIS6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1352072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM2pBCRA9TVsSAnZWagAAreQP/ROebk1lNJkhW6n0VqEP\nlguuUTgglfjPoNZxtvExF3EMNljo5OfZW6l1FBPsTHR+APTfMtw3pgh+Gp1r\nEGq96AflIYRzdBYnZfMVk+ly678fxQjFIpjfk47BLdIqf3P8TMN3Qgaas8q8\nO/uf6YefS+9x8YNW54uXTveACtsxcrloJHRSqzNYHarD+k9Aj353jW6RtcBE\neInY0BvfPZF03U2A87ZM0YA1rwOqDmGiQ9zSc/5nHZay8tm2XnSnrMdE4DJ2\nPqFp3j01MSTlTdGRg5ZYN198D8O49AEHxzv5TfONrisq2SYFpnX0YWaoDMAJ\nFs9dvwvvqzyylAeZRjYbzEYpHl6m3G+iqBDWsdOgudM4y1nhTpv8gpf4X9yb\nHzRSlJ6A/t9JEAFW7rrTIidGb/K9jge3T6A68BnzOV716xEIVbVCYO1n8XEt\nKgGiReOF5dcLwZrQKXZ+/K2zBVYJ3+14MJZhVC0Z/W9p9mkuouKiAvltWlJz\nQUt4Tfghn5a8EJ3jOSDdKsiqS5xz1NaHc8BHYf3BBwt5j6aO8y3dpbaPLTzR\nnS/g9nUjs/9kslzJCtAjOXJZ51XWHfwglSbKR8tQiykcemUsq1fJgwtZ7oHW\nFaYkht0ploqHzSgJRoRxLFDs3OJI7ANI2oL++YDTKUq10SiPZaURYi+Zq/6I\no0CV\r\n=TQuZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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    `<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 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\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":"7cacf4b23fc7682e0891e8fd4a3983e8879f84c5","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.8.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.1","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","@emotion/core":"^10.0.5","util-deprecate":"^1.0.2","@emotion/styled":"^10.0.5","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-debug.0","copy-to-clipboard":"^3.0.8","@storybook/components":"5.0.0-debug.0","@storybook/core-events":"5.0.0-debug.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-debug.0_1546873408661_0.9352323322244567","host":"s3://npm-registry-packages"}},"4.1.5-react-debug.0":{"name":"@storybook/addon-knobs","version":"4.1.5-react-debug.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.5-react-debug.0","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","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","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  <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\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    `<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 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### 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","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","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"}},"4.1.5-react-debug.1":{"name":"@storybook/addon-knobs","version":"4.1.5-react-debug.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.5-react-debug.1","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"f08df99e0243446e6558b8827feb78042a932281","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.5-react-debug.1.tgz","fileCount":64,"integrity":"sha512-hZMWPYiXW3Rri8SrJxZ2pVczeKb68vyL+Nuz82rGPQIl5Ta2rk9i3Y1ItOefUF9mwoASmF399b0kYHLUPWmfmw==","signatures":[{"sig":"MEQCIEEoTpFpi1aj9vd7VJN/sdg5pv6mFfU6/BZkF6xsQLpkAiABPM0PLI2HMYLPNisWR3PrgFubL9E0bIJ4orfbzD6NQQ==","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\nwsFcBAEBCAAQBQJcNXo3CRA9TVsSAnZWagAAJUEQAJqOra47TeNLtZB6bJSV\nUUdevyx+nLClSTOrrC9DVM8NnIIQsapOFt2w0uCkBWXvpPyoXIc6jVWltCiW\nWFID93umc70ES0SGnSnCJx4ArlhN8OD+dRdrtRbCKxVfmi1DQHRTz2JNT5i4\nlvdFBlN7YuTWi7z+IHHHsjy/1RbYPtK4RDlG3gP/Ys52fXWKc7WJ5A+MQcre\nKcMw4XYUAJ4WgaseOk1eq85OSYAmd1ygEu5CmOktGMDNUap9evwvj4Wg2SdP\ncgKKCHyolsltXnZrpanNkY7oRX2Wzt/E0SN9xXQyRmvVF3kYhGYCLUsLWRGz\nv6//4BGKdgTnhYtczBosPbuqt6C3a1emyU0phTgj+4qpNrme9buEk0bqNIJ0\ndx+HaM2E8Ei6WcQn+8Xxv4A5vaEMpf4J8iE+A6r+jJyB+mFgcoHjR22boCZZ\nSOtovSWhNDGSAMfbKbG9d5npgE38a0dVRjiNw9mvb9zwgFAF6HRuJxF1I4xP\ndRLwelKP29tjNTluGDEuKkHNvntoXq+aMUslPz6hwrrpkhlG1RnEqFNxMByV\nBaa/JbT7FB0rn/qdQ/dx/C0ctT++XrpA4wgba9vRUTW+OHH0OfQIk/iX0Wf8\ncVBpbd+iEkQ+P+uazciehytg6qaqYdSp4zP22/asahkSroBfsu/JG15e7Xca\nY6cL\r\n=Og4S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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### 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":"234686645735e91d11b5dc3a9d7d67e6cd602482","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","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.1","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.5-react-debug.1","@storybook/core-events":"4.1.5-react-debug.1","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.1_1547008567291_0.41703012141996787","host":"s3://npm-registry-packages"}},"4.1.6":{"name":"@storybook/addon-knobs","version":"4.1.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.6","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"e2e2903319024d31f8412b813a4691d1adb6dd41","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.6.tgz","fileCount":64,"integrity":"sha512-Rw3JiBGMvVOrRj5muuu4rh1iJA/tSDdscvzPB5p3ykdwk0dycGKw/wN3oEe4whL2lPABlgW7VYEZThhu6jzkJw==","signatures":[{"sig":"MEYCIQD0CBT86hGMtDThHJc36EWew6fD1rmG6mXcJSulW5xk9AIhAOGyISuLEGrwfrzjAeGjnFM9pTtqb0yr8P7yHtdzAiXu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1272193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNZ4RCRA9TVsSAnZWagAAohsQAI0bpld8oAzFdeyKHpzV\noX3PRi83qfLtftBV9g/7Mkm64bM/3AtLrgenvLWiGMXU58EmzBqGxTrKYM5H\nGhP/2pqXPezYtOd0hlynsiUUBAUJJgIP4tKgNI/Mf8e7HpN2VAu3kg1DmJny\nJZ5s/XQV89vl7V/j29tK3SWCUoM3QRCi1m/D9fnorSYiZMMKJLuRR5CMmQEe\noGK9l08warnEavahq8FoE7/HPW83qi04f7fWZ/gql+A2yT+dBjSNK7cHhpP8\n04+ypzdWHtwcmLmRAhX/Bx+w9TjQzzE/3Ktruok7hna2v72GG4uo0UVNkxSC\nupon+Zv8Hlz56NuCHSV5e8MuS6Yb4J60te64xL/EFdXldaKDPgThTn/i/Qww\ndva4vf5OmhHs71w3iPWpy+ODOjaqccTijEoK0LXBJw6DQueqxFHqYPSV6vOH\nyXEmysqyADzn5qRhLVl2q2dyem3VA23MPQxckX4GPVo30V9132EV0/KHBdDw\nJBofCUS0uz5IufF+sm3x+fxCuVO9xaSMSSOWezUPaEnIVASZSngFcgeMMJuA\neXG/y3880yAMRPYYcvMzhCTYgXGsQHjZR9ty7fQwPaYbUuM4Q1JOS/Eiggku\nPOQlsM3xUsr5xQrvrQFdXuiSYsrHvNZmPu8M7GbqA/Uc7sOEn9YGAoT6eOE+\nXan0\r\n=qVDn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"8901a06efce283e91af5aea9ac8c256fa0ac6b42","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","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.6","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.6","@storybook/core-events":"4.1.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.6_1547017744988_0.3861908584212783","host":"s3://npm-registry-packages"}},"4.2.0-alpha.11":{"name":"@storybook/addon-knobs","version":"4.2.0-alpha.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.2.0-alpha.11","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"ff63aab6fcc1a0092de1ebc2c8ea2a32b675f669","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.2.0-alpha.11.tgz","fileCount":72,"integrity":"sha512-J3ekDgaqy6NpNnHouYLTGXP0qlNlaQSfOsKcGmE3ZVtMoYMgj2lZB4XVylL7V+qUVhbIJXmSy9eLnPMwVlA5WA==","signatures":[{"sig":"MEUCIEBLeL/PT0sN+3kuZlxbvvAhzfDN1JiMqkiKNKmghUCuAiEA+4g8kVgMy37K2gLQftuLgUCehe4kV1WZdcxjcSsJZXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1307456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNcd6CRA9TVsSAnZWagAALPsP/iM64ogTDwOEEMZYvZ9D\n1KBZiI/jWsT5BWYp344XXGFP71r9JuOhsKCivK7WZOlHO1SFjaDdKz6v+xc3\nO7mtDZLbE8nY5dZYKxV3NGZR3ObPehh3jHA52UbPtxsuXwGNqM8b7JQ+dL+h\ni6U/S1KUtUcGGyL7iNEON6R1ySjEi2IUioQPr90oSzTgIS3GYmPB7NwtLIAL\n4bJsjwQYd2AQlAcTF+CDwbhbeAt4VvxS8/iyh+y4GuvXd3GA1pJKALJgTKy6\n8A8Hug6AGqr7P3suQQDEGwnWUIuQRhWUVuSgj5dsXc851qBCLg5sGtR9hOtq\n+IZ10r5F120OJFPS1o+QKjI2WdbNNmlEtQvAc3ne7bTJ/yOS6C+J4S2O0z0f\nBTF2HVZ4fWXopL3HeM6ZWUOGqcGHdDIfUkH/Rx2sqNQMQZ+66tGko5u3n6Pg\n2W4eTnYyg34GbPiHo2g/B/lSm9Ei260z2RUusYsIf8xGpi4mMh70SAzGZD2t\nfjWS7qg6PW+TEzzxLfP1OBCtZzHPyK3lGSt2PZBPcvjPTxhrqrNiEzzg0Vmh\nv1WBT1A6vDOeI8OlBAA2Yd6TGYi8UBaiHhJe+O98U0l+kfm2db5YUe4sA9pI\n31PWsyidyhHWcQw8JSWlHnk8srWnsUBCykZSo3hgMkVRXb0sWhl7CSGs8lcP\nEWrV\r\n=5BgY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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  <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\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    `<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 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\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":"edcb85f861a178dc47330c911ad658118659f8bc","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.8.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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.17.0","react-select":"^2.1.2","@emotion/core":"^0.13.1","util-deprecate":"^1.0.2","@emotion/styled":"^0.10.6","fast-deep-equal":"^2.0.1","@storybook/addons":"4.2.0-alpha.11","copy-to-clipboard":"^3.0.8","@storybook/components":"4.2.0-alpha.11","@storybook/core-events":"4.2.0-alpha.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.2.0-alpha.11_1547028346104_0.08404158630535474","host":"s3://npm-registry-packages"}},"5.0.0-debug.1":{"name":"@storybook/addon-knobs","version":"5.0.0-debug.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-debug.1","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"36be311d5f05265a72fe1b1b2ca29a8e53df83fe","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-debug.1.tgz","fileCount":74,"integrity":"sha512-X8OzgMyxy1Zb1m6jyk+a0gyx/IezxjiI2UDGPnxOYyHuSEz9cM6wKo+kJ8ZuSb/7Y1qHmSOTWKO9Seil3xRQ/A==","signatures":[{"sig":"MEYCIQD7kg6xOPaSS/007vc7NchaVlSi9NPnTM1KxBz1VkjqZwIhAMArm/YcIU9/gw1+MqvnJ9keQPuf567xZeadyte7uEPe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1363669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNdJSCRA9TVsSAnZWagAAj+gP/jFfvGjybucoLe75QrK2\nxedWhxeXo1wCgxZu+E7opA9P6qh3/Dm2hKcEnkhi6T8CJBgFzcJiFHzheuGJ\ntNPBCb3DhBqKMhnZ/DN3Xu0mwlxr7vCwSTJblKuBPgtDNiQ1n6t2usOzU8dq\ngZL/EkpeLzPJRP+iUPiufcpIahEMv58nDiD/mlZVEQOxXXGo0yAbhsMdyA5q\nvi0X2RewvtCHgCFknGeKkC+Ftlbt8h4bWmSvLpUF01oScxI69FOtvBPpFNLD\nLvaOnVtNPS6rc8HJv8/c/NKnZM1ygMqpr6VJtuXEBp4KHuWDjsvnOw8c87gh\n2JClvNd5mepEz5HoVYxvdmPJBXVhxKHahvmBZuHcaPHgit9qAr0GsTaYpuZo\nDNBPPt4JK8uKG3pqVND0NrOo9af56YMaAGXafM0C94gEW2iGoiJQu1ExLNRP\nHBH4AXjmBkui9uMBQDmAZC3WPLuROuMt6NX4amodVT93SVHcIL7qJ54PUEtk\nt61fk2h0foCWrgBbQ6Sh9o4Tb4hDsYirm9NY0zi9DA22SWO/n/lYlHYAXgbL\nbHQo6TBeopkhrqhRb/0ThXnR0OZdHAmZ9q5CzjhisVt+TFhZ41inxrbvgpsB\na5n6P7X1UNPrRjxEjVeKVwepO5tBqWGkClc6/bHFhFB7EQOgfgz8MwKppUCS\nEEgH\r\n=CWjP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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    `<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 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\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":"207598ad16237207116f771aa176321f998ccd6c","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.8.5/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.1","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","@emotion/core":"^10.0.5","util-deprecate":"^1.0.2","@emotion/styled":"^10.0.5","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-debug.1","copy-to-clipboard":"^3.0.8","@storybook/components":"5.0.0-debug.1","@storybook/core-events":"5.0.0-debug.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-debug.1_1547031121220_0.9116027682820824","host":"s3://npm-registry-packages"}},"5.0.0-debug.2":{"name":"@storybook/addon-knobs","version":"5.0.0-debug.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-debug.2","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3056569c4380698df0506905b435e221d00a3d24","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-debug.2.tgz","fileCount":74,"integrity":"sha512-s/LiC9JGqfzxOCT5NdDdWGtt3lETKNbx3fb7EdNGnZw6QlGe4aCN94RRb3xmXDvuvY+po5omlOO2lenNvkbxIA==","signatures":[{"sig":"MEUCIQCmGThkV7g2y+gU5Ve5GShbEY8Y/Vl1EsFEs/3imLHWIQIgBuRW8PBKFIt5qzRoWB0GSl4oPJ4wkBe/nf/wMHwDiw8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1361922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOXtOCRA9TVsSAnZWagAAO00P/3nssUWapDbS4uB2B7kw\n5HoHY4YgIUDjCBc3LnnT4uxaRbHpPWJc7XUC6Wna4IbVtHN6XSlVUu3N4Hat\n/iWvtJYHf84i1pRhL/dF6Ozg/IfotOA5aXV76LM7gLeg29e4o0VLQwG0Mu72\nt/7mKYERDifpABsi2tb1ui3g0/KjMbbGZ0fm2i0TX4xfXIPTJWQXQpPuH8OH\nDYJi3z53pxpgJOZjC1iy88TdoR0VcphvSoJcoE6ExmEUjrA7UEx38Aj4TQ/M\nE5GUAQuaVdCgmW1KKssQFXr9qiGHaqtD/wZ8AX2pHsdoWEZzBSg0hrA0PRY2\nvfoWW6aL1YbrBSNXMjzP++Wj6yzYRVMc7H8KoRz4RHjUltmI+hglLPT4PYfm\nSb01+OlzODsfi4V3ZuDHrxmj6G6TXb4Ev35n6EI11YYamtzYQg3F8cNtQTXb\nAv9kSfgcyhtDHFgQKWjwbB+h2UPiP1Fl9qhkvu6Y7VlkHuNM7ftGxe7VYR8J\nt8Cf6N+TYmuYIpcKBYVNK//AaJAmj+GcoZu8Hzv3swZeO133fMXcxJwwwwbp\n1ZYbaLdoD7mTh/jC0RXvQkcyIkQcvYkqV/p7pnasKe9aLbQgauucLl6k+uSC\nWYzBBHfq+M85X5ZN6hBc929yDbYsOmr1IBK5rGtTh3KC8lkQuYxglWJLJXj5\nWmiH\r\n=BIRf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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    `<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 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\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":"7d7fcb32d55969d68fec225832168c354f6716e0","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.8.5/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.1","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","@emotion/core":"^10.0.5","util-deprecate":"^1.0.2","@emotion/styled":"^10.0.5","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-debug.2","copy-to-clipboard":"^3.0.8","@storybook/components":"5.0.0-debug.2","@storybook/core-events":"5.0.0-debug.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-debug.2_1547270989652_0.6283834725224677","host":"s3://npm-registry-packages"}},"5.0.0-debug.3":{"name":"@storybook/addon-knobs","version":"5.0.0-debug.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-debug.3","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"df1785edb49d0aff22670d80efcb9b3940d32ef0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-debug.3.tgz","fileCount":74,"integrity":"sha512-oFJ10zTZr/nakHbl7JzTBTdvJeIp91O32Xl091D44C98ZBRIIEXL48I88BX9amxUQZWppTV41N0XHgyewAqNGw==","signatures":[{"sig":"MEUCIDp39wEFKGjAU6uzdloesyik1JcEUUIC+zWV4DJkwWI1AiEAgG7HvfVBFrn3MWx/VJaMmwNiGma56NxQpjGJaXPMPs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1361922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOZb2CRA9TVsSAnZWagAA+1kQAKG9ny9llJoPTYArJ6gk\nF3guuTANkc3akWjzcIoksuBqFK6L41Y3e3O4xmOUxDm8O8T21wxIhDQztRL1\n2ba5wIE0jeEK4xIDd/amDwqD3T5csE+cHJ81RnYLJs+fcL0o+aWhRRpojMSF\nBx7KdgkWUpCZSLBZc6E4qaKQtpKEFAo1vz7HnRWWm9v1BxEzIkPZzGCjynCb\nF0bV+VUurCWvbMMC++HL0Q248zhNvHI5oU5djgd/kpx9LQwgSIm74dpEioxq\nxkiS1r9ZMMSKSYgDn0tVjavTCkEitzvWrmDSeGi9PGn8DRKW6em5E3nZ/fA1\nNlSdscd/bZIKQj5EJEUrfKyAhTzcSFDfPnZUTNUkIjdFi4vD106E5//g6bP3\ngzvpxNCwL+ozXUl7gZnb41DLBifNd/9Ou/kcSKuitEBETlFbavGEVUpR/WPz\nZeESCsmTZwbF6z3uYR+/XBSurtcqzIJvf0Bhdr+94WXHFIE1DG+FnbxBh7YQ\n7u67tDTulQBpTy6H265AsQlL4W05mgHCXEl1t7kci6N11nz4E9iS2rq60zXt\nWUmwbOuTr4I5OHBNnYOYNGwfzSbD2Odf/WveR/Kia2kkbl+UciYtaiwZ9+nR\n6WdeY5zZKafk1U3TFsCSEUc7GenYLTrsU8hyWAkJcTUFtLQ4g02KOaSyD3Vi\noCuN\r\n=byhB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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    `<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 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\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":"7e9669a0ba3a1049008708013e0e43ee6348e781","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.8.5/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.1","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","@emotion/core":"^10.0.5","util-deprecate":"^1.0.2","@emotion/styled":"^10.0.5","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-debug.3","copy-to-clipboard":"^3.0.8","@storybook/components":"5.0.0-debug.3","@storybook/core-events":"5.0.0-debug.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-debug.3_1547278069908_0.6189640917187378","host":"s3://npm-registry-packages"}},"5.0.0-alpha.0":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.0","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"47eac471d56093b468cdbe4cbe8bf77f96c9a433","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.0.tgz","fileCount":74,"integrity":"sha512-8Er+AosDedu8MRmZDeJ0FO84hGkekcGh8ZWz6VkUW5cTJjHpQUW3TrnKJ2cuB0udLfjM47T0pvRiUbwPazAy/Q==","signatures":[{"sig":"MEQCIAjeowkTT662kJ9skYKObDBUxB0G2jSRjyyvJ4wihgZ3AiBqA2WCpZJyigldWZH8RWkMCYxDMhRAyEE2IRSfV98lHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1361922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOuY/CRA9TVsSAnZWagAA47MP/A+nLwvDyBUiukg8MvQE\nPCtARjXHwO3aQ1m+hbi0jjsIZiizJ8Huz9v/DmSHfLddotv9FeBfTdEolHFE\nbEgOVOa3StkfnGZe3rwnQ4hUmpNFt6c9FtUKw8ci9GTPX+3/5W+f5SV/pFmG\nHj91Slb1Tnph5uT1jKVHUYzm3ReV78HOTbJuVmOtcehvgQwxut8RW24Ks8uP\nKft9ftdp16HkcK14u4JkfvydIS7lpd7QM4HAnbu2kzQ3Ee8CogooiokRi85+\nvZfo6ttn0tdQA+jCDcPIM/XzrUD00xngI9mXppX2yMHL1NAn3O+nnkTfg5Gd\n/JTq5vz4G2huXknpDDOIOnhvbb77vp1rR/LTUUdP/QTkMv/p1bJN4sgS9/CV\nZeXp0+hE8cY4rV6maFFTziqPNXSZNPsTiIpuxpnx8pKvdW7PASK/MOx+zPgA\nQwwizIFi82C8ZS6HH4C2coB87xXqaQpQPLCoMfQtQcha+qiuCmPkLjs7G7TT\nPKrUfbglb3QlLiqNJ0G8Ir4WfDpvN5OqcWYZe/rMJT2xD7DS8ykT2uhRVyVj\n+GCkq8uC97OOa4nTllTon3nnsM9GoXwHyez0CruvURVNU97uzsW+qXDVS3jq\nn7ztXKUr3zfIX3Qay9w2Qm7g0Mw4u0CoK68N2/q6wNpLfctiVudgF3Xhj+SL\nTaNV\r\n=co2m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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    `<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 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\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":"340df64b9446d3c195ede1c1ba10a09810fe7479","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.8.5/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.1","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","@emotion/core":"^10.0.5","util-deprecate":"^1.0.2","@emotion/styled":"^10.0.5","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.0","copy-to-clipboard":"^3.0.8","@storybook/components":"5.0.0-alpha.0","@storybook/core-events":"5.0.0-alpha.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.0_1547363903125_0.5773554878733549","host":"s3://npm-registry-packages"}},"5.0.0-alpha.1":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.1","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"121c16f805bb7d0e66d750c44cb11ef029bd15ca","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.1.tgz","fileCount":74,"integrity":"sha512-fa3rqzj0yh4FNn5O8qFk6n6M8NXM92hdHFubPSmL94ynBk7ArkwvRbFaB/Z/23xkp04QOLuto18yaBEZwmaxbg==","signatures":[{"sig":"MEUCIETBBTQUQK2blHtw313wglAz6oXDHfYVQs2szT1kHF5cAiEAtS/xoIcop9eAZEirYklrvr9C/EP1u8TYmGevdha4fmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1361922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPK8NCRA9TVsSAnZWagAA0y8P/R7ZVZxwZdNzFjpEv4C4\nmCtew8W+Lu0kBizQV3PQZJYM1TyTVrwAvJyhmpnIk6whUlq1T99QtvoYafo1\nvFH3f4e/CYtVNC3XVXECX9UMQdoIJKuNCk7KWUDUYWWtaKupXaQm8IJvw3aK\nZsW/Odu//JzXr2GR7u9bKxD4a6oGMihs67ZGfi7mH0G7qWTEh96hVmxyYCjL\npB3WfwS0DnYyiWza7YEUzqYGYswms2tAoUaC/fZ6aood6U+CbQexfTp4sw7i\nB9BRTS1Acv+K5If6EmIeWVm1s5vdiDtQFJb2mTj5hw7LMGXqGubM1qF0jolU\nW2P1Azpq9Vf6nsSH3aLK79C1gCOlMXmqCEFSDdKXINTg5gmFGUQCz1vtV5p+\naex/1Eadzda8gzj0F1XBwE2NaJJz8QjHk4ck2dOT+ODKr7IkSpgZ3SjWC2iY\n/avTft/Swce9dm7faIln/NwpRJtJEcFNA/L7TsG/92673Alwp7sO9XkOL5Ct\ntI1jw4yNb8w+F31g3d95j3CFdDRtfxsLTH6LkCIM3ep6fUYrh+sicb0zVEq0\na5SZP3C1GKDuTXUmUQtJOBGBkLlR7DhylqVwN+KWkcWhavceNBvRg9EpBbHY\nII+cwpQD6K5pmqPY/zaWWJ1aMlnV0ZBBkaYGnH4IMLzzAoxrPJp8qkuvkGyf\nZBBy\r\n=Fp1o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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    `<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 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\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":"70e528348e074ddee0d9700bffa7794fe5b025a8","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.8.5/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.1","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","@emotion/core":"^10.0.5","util-deprecate":"^1.0.2","@emotion/styled":"^10.0.5","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.1","copy-to-clipboard":"^3.0.8","@storybook/components":"5.0.0-alpha.1","@storybook/core-events":"5.0.0-alpha.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.1_1547480844965_0.2325646537031496","host":"s3://npm-registry-packages"}},"5.0.0-alpha.2":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.2","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"bef6140065cb70e7a8ed903c3118628f31b6114d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.2.tgz","fileCount":74,"integrity":"sha512-3ayuxzizQx+p+EhexXbwqbH6Gok1ub5Dn2qne7VfrAiAunRtl7fFNiZikoutMCqqM0tKnRyPCL9XSL8wiuU/SA==","signatures":[{"sig":"MEUCIBIJsDvJya/oXhXD4sjVF4f8cwx1I9yGocyEIWCc0R9iAiEAjaa+2vqPb7FkD0EO94YZDoQNRrZBnXgGnTZHpIu/fhM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPp1WCRA9TVsSAnZWagAAfskP/jnwzf/0+nxcR72t3sXr\nyRr1k0j4kpuqfUiZrsdsC1g5B6fm4jRt80mIZ66cE11CUiZ4PsnTBo1xzZvt\nENFv0LbRUaXWnOtcKQH9U7IxH/xYkzezAL1g884qpNllnUZoyyyvpK/nb0zX\nr8Wo0gER+M0TbK0NMoDsYU2ZGDSrS7LjmOkOGv9RLCIwxOAsQGoPgwTJlGy3\neQhr82wFzLsNZj9MkgMZ8zvwfxJ5/k3gpieOrerfOUP7Ma6jvx9cXPbQQw+J\nUBOHdDnFFxLLG+yHFoousu/7Tf2tL6YeQBPoGh8+hZ3XzXKsZha5FecMyijt\nry4WCM7svXukmOZDHOtYQ0cwu0AZuzhciwX4jn7nxBkuV+roY5EbeUPFlSDu\nnWHCVHb+A8tLsgKPjdtnm2BCwdkLd7QtHTBvd9a6POGuAG5QP19irytvnVkJ\nT3tl3ealDdXUYayacXvhwznv+LyEO4etWL8PjMjLikyCUqaNea8fgvBX9B1C\nj7+GqE87AJmdeyeDCPV98IAfUbnZ03l6JV62W34bCsmc4cjsGXICKwPIA5bh\nwy5xZiy+b8iE2B3EPaJw4gBcJvCweZR/3NEJSYK2fU37B6eaoh9Lfvb+4MwA\nu2DK1CJNlwJekdCbCbnDl8A4qsjqBR/TkCOPe8R+Ljn+Zk1R0+9QYuJQcMN8\nu+W0\r\n=qQr6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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    `<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 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\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":"523030f33e64999a314b6590d6b00b9ba937468c","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.1","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-alpha.2","@storybook/components":"5.0.0-alpha.2","@storybook/core-events":"5.0.0-alpha.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.2_1547607381232_0.8478332531903301","host":"s3://npm-registry-packages"}},"5.0.0-alpha.3":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.3","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"729a3f5d1de62bdd7731611c3676200098e5abc2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.3.tgz","fileCount":74,"integrity":"sha512-YpcNkoq/oT2Hci1UwnKsIj2f5naL87rmRCJTOOq5/0ceyWQk4gv3HSajc90I5wrveY3Ze3wlCuxZvMvJ/H25FA==","signatures":[{"sig":"MEUCIDsKZgmaRzuyLKogLsPFgLPmp8LtpHF9M9EGbf9tsA8aAiEA8YrwSX9iW+IhUC1SZ8cKVLCFRPMr8UOzOixziMXQhUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPrAsCRA9TVsSAnZWagAAowMP/0wHxaP1GEUgtk1Jmlw7\nLMFde/KLbLa93QwHkdzvy51aJXLPdIoDpfnM5H7xt7ujkUCg3HM6PeGXY+Br\nzaxBDHeinKa82SiYoYyRYNSqxnyGIURmQWZ+XJHYiC7k4CiLzfoKi92ePWKk\nncjpZ7W2vQYxM3ZlC1yhrDN/3PfMeNw58P70A3LZdSiUe0AGOmRrNV0Ap+zk\ne/7fQabEo1Org2Ih6SbxgYiotNWjJqpH4xq3WHUc7CY2sDjKQG+eDNPeDqQg\nhOi0EjNRtYlIre1F2QvUiTqrvYPvZObWJPD/lSzb3n5pA9FtmZjOrn58MJ/C\nuqgi8Klb45wY6UMri62Yj2EsNu88KI8iNGyGu7LzZlhbv+9Q2dZrgDM5RqN5\n4N6vTthuYPUWxX82s7nDOAUbBMNpTBECUCy/QDT35xoxxC7LJQavxVUtFcwp\nKIiqHVn78OzZ2Q5TYyA2rFCEqL6OWTAmM0nY7oQO+X5fFKsNjItBiYU7xiFg\ndaaiunJgCvC5DUud4b79kOHPiLIafOJCIPSLKPkqw9xGZMBloYvLFj1xAeqh\ns3YMngc3o5imsFPYsJ2RaSJRkBTWbBNW4eet/fv+9w8vtyQMlzlE0g3ms8dZ\n1OPKAC8BSNvBQWxZBYe1T39ICRLWxdIZBuVAVl+P2Z5MWa6IM+mPqoW7ao78\nuNaA\r\n=0Jen\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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    `<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 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\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":"a1e432fc7a70af5136dd14e3b16f6de0b6cc94dc","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.1","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-alpha.3","@storybook/components":"5.0.0-alpha.3","@storybook/core-events":"5.0.0-alpha.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.3_1547612203853_0.5996019828167272","host":"s3://npm-registry-packages"}},"5.0.0-alpha.4":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.4","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"203ed15979e59c10cb4f8847481e06e35b49ddd5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.4.tgz","fileCount":74,"integrity":"sha512-4hejfwwYsMnCdc96a+TFq9V3eDoPOQoPXlpKH/PomhxiOYZyvbnFpB5wZENEWNpi0rGABHl2CZd5wJm0FJRCjQ==","signatures":[{"sig":"MEUCICTpAaTArl55uLqUHW1pJSHGZk1xr0ik0FfG/kUg2vXGAiEA0MDfqyd9S6uTbsx3BT/rYbYfu0g7rRx8jY/wswliRxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP2WhCRA9TVsSAnZWagAAxxQP/AkJSMEZTL8lwz3JYGku\nSpH8FSexB+YOgadxs9bEmQ3l5K8ZCUGyuOnRVpF61hLsEP7IIXKOlirnxn6l\nWb1cxA9bE+lvDH9Omeo4YyU+HwmXD5N7yNi8llT2Y3hAm0pc81tFUZ2uXJ0R\nei6wiAuz4Wp8kO/y6V4lPUgzAlZ1Q02fno8OAkfZ2b99hOg2PYy5gcdEsYX/\njF8eFPm3jyvczZMniLsDTsigCQj18ldYJyfwW2w5uN4Cv++hzMNXkSDkFwXS\n71SdGerH3Q1gAq7l406BOIIkkCh6sEMqPqufQ7XRPyAeuYDAB+HBhOnxXwbM\nEhx7NijEj6C8fk7e9MZz6aqrUTEqRd18jTdUwW9rm4KLo2B7z12Nv1RhQ8xw\nTh0QRLbH1jHexIYaUNEv0F4RAIJH3pzPDppDf1z1ss73mTvKD+vbGOFI/6Di\nqd0JhgJDLGXMbw5yaGZwrkaIVyp7xBw/mFvHisDKlknsohhf5+s1jlP/Uon5\n2fLUKkyWo/IzbbE8iOgHh/GYRCtqbFpDHdCAgJbx/++bEWPQ/CSiFJ2zrRLt\nDDk6D/6Dp1YamN2FVjngiQCV/z51IlSXjFUazD2zQTOWgqIHWJb6x9ETwkjz\nMvUOtmj+J37NFSzHgD+fZqaBQHEPjmYcrrNPb1GbB/mrxGmpPkL2Ro48dCOa\nbb4h\r\n=adXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"8eb726c746cd82ed1d7d19989bfa6b4d5a7b2c93","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.1","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-alpha.4","@storybook/components":"5.0.0-alpha.4","@storybook/core-events":"5.0.0-alpha.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.4_1547658656794_0.3992752924536527","host":"s3://npm-registry-packages"}},"5.0.0-alpha.5":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.5","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"b39bc6466f423aaac344fa3608dac27d3d58c41d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.5.tgz","fileCount":74,"integrity":"sha512-McNskNkjCb3n+Dk1406EfhCar9NHtB4bR4qQ7bBxmCk3Np/+8kV1O6fDwIwfiufOlel8T/vdU4MQJerUmJSenw==","signatures":[{"sig":"MEYCIQDt4YOTIYNt6iPS2XBIOVF6xfKpAzx0jtO8WAZl3d9rnAIhAJLj5R0pw6m8MfWJ4xtfT/qkToHSRTWYjVXITSczVvWI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQEEFCRA9TVsSAnZWagAAMkwP/RA6Xw4wlnKw+3zHzHdD\n7m+zQpADHQm/ylaTxqTzYGybNTzbBxVq51QIm53HiLSG4uU/0137MzK7zFy2\ntvAXQpcWx9cHO6sS6bBEEESzxRz0IHicjWu1xLvwEdKav4HtegjJ0nj0Tdep\n/+MMmN33WqYfD84UrU+Sam9RPdX2WjDECFXWxjnObajsnxVt6upIJcTZxNJL\nJqDtJbFg2OmSEVs0usP9WOR8xe9UhwOUszsJ1TTW5CRwa28ELw/hy6Jfs4vs\nea4VoRfYw5tuxyzMSrl39SLwU8WNFY3Ion+EEcegeGHnZFJnQdDwrRwW3Sks\ng7ESu2CleQyK48d+Mef8pAObzvDXJ4Cr3fBVWB/A9RFpHtXawazE6yqZ3HJn\n9ssXRyXhl2Y6EQPjaGExFjmq+Da51pGZQbrYsRVfOKqhoDV13hmS+Ch1cPl+\nDgHAg2d72tpai/Mj2GjL9yGLb6FHsIHmPI0TxutSiXFRGotEiHBoNYVOpMjU\nNOgTcaShmZSUHW9SR89Dj4wBifvwkA+qWopqbSjYzc5VsqG6/7xNVHWIxpyx\nwGGwYII+A2xNt6ROCA/rLr0ot5wKiOZYiOlpjELZdmmkR0H/UHZA3gXYr7ki\nxYrNop/VZryvAX3p5ew2zPUtjnT8pOGQY7UK7qqW5WhQy43P0P50MmAz0bxk\nxNdJ\r\n=0zWx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"2176cc520f41e8af86ad9c37370e0fc221f0d4cb","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.1","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-alpha.5","@storybook/components":"5.0.0-alpha.5","@storybook/core-events":"5.0.0-alpha.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.5_1547714820586_0.9837740479002579","host":"s3://npm-registry-packages"}},"4.1.7":{"name":"@storybook/addon-knobs","version":"4.1.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.7","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"298a1bd17f177e4653b073c9bca70c073746daea","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.7.tgz","fileCount":66,"integrity":"sha512-h2YSyZvz+KQIggAKttdTZvRpsCVQUJtyY9mzVHEFDKTccAlC9WjZPD9UDSHYQZKm+0gHtFkxOidFTcjt/5r+8A==","signatures":[{"sig":"MEYCIQDKY5ZZ3GESh7KBTo4SwGIhRxVwxPJa3swrOhMpEXPtfAIhANsTNFMj3rHOj0QpouE1+l0P/vZ9tBH4b2CYZyJ4pLM/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1283006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQI5QCRA9TVsSAnZWagAAln0QAKDBXvhDWY+EUr+bjZ8L\nkFHofaik/q4wwhBVD7x/XSYMP8RKcF4c4CLRCvEwho9O7Bx+7eZRz9gitsO+\nyy3IKqFWM+2ILqCabWM11NwWR7PkS4GgZVkpu7vZl2DN8S4zpQt/yxVfPE5Q\nRCMwbe+0clQzb6YJfonI/yX/ZpI+WLJWNLQhgcdvpNIVKPlRzh+7SspojjEn\naVOk5SwbhzTBSDTblegLHSzEwydJijdTZwkDWiHCbCqCU2BCNr9i8VYGhy9S\nGyTrl7AYSf5p3JTUOBEUMy4EqWZAH70P9WxtIEhzJNVeLDPi9z4lGbQu9Mql\n4QE2eo2bEIwmlZVODedghpJZAmdNMh58MECxLWO1b1n5NEo2CU3dX04gBzAC\nIDqyHQPCENzqNgtyxjFx6C4fwnqLLuQtWRfOrInMZFnJkXQ81wwJrbGiKrOc\nKq/F643v+8OPq2EILGVUL4CPOcWIOj7FuR4U/LB70F0NComF7ifWkqTe6RLr\n+MXwnAj37Zkc1zs/Y5LkzUkX0GwAWtfutvr7e+HsQytumIZPCaPM8JraMSgP\nNyFq9VDdV+iMyKfUAb3SCvYdsaRf6H5Af1ShUKft4n1KsIuzanhyXDJKnFtv\nCyAwuXOesXpVDrJ7GxorTayRNm+DCVBMLFD1BM78/Zxht69AX3fVfaB8Fypm\ne2I6\r\n=33Px\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"2dd7af6e33d32b53df97ac172bf5fcf4e8609e02","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","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.7","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.7","@storybook/core-events":"4.1.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.7_1547734607959_0.9909650393129465","host":"s3://npm-registry-packages"}},"5.0.0-alpha.6":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.6","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"f90554dc4258cd0bea8bc7af1b708b9e7eb6032e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.6.tgz","fileCount":74,"integrity":"sha512-FNRjcxlfCDUzBhOHE9E6reQLGvI8khMWw8vhu1EJko8urG/0faRLTEq0915pHAgHzngXlKWs2qwqppGoiGkOCQ==","signatures":[{"sig":"MEYCIQCiO64kbsAZ7wmcfGt7MuuUqhxzPsVoBca6Jm+3r0kvEgIhAODSYiP7wxxmyuBhBS3Gd1p4hKVyuYyaPnEGV1Y1BmGI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQfoACRA9TVsSAnZWagAAcbUQAJ9QCaBObpH74HxMe5vO\nOgPbulSdDR7xyJko2LgSY5DfzONTwEK91ujqLFwJYp9ueOYd/edPvkc3VjWw\nHgD+EfvKrn1zBaJ2yXG8huSn9JmLItsFswRh124mnCDfUnQkqciYlBfVwH3g\nAG6AyP6WibTbEBeqzZdA84rXeqDuzhNL91QK5n1w6eSIq3wC8LGFI7fU9jfl\nbBAmMCT3aErCouSYhOHtQn7gFUAA2LgoYNRNCu55sQ3mc3JUpvefs2sxcr3H\nnYoDYo/dNK8CE5RdCVAGqYy0b4Q7Sz+cAptdPR9AiXXttSCByeNSdqusCuTM\nD0W/S6XiY0lBvjyiU0J8PT5R0lG5wWm1YiW92Rbe1zzREMJIoXkqsOJe2kR2\nZ4yYWQ03eI8ys7TZrLOTg2VxcdiI4xDZbmJKIXFmfuJySRfdkyznv9HvTGGm\nnX/y2EU8F+isFCei1zzr+GTQR1TncKHjwNwTBuLUxHTYztQ08KYwFI/GgUMK\n5kowmGccB4QasE2WIK+2wuOkRfXLCeTZzv8qA/W9qqpc9MeZsWrhWzF7VXeW\nvJVy6suxAIdKqkGjnOiMXSgxNG1t2kjkNQsiLr6/hkTCNZzo6LnVoao0PeMC\n31c02Juy+SKMzQUlajac1rKLTKvdnPvnsX0KKzAuFH2VLL0OCnblDYzUtLiQ\nLJAX\r\n=kjtT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"2d644bc527d066e70a5c42016a1cd8a5ca7c9c11","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-alpha.6","@storybook/components":"5.0.0-alpha.6","@storybook/core-events":"5.0.0-alpha.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.6_1547827711453_0.9697320960969043","host":"s3://npm-registry-packages"}},"5.0.0-alpha.7":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.7","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3a6edd212c1a2f4eb1a6e31a9ed2ccf852679d20","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.7.tgz","fileCount":74,"integrity":"sha512-keZ67IXc3TfzV60q+ud/yLU/wgwBSULw11GC5mNH5+GS6MBisHtk2BdNsjEhAn2SLhAJ104pqdB2tnNLINRZOQ==","signatures":[{"sig":"MEUCIQCpCLPCKkiV7vl3ICJCAK0Fbd4sh9OaviJCRYtcd7a0QQIge6bmzcCaG1y+NTA3NuHC1z2L0f2wBXbolPTXLATyQ+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcRDZBCRA9TVsSAnZWagAA4woP/1fE86Z4l71oLTRECZJ1\ncTkE5DfMlXaMDwaaMbLhtSIWsggZ1tB0zEmqMECWzEyC/acOggvNgfvH7VyS\n3tDckeCg0cWx+Vrc1Rj8Xu8ghSAj2oMMlJGfH9vaz1lglXAwQpNNxgvkJIBE\nq9aLDtZ7PCA+K/T/QMKcpqFLuiSAU0iPKBz+RvwXQHGCehCyGVeYLWMu6X7Q\nnNeoYFmrm9pSedPSSqveWi/n9UOmp0ikkT//VCtVf++DvdCHDhiI6R6gzUmW\npiBL0ryQUnamNf+s8JD5r3/fzXGHRk8V111alrw8BTZML6CDNrwQLPZOy6Mv\n5ZZG1aJLPBcUsTiyKBDqQY3Hixg/vxDeNzD9wBujrBtV2hbOOV1F7bKdnTYV\n4HK6CCoI3W8FiK/GDrVok3blU9lnRg0A0rWkRKCK0KN41hul9HEHyXSMMbSm\nIUe0/o0+u7K63k9IZr1QCCIU86JF2C1kgztQm6xr+ZnkkC3x9VX980DXXMK4\nAE9dDUZuUMOdg9N+v8J/Hm8G+X5L0dvEk3P5teW/KdOLvF7OyiCkXDt6RVQI\nqydeSmJidwDRwPOGIGUUskSgK2Pn69FOv8edYohyzmLweG57RzWKpHpV26AB\neqzkvOkDIiULubRy2DRfCPKYWZf78vbARkWHvfoSHFJsZXLGL76yhE7siY4b\nrYDD\r\n=fRDp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"d262ca75a0459c1e0dbd61a945345cb68eb622ce","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.5/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-alpha.7","@storybook/components":"5.0.0-alpha.7","@storybook/core-events":"5.0.0-alpha.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.7_1547974209120_0.928254098978246","host":"s3://npm-registry-packages"}},"5.0.0-alpha.8":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.8","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"b974ac2f174818fa3e8dd468df40a4866f0d07aa","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.8.tgz","fileCount":74,"integrity":"sha512-lPGVQ+R8dFmna9P3n+u3AM0+A+KmK1KTjpRWQybdD2jIU/BwllxcEHvZ15k+ox5dAkEZOs8vFiBhh90xwXW7Vw==","signatures":[{"sig":"MEYCIQDHEMSZA0BQBXAdZCx5WwDQY+dH2EXazoB3ygr7JiQ4agIhAMPLTa5JdIPqrfhv5V9g4jVlf7+Xp7N0RJDG0L/l3GSA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcRt7eCRA9TVsSAnZWagAATFoP/RsiApuaHJfN5vdQuq7T\nvdIDA8hSRV+oErkKhmIHsYh45UofYFwM2y8t2nXqcHbUKbUuuAr/IwkOWTST\nqs9SF7ae3qQNpLMeDKHa1bI43WrYn5fuDPfMnpscVLXUOsQctIyzibt3pnp5\nfwT/EtCAoyN0azqjMupJfO6UkKcj70q3y7hVaQWUuWgcGVWu/O9h2hmo1deW\n7bQuiqBkp+O8lOBKo+uKnygGzX7aHLZa/Lv5TeObpvC++xWeib39/OSXKAdW\nuLRy1EmcTwgJO0NAdOwEu8vpupn1FvoPsxlmbNyl0SjkeF8xUeG5OTsmN6H/\nAxfDdTbtK069498VWBt9lxR52Q8CDdZXA+nY4viENRrUh/jysMUDy9NPflPb\n2zSBIO44jFoHYGeOBciPJEekJVPMTOdZGWu0fnC03SPyBYTRlWZv6FRQf72P\n2Ec7JNsV6TurNOt8vgIs4twU9ObL4Oe9enJs+oYG4WNUiymVfvvtGv8kj0Pu\n6qOys0FUIk52HvHsXgmd4U/3et/k0QhAbLX7UytKvLs1EHw0TB1fjWgdbgso\nKP0yrUDHGa1exKmKeTqz9C6Y2UhIIwPgIaevZordFPHe8+BegneNT9JcRw3A\nlfgw2KF9xpWZBJ6ZTwV59C6TqkGwpmvCL6d3BV4QrlehLj3BZMCG4Iu+zUJj\naxNI\r\n=Gicb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"80cb13b705105b80c53dd2966be738c54c7d5fe1","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.6/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-alpha.8","@storybook/components":"5.0.0-alpha.8","@storybook/core-events":"5.0.0-alpha.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.8_1548148446126_0.6662577424021092","host":"s3://npm-registry-packages"}},"4.1.8":{"name":"@storybook/addon-knobs","version":"4.1.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.8","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"e96c1827eab83cb6b057721d11eb2ffefc230cca","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.8.tgz","fileCount":66,"integrity":"sha512-j+c8CKXZkzn0K+GsKBST+FeF3/CJgYyi6F0pO7t/hrwPuFXqvVukbnx+1sDn5QEc+Ixh+yCwIa+C6xNz/DK6cg==","signatures":[{"sig":"MEUCIGea1IpynCJsTt+SJWnD9ed+NExmYiLNEg+mEK011i83AiEA6Wvd+zhwdbtaVAiKXDh8zIV5UmlWSliy4UOR3d6mpFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1283006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSEKjCRA9TVsSAnZWagAAwvEP/RZEfkaxqb1dSma5m8LN\n2fnutlWCXVe83yz/rhwfFmxmpWhY+dTdntz2hwHbc9J5Icfkb2cna3+/ZfTK\nQG/Fro36kSYyhwOiKlIoOngwluWXrWPViNE7A0bCVVnNdOKjW8B51tO8EUCf\nn8KJdg1XTHpwMto1rZVAV5cvU5Z35R/NgL9Y0+sE12hFxoM42Sov2fntCoVJ\neU4XtdA+AglJ9tmbqDgI/tCITUrcVMIr+c6lNIw/vr2maXR95U4iMTzdcXBp\nCAnbPvzzE2x9HyTWJTSwqR7hNhgLozyLgSNYiuwqah2MOK3CpLCkkaUTswss\nhiUJxV8eWrEBhAU9NvPzuq11OsXMzHLJmtNR/ZZwLhDoZ9ikqjjmG/2ausY9\nhsOsrWoIruCyjVNQAo2BVdHk5iY9meLeq+BbC1F+SmlcEQyRdcWeYs9/9VZo\nehtm1EMhudB2D5wu8CFY0oT7xDatFqM8Nt2QqZwzp8V9BhVjnd4ZcvMU87bx\nCDBZlur/uEkVS96e/wwxJ2jSV1AWaJc0aTvYNEBvG9F3wrRvdEp/1LVpw1ft\nEx5SsQm56CMgw14rXUTPAOXRqn5FnN8sv10ptWJd06REWUQXyAuuFebe5Qo7\ncrSrs8nQxmGG2ocdGAmPYPylka9Mwz1pw/9xahV9Yz1LsIvZfKUNWloQAuCb\nFsND\r\n=lbNn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"b9df11de752f31c0cf49d28f7a771e841d670a65","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","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.8","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.8","@storybook/core-events":"4.1.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.8_1548239522702_0.1793236199047077","host":"s3://npm-registry-packages"}},"4.1.9":{"name":"@storybook/addon-knobs","version":"4.1.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.9","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"ae06d91b314a9ed005c0c41e61653000d6a53f45","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.9.tgz","fileCount":66,"integrity":"sha512-ZP7i4amOMACpVcB+i4j+l1Q6CSkIRdRbjqQzPoF5IXZQgti0ST8PefXFn+Ym/hV1RB5LC5fpGrVXafSE5PLXHw==","signatures":[{"sig":"MEUCIAF1V0UEQMuRlXnkuqdUi81kG+sUtMklOp01YWoTBaYeAiEAjHMfqy/MtmiDSZrtlBRCbB9pfa3y4VkadRWwYYj4vMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1283006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSEdGCRA9TVsSAnZWagAA9BkP/264czYTcv1Gue+oLUrO\n146yF8cd/+AdYpgbn8Tl5Bn3bnIzenDwRB1IxI8NSCpZK1PJiB2aokRabVPQ\ngFstbcMAekAkaxCMSXJkSHKqaBkzUIIAJqZveehxpw8Bx7kH00NOsNtZlncI\n9k1sAqAUfWPIIrElMpFu16d+82FmMhKT6V/8Q3cwYfwI2FHzGsg3Ocqo5YGZ\nh/QulBGERDCVnaJSqcGUY1SYH7TjAjsMuOHjU7/Lyp4iipacUdJVuaMMZQlm\nrR8e005Yokpog79SoLNAU/bgR0oUOvD6DMSyz3vSErOSaQecxQh77JPYqaxO\nXxt057tzo6mUHKgLNvEc8ElpbaUKIdux12TN0Lf17ke4lWPdOHXg0LN5nWmj\nX5L+20Lhtf1YFheX6zMC/6r+zIYbCFQj07f4I5Ns8iM4p/FwW3PsEYyxKJfB\na8IFIZC41o08/o6yYsVWASHyzADTftaAG89jHeE8LiqPYp5JC+qNhSVDi/V2\n6UvzeBzyUCMH/gp+MR9+Me4gXHNa0NOhVa+LufmhrKdmYfe2g2I+b2pxO+jM\nhBfWkhxt2cUOfQMwVNvCQ++WJefiXdpDW3n4eIPadDneuz9PO9/sh9Lio7fY\n1f88tF4vhu0TI8BZ6eA2AYQJ6G0SUQqBoNf1zm7NpSs+FzcxV6RskHtWXAw3\ntKuX\r\n=KPIU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"9d5e7e96725415e06585383faf4d70ccc94a3ebf","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","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.9","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.9","@storybook/core-events":"4.1.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.9_1548240710018_0.40741808422561254","host":"s3://npm-registry-packages"}},"5.0.0-alpha.9":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.9","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"71bb278b50e89adc68f90909bf76d58c9acd0a8e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.9.tgz","fileCount":74,"integrity":"sha512-CvoJr3hSkXYAC6hXby4r1bG440F0lVvGbe0347smX8UrxrnozLX3odT1a86jcQD6A9/J7J1/JyFWqIvf8HhsAg==","signatures":[{"sig":"MEQCIGMQVpUFTi6KTVZ5fiNbX1dtg/rtGCagZ1o7gDA8AWOCAiArkNiwm60+zhdQtNCWrGbZGr4rpRGZXDI252zHfu5Zkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSG8yCRA9TVsSAnZWagAAs08P+gKpMSduD6nzTCqSr/UN\nAulw1s2sOg/0Iq+lpRDmFT6fFdUeu+2Zc09icePCaH8cXZd3s2z2dPke724s\nba/MKZGNTDUwgumlIExRtxLqfm3TY8En9D2yBCbFwqgXf7dW4ic7V9NUn+n1\n4ZFsx14gmYEK3oXeAMbcpCbJibnqWev1zzCuDNBe40TOQwk86EjixlOGt7Fp\nts7yBcaPHrYsMKl/eRYqquMJcd64xemFtxwNLDF1KsBOk39lh2d70RBkIKDB\nBuMdR8szG+2ryTkeC47M2taGEvdbZBnszcZ1lK161Bku/fCnn0NHu3zmOtIz\nK0D7zU7/UpsYS/l3G4RmZOZavSb7uCaJKv78mnyKBl2m5DP5D+OU14FjhY8b\n5Ae+L31bjE2fIGcJOHqQTgmqrUVAbOgRsx9cVrv9G8KPDknJyh7pECd8Q2de\nTNvVWfxIOxGSeSUd0HhLPku8D0qScaK8Sgpj+8D7KB40qjvrKmCqfCvJi88h\nfIV+hGpTPbNXXYxPXz5TrWvpofNgnMQezyxjeDQJ664EMRiAHG78ODQr4Fn1\ndHs+gnzSpwAg7ePjTScBDbA6gqgnLiH+ezN5P/vPukXADw3s2heC5LJVev50\n/ffAaTR2K/sArQRJ/+92rz+Qy9WS5kG3UwebS6wpDErSjYOX/yzcuWSPAPGi\nEeg/\r\n=4Axs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"dadd88fdecd88a87aadf528f243ae4df3e835324","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.6/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-alpha.9","@storybook/components":"5.0.0-alpha.9","@storybook/core-events":"5.0.0-alpha.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.9_1548250930090_0.7646389096573962","host":"s3://npm-registry-packages"}},"4.1.10":{"name":"@storybook/addon-knobs","version":"4.1.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.10","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"655892ec6e6fe8e300fc570f50ddb8d15b761772","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.10.tgz","fileCount":66,"integrity":"sha512-Lb9q1vXZTyHqg42Hbtuqt9Ad8zIfv2g0PE8kpeB5cppbvA+f8P5Mhx2Z5lX4p4BNylKG9Xure0DQA06Nmv6j9A==","signatures":[{"sig":"MEUCIQCEv73FxPRF76RWUOLe1pkp7pnRJL0TsWJE8qJHhNjtGAIgZ6as7qkxp+76QYOfbDUJStthjT2aQJA4Z+EXl35pEJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1283010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSc2qCRA9TVsSAnZWagAAv8cQAIH2QRWr/0pWXEu8mk8b\nx7JaazmtotOd9hwdk/XgiNZH/Mnlcq+EedH5fdlbPRIkebNS4VK/z6Nzr02j\nsy2P8sZYiyjj5CUjAGZY7hGoacbPC5J0YHGqIaHd4oa+Mltoht7dZpKfsoGV\n1DTJTQ2cWKElPoytgG5yqOutUE+lYbQGnYdlStWavjErWjSYE0YrHizcLAme\nI+aA0hJEhNoQnk/Y1SoEYB9KCQR91IjL5/3E5y3/4ZsvoCWZxVdX2FlQqICZ\nT6fZqbFLZR+mqYJW8EzfkFlt+54KEuDKzjI9hMxWT33bkfCy1qFCAWpI4GDj\nCPzgm0UT/weX2iQ85nJov9JcCkQmIUVOKm2w9dNuo4dunSP8CvQTQ3Up2YCJ\nAkhn/Ae9YSp9eJKF7IxMqzDX0iaqzGexIxKBmOfWhRD//JYBAQV2XKXmRZEr\nwqsh6P9EfzZ2Uip+r3lUaT9YFYggzH9F0ONdw1o+/TVFOdDjd5Q0NVDpULF1\nKqOpK1fCJ3DMFpInzujFA+DTHef7drl1v++nP2jMQ/DPNrW9ka07z0IUPt42\ns0pIhjqov/swCZPf5NkT9/irM8/I1Od4hEPhbgHaJAUQb1D4bwKPl4xQt7OV\nuAs6TWsPpPpj2Tro7LoV1QeuHQH3eLeAFvwmsX03BJRnEHXr1K4HviS8B3d7\nGeb0\r\n=mY6K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"5860821b9deeba32f894f6483de72455597c4d79","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","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.10","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.10","@storybook/core-events":"4.1.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.10_1548340649555_0.05938886727085668","host":"s3://npm-registry-packages"}},"4.1.11":{"name":"@storybook/addon-knobs","version":"4.1.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.11","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"fd6c90d62a5bf5f94899746a95b02f1ef127cd81","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.11.tgz","fileCount":66,"integrity":"sha512-UQzYZoo0WKHKHSayaEBLvyZNqlqCOKahXzT2r+hS3t6wRnHJSfPtEHD0xTYMJSkA5t+bhlIOFJy0tribd0sdPQ==","signatures":[{"sig":"MEUCIFsHuqU3T3h/7KAr9y6hVS1DPsqiXhWamw94Wieru5jdAiEA6Ck7/LvCEnWYksBaY6yNCrvt+X4eak3+p6f2ii+cSWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1283010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSdDHCRA9TVsSAnZWagAAHn0P/R9ZXp/WzpufwJGOkKZo\nGMoQYJFr1YXupa29tTu6ByufdH5vjSp6hgt2gt5svsnK0j0LRf4/wYiXXPD7\nPmTTlQr/l1T5W1yhwYloDsC9Zsh72UhMFuBDsB8dCPgXbx4V+vkO9wO6aHmQ\nitQM8FYaLpLgG3CLj5dnPk35fGSCskjvAx9fY8y4KxtKhbrJIpiZYPVjBq/+\n0DZisiFUeSz2yzilPR4epBWQ62ouilewOTsDrRQ+2TGiPgMvHLWJ2cK+vNh3\n+tkQpX27nH9bAPM8sInuZU4ZFdA6qMusbUslT3fbamvbE7W4NU058iDWA2zh\nCg35R+Plu/erjnkMP5cttWGqBm6mpHoWEMQng6X6RHf5DRefHlPd0cs8rEJl\nGuxLM9AZHE4/QWTCR9MSwDv995qvqmp+MjU7HvNrZn/LvfgmVDwVgSEa2Wxw\n+SycoFwByUcdrioFpK9y3Sv8z7FjPfhTVPV361+KzKXFP8kHaLSUaODX2Qkb\ntKtMxJM8E2+9K3i8oZHQ2mv0PhSkVvI0OthFiTwI62M+WXQ0e3+Fjx8xKwTt\nkD0hYhsgDO8SApzLp5IJJ3ZtNKnQsQHd5N5uDX4pKHEj9I7E4oeOYH4KbExf\n4QGXPhAEDAmX3OkxA1KN7T7SlzEVg4m889+OMQIAqUFu2sA9C5pKEozA5JSD\nZlYo\r\n=Q9FM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"9f30442098e5350f5ba4872887cf9d1a03146e74","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","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.11","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.11","@storybook/core-events":"4.1.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.11_1548341446525_0.4375856131760527","host":"s3://npm-registry-packages"}},"5.0.0-alpha.10":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.10","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"73284bd5d53695fcb1a1ee2c3a29ca55bacb9b0a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.10.tgz","fileCount":74,"integrity":"sha512-JQ7SH4NG6wZU2TRAcSiL/Z8G3iJIZgpj7Z2vlTLR9KDktxviBnDGASiI+PvfHGajtuOxdyyZoOPj9gKDhjOn4A==","signatures":[{"sig":"MEYCIQCYIF7X5ga1ABtI1cgHswp2yod+3+UoAybWV339mzPM1gIhALozGtnR/1SCCAHUY4w+Q1U/LCdp6ZML7oSaGNmsQziW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcTooECRA9TVsSAnZWagAAyc8P/RUBvMrmg++ijJx3pD1d\nm1ChoqtpNj0k86xKa+Pqly9zqCPqLjw9c6xAmpyI9sSb0kw1DYvaqkYg6UWV\nv1am5+leuG4dYldKYJncrGNFlF7lOeeqC3HSgRA1G9g16/Ejck6V4h4/Eqby\nWz2oh+piHbKFfqmVL+rYZsCclN4k8DWXaT2mZKVmtV1vkDJMxiF7oEtGe5T+\nSs4Vb32/HZ0fe+elZ7ykQe6GpD/89WbqQkznf0xuJOVDuumTRkv9o6rt0L0U\n6a7X2qwrkUef0NDqdhcmJTEtHqJ7/dC7X+hBH79eHxUm0t0NEBLt/qBLgCY2\nn1XqLf4xqvSWiZu+HjeoY/hR4cc3E0J7LfdCWmvCrazpOIl/aTVjOAekTwhT\nW4BSOwlumQsCSxTQ/0505+Um2C2DF2mL4TejxK2n0N4xmpHjNB9OdKNG8GBY\n74D1nXpYaZjZSpxcTOLeWRimkESgT1X6tX6Mu2g57+1dl6DZWxUfjSSozzNz\nQgBf+H4pd+zydefmYjknQNHjSEDbrwVu7uSrBp2XvzT33u6/rSSZMc1NMiHS\n7K2m1jL+ZNHvIw0w2TFXh+TV17fRzOBcLJxWvAHu9JeTGEfVR/m2466b/Krb\njCzoi4982dg+EeGe8XQuwOeIh88cwd8Z6ujJsShgfkBT61kl4JoMfAdrGWVU\nruTe\r\n=20kD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"aed4c6c3c54623433e25133f39c0a74691eb4c19","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-alpha.10","@storybook/components":"5.0.0-alpha.10","@storybook/core-events":"5.0.0-alpha.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.10_1548651012183_0.12905117400759836","host":"s3://npm-registry-packages"}},"5.0.0-alpha.11":{"name":"@storybook/addon-knobs","version":"5.0.0-alpha.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-alpha.11","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"6316d8308c25ff737db656b3493945a84722a059","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-alpha.11.tgz","fileCount":74,"integrity":"sha512-rAUxdrquKNrNcWMlWr9SIToIFpDr5cm15RSXvvkOei3l49ppdinYw9638m32+G/CyfxpmxTCWYlO+EtVuGct2w==","signatures":[{"sig":"MEUCICGDUkcsiX6oeKkFB0TFVdbjUFpqVYmeRO2h7A9HVaJbAiEA6OqGb+POiKFx7GCvrXlloUCsvVw6Dlub+wkFuWQ6ey0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU0FuCRA9TVsSAnZWagAAz3QP/RJS21+xs6+NgeXKWEia\niKFYOiPJ3VmbObNgM7BM+I0oW6uIVOsrfRjsyAO9MVlwT4DYyrmXg8NZHyF3\n7GqiR1DmJnt/IktrtDI7XjWxJT2GeHErdUkmQn49kFrY6rPqMQdKxNa/ih5o\nGBtdDWVztuRbZXj+1tmaK+J+qPFpNAfrNuviLId8PVSE09KXe6+NZptm81MU\nQtzNFm5VHA/sFZdcABJQw8suWnI1pQkRHLnHvHII0i9MNeGkKhNfQZzKJ0me\nUiPkF7nDC2kPBamQkrT1C7oJVWyDhYilyTTV9DgIs5ah2oNZiq8cpFeIRTg5\nZ9DvyYOjKgd5t+YZ/BtKFfLpR6ZDfjBMLBtrUe0KGdL21K7rboCI9E6SfZGi\nEkOxw56/DOqLmEaFmIqnf5lklQSudPLsqAfPH6tuOyGcRGZYKX9FKBlDbh9k\nXrS73Zv/wrtttx7F7ZOGYKTGldNomt9NYHoEtvZ2Yi64FI1mCERXJrOEwuix\naRgsfto9VoDJfecAoRbyrWGaz05eRi1azGzWwQy4fkTEQMe5TLSoUAF0ejoJ\nzG8/2mf4tKwxq5P8rkeORgN4e6O0u6Aq8c5D14pYY8z7L5fH1oqlva69hOrW\n7mreEl8wVffmXr1JVUgpT7yxNn5+fp7F6h6sny+hE5870toFuNO6gb9ZLgPH\nAFBG\r\n=q9WK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"6ecf42b4e75b646edb1df40ab7c306288c46387c","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-alpha.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-alpha.11","@storybook/components":"5.0.0-alpha.11","@storybook/core-events":"5.0.0-alpha.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-alpha.11_1548960107904_0.3852124817092968","host":"s3://npm-registry-packages"}},"5.0.0-beta.1":{"name":"@storybook/addon-knobs","version":"5.0.0-beta.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-beta.1","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"aae6437a81b34c55d0c052ec0fca6f80cebe8de2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-beta.1.tgz","fileCount":74,"integrity":"sha512-PXk5tlq2QX+P0m1B3/LbwEJbyrw4QpEXezmxkeF50axy3nrid5GrF5XL9I43Ki0xncbGgssm2OP7PLB68lNfvw==","signatures":[{"sig":"MEUCIGsJ58QvWBr7erX5KNCcU+/SvjbyoFQSQYt684NYAMlBAiEA66T7v8NF56GUikicKIw+yFy6HQc2NXaGsj3jAGo6Mcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU+rsCRA9TVsSAnZWagAArEkP/2ySczRIqvzttgbJyede\nBAGy2AhUm8ZrXILzlttmotxUZIuPzt9EsTd+sHNicJ6uo1UFzGw2z/WAOITp\nWvNnSHdqgczmn+6TxfQiEvxOeOqKtuMYQOQl1nrJJcD7KGfNYs+RCug0oXcI\nIpycQpqgdmfNWPLOqCz00U2kOp1RhZsH/rWZOXSweNWQ+iX/QxOZUzmsGxRx\ncwdtGLg+QvgWLSJrncpzyDd6HlecJ49fpOfJJCgrkdmd8I0mIs0NRc0c4wfk\nZSq0tvH4nzvdTU9qjOcsDP9F0OKifCmjDcb/C80nsOYrlqbi++OAzzOcKBRz\n8+RBlQnNHDGI2PSoyK6inpJdC9yrZkQBUWAokJlncqoXhy/MmYYY8n5HZApG\n0iLesB5OjasBv4YzOGTURDLeXZzkuYe5tDdbF3a4wR59rG9Fedx3gxYGE5bA\ni9K2B4boNrufvvBHyoSCyzGJszGHz19rva0TAZZ+KNHW9qKE3r+xZiHNAm6r\nFeaAZ+sRa+xaDN+zkVmDm3MUMqnszvEM8b5uI1MStuZ9EF7wm6bHf6ThmPwu\nE03gdBr2oBX1q84OBbYOirwUmriG36gcBdtOTyfjZRtG0+acvbc6KdgW/SLy\nY2cagmmAVOY4Cw3t0y39D7qFhN28+WRMFOf9dQflKP75a/gpJ0K+pgAkrYBE\nSff6\r\n=qvcS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"a146ec37a28ede67f24a9181a6be7c3df5f7448e","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-beta.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-beta.1","@storybook/components":"5.0.0-beta.1","@storybook/core-events":"5.0.0-beta.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-beta.1_1549003499328_0.3186435671796428","host":"s3://npm-registry-packages"}},"5.0.0-beta.2":{"name":"@storybook/addon-knobs","version":"5.0.0-beta.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-beta.2","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"f98a54af5c438f2da0c7910f29f74d17502e0552","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-beta.2.tgz","fileCount":74,"integrity":"sha512-cGvV+etqIC7VfEBfbk+l5jCHi+/W1IWLKPx/wlKTHSgdS+XahzadKzjTgvpk+BfO65oDGYlJG2QgIVotIZUyxw==","signatures":[{"sig":"MEYCIQDmTB2LoYchHZgaEXwmlHk8ZQFqWwX0QVdtBZiN59qGCQIhAIDjNwfPzGYJ4INrSsoIRIGJslcWs58e3D8pZrNM/5n3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXkonCRA9TVsSAnZWagAAeLgP/2bWPAXAa9IPO6/UWVKO\nBX6m3o1gApLy1UMWix3DDIz/ShHpxiThJGeCFVlLFZcfwJhedVjX+TNYKcOi\n3GCtUfAk+ZtEpwQbU4kmK49YkeDcnw/GvsDnOb52kEHHo3RM9ekK82SrUKpB\nz/wjazLH02qgkyVnf7s/MPxH/x5klPP5xYI++GZpUq1bxLlcacNwDEXVohYd\n6keoeUHvMCKH/YVc028R9o6ektdDViO+nAVL6xn5ndfF8qSTohjhiVBNlEPy\nroIQo9CPgVyl+4eMLsRN3U15wWt4mY75VauASEKNfly3QX1mVGlnJf1bXSwP\nBblLsikL9T5IXe/FieSu4U6DXI4gY1fOsTHH0u9Sw3oLey+zWMTMDtvslSB+\na0oPl353OK8JNn7brwrbogy8OPmnxwVZTKHLk7hWoJEiIi+fQJwyIkQssTI7\no/LP9Fh+XU3lfdS/vRH4izcO8KXBAPc/id6DI9gKMS5BhNKSvjVs3fKKxepz\niE7YRbv0FiqpyHC4sLx+6AMdWd0tvcBvGx37E7fL1M1GkvUgynENkMLuAW5W\nefR85KzaPZttY0gN9aUIcnKy9YzQnE5RdUMwh/X5Hh4QpHeDVUHN+h6pJmwu\npZDprd6z4qxKSEHRaeJtQ2SaUYV5ihUH8fvh1vg95+gcQ8/vcMC7yfXQ/pYO\npZi/\r\n=YTCN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"025b9f48886bce334035c83f136e06c7a7625838","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-beta.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-beta.2","@storybook/components":"5.0.0-beta.2","@storybook/core-events":"5.0.0-beta.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-beta.2_1549683238416_0.6417102436398803","host":"s3://npm-registry-packages"}},"5.0.0-beta.3":{"name":"@storybook/addon-knobs","version":"5.0.0-beta.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-beta.3","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"e28b293c8adf74dea9940d0133c92d1852e83a06","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-beta.3.tgz","fileCount":74,"integrity":"sha512-h7rqLtnCFujy/rlfgiHD3kcPdYD5mcFhyyAFjH3deXIhV6AzYAIl3z7wfzCGlox6/czx5CXhdW/y7b6ZMKqN9w==","signatures":[{"sig":"MEUCIFVkbODbRceQStTMLzBYICKMKwd3cyaIrgiErGrbrKrUAiEAtdAAkrNz3+EaxtJ69ksXj1S4pRg0mxRIlxQisz2/kto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcY45fCRA9TVsSAnZWagAAyHAQAJRloInUIJJALpZQ1J54\n+g35tBJQAtkVntR1vCXqp0P3nV6EZa2i2j9G0HfYF0WCQGPwz0zEfC6bxPXT\nfTHAj5NJkCI0wTLaw9hnL0JYe7pzq6tjvbltWrlBPiKc46pdJFpIekfscJow\nj6M8ZUDgvAx6BYZrnZiscuWrY3NHUJZZgrIFphKUI8slQOBgri2MXZS2ZzLz\nEZoAX2ToZ1iRBu8sQtXSYeLYqN4f/3LcN1JbPgq8qwawnzrKWTlE5i6T0OS4\nPKU5NTTO8fbdcxMklgbbwjk08e9uDTujlAQnyc68LsU07rdM6vbfAcaaO0fv\nFei/mmEpWk3FENNB9OVje0iRcOe8aJ40j8FDwduOe2eYPgxBHo2Rq/LD9pTo\nkWddnGzJNCcW651cH2y4ilS5X6BERvX4w8SUfQVq5yISQ9PdNmWPhrPUjkRW\n5sAaFNF8RNiQFqLtk6m0n96rxso3/Af2RG3DdQFIdZcPC0kdMePUcS0iFZ/v\n1fRaOrZaNK08UxDm2XTlYeGhQGhQNIZBGql8tKxomjt2J5PjbGvR5Xzf1Xuj\nGhbpuWSvCIg5QH7U9+EiCi65i+ZHjDWlAyRZXXDoAvk/HHOF/8KffhYgVO02\n13DIu4meHR4d/DlmbXPfX1z8an6ZAe1kL/hBBmB7qtiqLp+Vwo5LFbRPkls2\npWcM\r\n=kkm5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"247dd6a35382f432a39166615fba4f3ba59add63","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-beta.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-beta.3","@storybook/components":"5.0.0-beta.3","@storybook/core-events":"5.0.0-beta.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-beta.3_1550028383070_0.6721708028296796","host":"s3://npm-registry-packages"}},"5.0.0-beta.4":{"name":"@storybook/addon-knobs","version":"5.0.0-beta.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-beta.4","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"edd179d514b7c3bce1e637baa5d04c093d8432b2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-beta.4.tgz","fileCount":74,"integrity":"sha512-E85+8wE4zx90VfXq2diA830eJqJPD8dXJAH99LlNYujeyQQd+4W/DvYcrvHr6gUwQNmN8JREZWlcScg1CuOrFQ==","signatures":[{"sig":"MEUCIQCEuL5Q0p1i9a7zi/DX8IbcfZs0XAdeesOdEiqKRNHELwIgYJ5bA8YLVUvMB6v/w22/p9eQqjABzJRWczXCOT0bRDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZnifCRA9TVsSAnZWagAAhHcP/ijKdLk4Gqvy5HEDlY08\nwQ/v38S2y9bHtmdefvdOBJOsyLbBEkwJtga+uhf9k7QXixv/3EOgzaBdSRSF\njRUo1LKcRZ/w+kARk77mQ7X/eie9MJo0uWGRskP1WcCmsfmSQGw3bD66NXU0\nU/j9y+xEYdCTzeQRnU3Pd/trOPLVOm2xApvpE1gLZz6jP3PMCO4nR1MOQFV3\n+ljSYr4OhgLItGisgLtaV7s6YoRnq9mALbTMb/iiBxY5o5ChamU337IbbIWV\nqDSGbx0FBxIYV10Ed0hTv3bHJnW5O96ruDUqa2OLYsCSQ9A5QLhj8jzCYbmK\nXw/2Qxkf6nUkZUbzpKFmq46sbYRMJznQ/iH69NkX+jtK4TSTvcBH6C/3rCvV\njyzXcrQ02wT9HdmaWyBpekQ4O7seB4fiP/ExOXAto+MbR/f3za6MubAAcO/h\nZqECMmSW9HDPTqP3ebLNjS1N0/QL8XK9epzr1ZT90vtkAJMuaE8YElE5jnxz\nTDxhCfIiwKOvsg4ugffl2GozWuRmoZardLUOzcemgnE5hwJEOT+PBO4TLoI1\nNkzFnntllicuPNJ/CUUJv05x2ZVsNzzBpeqeG+Q4c59Dfs98UOo1qslQhJjw\nwa37K6kazLhnVHHMvUYeIxCU3SX9NyhDWr5R5MVr1G7opPNgRVX9NPWPcLpc\n5deZ\r\n=iyUZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"9c28b665825bcda33285ad6627999d55c7527bea","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-beta.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-beta.4","@storybook/components":"5.0.0-beta.4","@storybook/core-events":"5.0.0-beta.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-beta.4_1550219423480_0.4534111780119312","host":"s3://npm-registry-packages"}},"5.0.0-rc.0":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.0","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2db46e9f11ca8a4fc06de2b0b96c5f7ddf1b4da7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.0.tgz","fileCount":74,"integrity":"sha512-8ik5QzkHnp0t76cb4SeFMR/d67sO1GU1eOW8LNRxFps0xK1yTNm7//nE+GXlRPgUT+5Nfa3Yaqb7pJhKHVteRw==","signatures":[{"sig":"MEUCIQClQXEWAR1WHcRZopWwCa+XtF7Ut5eGBdtu2VqSsBEdJAIgZ8JMR5wTIDaUC4qHPt8Fb4m8kZt8jBX0J05BCitelb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcaCPSCRA9TVsSAnZWagAAfEUQAJ12SsjuU9NL/EVyQURk\nFWrzIa1JWET2FvHlJLhV/WRT0YD/54u/AcGeEF922ZT84dYs3rfBeY/8mTI8\nuPwpZ+4+wKre7mT+kcupTh+7FDKMjVmiP7d4YwpI5D42mDwYDFwzApikY3yG\nx1D4DgMgAuWuc0QtF9UJUotqnRa6lfFzAdZGHGzePXoCHXShltOinoxSa5uA\nhlywT8T0NZCIzimlXvTmPtICckDRepzGE2gr/R2cc/AXm30Bo4oeFblgoRUC\n1Kjl5IgDy/3FsP6prEV1SKZDyJz40iKVojE9fMgVqT1ITjUwUEO9yT5iUJk5\nPsglAWPFL8YJUNGWem2QRReAynqS6WTI04SL5k5ppvUOBNDKO8V4EAbSkOHG\nu3IE9cnw0wBhEwGqRtj+TfeuLqTiZHHBXz9liclg2Ullqyj3M75fQjfZUYiF\nEdvtwHpfyqZpHWtuKzVARYNEDYLMrgkRIzYheBZ40o3HzSgwtrFt0c1xSM5m\nXOkfWf0JEt4KQLTS6BsjGlIAkE/vDaTsqJ/O6hpCfQ5YPRIH9lwehWuGda0b\nA7AO+amAFlWmpJsZ6fXQeyTvTSS+laY+wf2w2iHm3nZAA3v4pmeasWF4dF7n\nRaZd3aQytDYt3nqrI5sNI/BYAb9n/uJ+eKucIDCvGWTIu/6RiLsHTfX7lMP3\n50kL\r\n=3Jqb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"93ad5297b92b4dc797961c4377cece1c5b780a61","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.0","@storybook/components":"5.0.0-rc.0","@storybook/core-events":"5.0.0-rc.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.0_1550328786034_0.7827688631921541","host":"s3://npm-registry-packages"}},"5.0.0-rc.1":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.1","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"bade23e7c01fd2a08d650ecfa4df65b33d40be6b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.1.tgz","fileCount":74,"integrity":"sha512-mQ4sDdS6bVc9po7gD/aBimeuqH1tJMOqif2LpJAt9CgzknwFaAtWoFiXzo+dd2BoiXnYBNzWoM8BGMEJ3FbOpQ==","signatures":[{"sig":"MEYCIQD5htvp5B3CulQaZ1hG67zIbN/Lfj08yGyXISPUeNlT1AIhAMd4xU/uPwKBkfu6gfIfpW0LFwULcL7Ha7Ryh2/dveG6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcaDYxCRA9TVsSAnZWagAAnXUQAIfT5nh64clt5g13GP2S\nq71ahmre6uaPjA1aUY/5JGKUnkTcSkMl3s8napflcyHz0z9OgtYjsZERy74M\n7+05v/sp2BMePI1aJ4AbDG04Oc5QBU8FNrrcJlWJmPZowIvFk1g0Be/J2vdH\neI8pzMHzikEbOTCSKk5pfeNUJ8t5VKNo9+JXfg4Oqti+EWum078RnzL8/D+r\nNom3hbA98KGtQyxJtffOqk7L9LYXXbuwVzy1PVrQaXIP+gXBCHJFJmfW2LPX\n/VkV0xGY+VeiSoFQLNp7XQO0im/1sNO1AeOPwi4TV9NfGzW2KhhFdW50wp8x\nvnAV/HMPH8btMq4GI/a4Qj0vbF9+3m+gNGAUXtLDZTib3Q2NtH+IyxIoi1Uw\nLlXMwQIVx7uN/uF+m2xaoxrrFYXn7VKg/IWrcClSVBV83fbXHSDu021Kq7+R\nBHhfVJ+MCDSdjdgOk/UTBcbMygeUkcf94Lo3MKHOkFwvclOOAs+0HO+m2kGF\nYphZ99Khx7XZa2uGrSvBj7f7aC5WPlK0Lzh1qvfpmvHvoY5QzeExFF2S+9dT\nXOXKeDBMxzNigcE4VThf8zzpTGp+fexqp4cuXAUVSpI7u4Rxy4FYHB5UGcHo\n7Cih/MQs8s4R9wHT4bP6K8lRe97CRxfH0V/DuuAMGhW+2+Gq3v78wQ3VKunL\n+er7\r\n=z21r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"22d3ee17e6f5931234951b6e7df43b1dc63f03b4","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.1","@storybook/components":"5.0.0-rc.1","@storybook/core-events":"5.0.0-rc.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.1_1550333489425_0.8442566395771618","host":"s3://npm-registry-packages"}},"4.1.12":{"name":"@storybook/addon-knobs","version":"4.1.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.12","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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"6066443f0700036b07025844c87b007e8f8bd715","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.12.tgz","fileCount":66,"integrity":"sha512-CLLEeMU3XtKmvzYfFin6K0+mqcHD1xU3bp7yxWEkgAW5ktCRZudOJlt/qQqf5WzC5GWAxLqQ0d3xTa1gVpINag==","signatures":[{"sig":"MEUCIQDG6ZRmpid+M0ELzM7aaaXHmy+X1gwyLvbWsafiNBmWFQIgUT/d8wd6wrFtc/sw1/XWjQed0Sk3gXsEg8BVrG53McA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1283010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcan3ICRA9TVsSAnZWagAAvXAP/0z0VTQSf0t4jWDLJ+gg\nTgZxLKaXpavX6A1OAoVx0dc2uDlQzEF1IQfaXXXB/Ro5x0ZOYzrIwplfV1U9\nLqdExp/AmgPSVcqS2WJoOtU//dKL9wnNnXwEsabcvw/yCJGfBvRAAogPC4kM\nzZkWgQRntdJSN8LwVNiu9H23GrrD/mssoxu0X+byPtHmwPjqxEQR8F+RyleW\nf7q6xgTAyaJoGk0YVXhhUZSYH+8hP6NU+PCR8xZrKn802F9wtDHu2ZpaBnp4\nIGwMRULR5CvyRqPHlYkBVanh7Yxcf/cgf3YT4nWQkMFXzZE+hkHkH2APxeCx\ntfy9Gd2PBcdNvv1Vp8Riy9Os+9Lzb0fvlc0wgqAd8LhFnfIdCTxH4Q4oFvOX\nJ9J/CHNPGPCl6ZMTSBPRUr6fwDTsHaE09wNT2i5Mtp28IaVMVRMFyfDoAIh7\nqbut3KRC/MO+efVjnOsP+Ran5R+Dy4DS7tSz7uO4Q0Z5jnR09Zbylvop0Otw\nmNuA3ndol9163T1WqeOVYHF2wxx3ttLYYrmYgTqGlAclcr+p8VeizVzi2IIG\nWKeWUqCdyLHzIGSc19IoQFrrdmwtq01OBVq0oW30Vp0OeybsNnd1s2z6whVo\nblx/B0Qxtue1+Xm7zBCT8BVjnepRuO9J+IdvkBAKmxePTvopcJ5G5+4hArxB\nkhPz\r\n=BnVC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"fbd7ee4c80df437fed4bdc6e11140733fd450080","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","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.12","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.12","@storybook/core-events":"4.1.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.12_1550482887613_0.3797020092094425","host":"s3://npm-registry-packages"}},"5.0.0-rc.2":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"5addbb4ae4e927d7093a7225d65137badd117f8f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.2.tgz","fileCount":74,"integrity":"sha512-NPh8m+mpHaJDTTrPlZBZEayisKmewElKk7jKGckHMFid99d7Srn/u8UAfPZk7K3RmLO9JOk91FPNjeyVvC21Pw==","signatures":[{"sig":"MEUCIQDuuc/xalkSrklYGhiQW5wnBsjx1GnLLex06EsYWq9thwIgbqS1G1FGBeNArI0HzcHmbJWMTa+FGqiVFs6dPv+gEsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJca6/KCRA9TVsSAnZWagAAHiMP/2hTCF0+m1EDYHSW6syh\n+8NSdb9Aa3v2He9K18MUUcI8heqIhJBf5QlMiLrM0rHu4IdLdkeCYKFZTMhc\n9i/Sb18sNguMC17qr5hSNVz4eBbeV3fgJ8kG+oq/nhnPoWDdy79yy0bCbJh1\nQ53KkuZHIfxM/EJtJeMCukplWNteUMcZl2cT0BbD9a0iNlaQgMTHx93CzO/t\nefMqqYg3WvQmU90XuivjhZL/S3i5vxUl9axSDHM2hgxFGuA43T+fUzk6Iuar\nQYISEoEe69+BpKItCpPCXERm8yveQzOvKFIzIeODC0NZEP9SbfF2cq00Ud6M\nYWYTfsqI2FAO+fWQ0isfBuxkx3wh/h2UAy06Ifo8SgjkOIQJRMY3hjIVgheg\nwFnlrvW8MdMYtN88MAoitUDnsLWrcExJq4eYipmW3UAJFOCm/aSQkk0y6kBE\nTmEjGOCtdc9U6TWyB9HExyG/C2tRpop6vVuKFum3wOHmb8PHCvKt0Lx/NzHC\nV9FToaWM3QbAeHXD6XQhXPZwbtqLkr8jatdA+l3W4MHhzC1vswThZIFB6yVm\nRiue5WHEhKQS3ySPjbhQBgEijB7RcQ2IGWLsMt8vY+gdvvhB6gDhIFJ+9EJi\njmNoGwxxPzvO/R99noagEMEMU/xxvnmALeasNSUt1bp70ytLUVufZLUcmYeB\n+fXe\r\n=iscM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"71b2c9e5798f3768acbeabecb45559c07138653c","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.2","@storybook/components":"5.0.0-rc.2","@storybook/core-events":"5.0.0-rc.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.2_1550561225780_0.7438352177373857","host":"s3://npm-registry-packages"}},"5.0.0-rc.3":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c68d0f11c47bb9a1dcc58cf17b14189022f5dddd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.3.tgz","fileCount":74,"integrity":"sha512-QOb34CladWV8Q/KuV1JpXu29tiK/zj0bcDhvRPL9o9VbdvjJhqv1s2984aE7RLjckGPB5Ao5qn8q8jeB8QNS2g==","signatures":[{"sig":"MEUCIEze4JMozkA3pLmbtNOigqNExU2xMkqm8RgMTHnMxb2GAiEA+8E9HYyCBLL0NMGb8B/5vNmE3x9m+i1r33j9oJWXJME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJca+fHCRA9TVsSAnZWagAAdyMP/0UBuzf+T6w6IGE4KOzo\nr17TicpomxKwE7JBUyJtP6Sx90RDdhWro5c24+B5gM6YGeNVeYlg0mULk32M\n79IwYdCePayMDgchdQamf/yu5qOmmqZeVqak1O/BfPpB676bpT/NJL/CAjHA\noH6FxK83liP01KF00f9vNd+LSoUfQt/+qyPaf6fxNN4JO+B81G0Gt9/m8/Ye\nPZpJDXbYvw3oX4eI5N3gd9F20bpm64UMFVsV03NGnsfPySNkdobWfOTm9HVQ\nfbPN5iEPmy9tluN3lAeKJrjDKX0OwRJ9m2BfUZIISLsQNdorIUbsAkIX21Ie\nryMXcBQIwuqN4lpFoKASkCXwz1iQ2Ck0sZlPzF5zfwfDeQEubKYwgxqH3AbG\nUelE8lh8bjtaFdy7PyOg4X5EBnwpUAl6hsOJsSNudMj6cOWx2Biq2BsXof4B\n7R08KxV4to2GHazytC+lzugFGwGgth65PWcY9gILbXa9Rxx6sCDneTlRfRHQ\nDZ2hEpObFvDsFaEw6GpaeDP9qFJ27nCPRMK+qhi46WneYjPw58S4lX4USLGw\ndmQZGUTDdKaUarmIbMn/avzE8SY9OWfzVOAu1s0KY/eJcE8uv1kjxHsEHPa+\nInYN+p52f3qUnSRnqZZTfOgi8Xj2TF9qMGQi9GBvbrrPuUwEtM3s/+H12jnS\nNqk8\r\n=J2OX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"698f32e49855a5b4643436b693706865329a5b7e","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.3","@storybook/components":"5.0.0-rc.3","@storybook/core-events":"5.0.0-rc.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.3_1550575559288_0.5914126142950977","host":"s3://npm-registry-packages"}},"4.1.13":{"name":"@storybook/addon-knobs","version":"4.1.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.13","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"7a5688903fde1726c168aa188216aaaafb3eb498","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.13.tgz","fileCount":66,"integrity":"sha512-QXOYa4L3sHC27KiXLlJFPSG1ZuJFcESIAKRaWSE+3Rz/AMbt5jgba66CH1b4SXVEIaiEKg6oWu+eRL9JzcmdjA==","signatures":[{"sig":"MEYCIQC+K/8CUQJxaS+1yv/jFF69hBEyZ6TpBDXK3XM7QutfOgIhAMZiy3itlhF+0xf5BS1/0RPeHFt6dyekkz/Hi/hNFTLB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1283010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcblr+CRA9TVsSAnZWagAAkZgQAITu8FjLzBrQzEMRhOdF\nkhP7YW+MTIzQKX0wDHfqUyAS3G+4c/wweW3tWK6UUHzcv3p8NYoxBD/do8AK\nT9AsnGfunZeRFAWhaNKvHUk/1T9zULv+pwZgJEoboyGuZQiZ9A2NQNlaKtlB\nE3r53Fw9M4T97vg3ueRWKLnL/xnzg8HhWbbPA6OxCxto6Df/SOmtRgl3YAcR\nah4Td5shd4IKACmAPHEc0ZOQzKxcuAXobMoUJrpiAiHs58JM6bwJcM7+/EaU\njPinAxlFdKQ4KZkivt5zDAkwZm1kPonhFHf1/hie98TghjjZsThba47G9j/V\nLi739MAUnOOADhw6gBhqRvkBY5qoxEnD+hW2Bg0PVkSrQSlun9KegJLtdWx4\nhzAUuU5eqPazqMHZ9qNP7FbXYoTyayMU+rxigrWVI1LrwhyN4Tm4w/80ocwZ\n4PrR9eKiWRQuWNEiu9VruWSWbjvr/i65NK3c46+QevaseU6VxTyPg4H1v8Jb\nRU7u5FIIH4wdPx6UsrXzBWHOzrc8F5xwKqwHjKUuDMmuWmmrUDgTIllg+85n\nG1OiuNWo7ExfMUJ2Ps9PrwchahPR0Sa21f5k64HTgiQTiB3wR4XIsG1FlgIw\nQJDFqoKjvPvJMVHNBWgJl6UplpR+3CbjxrAB7s+5YtdLc1NSHxyLOzQSAJqr\nOndJ\r\n=Os3M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"c521ca3af0c7ec3b2b729bf134f96b87d77ff8b0","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","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.13","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.13","@storybook/core-events":"4.1.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.13_1550736126107_0.7006071527024054","host":"s3://npm-registry-packages"}},"5.0.0-rc.4":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"1a03bf33e177c2cc4bbbf15d259c818cd8cbc729","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.4.tgz","fileCount":74,"integrity":"sha512-DQcVv20bBg23PuGIxClPp9r7Ts5/JSX4VpEZRz21BoqV88Jtc5CaKY1IwanBwxV8o0SbxNh7hymbeD6G0mqW6w==","signatures":[{"sig":"MEYCIQDJ/C7c1C/T2zferpC+oCQHGjQUHc4lgvC1NABObSUcQAIhAP83x7+wgR78RFdxx8xLEcuBOqoftRRQaiulWDC0rayo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbnsGCRA9TVsSAnZWagAAWxQP/Rmy5YZ6HMUJE26bQsar\n+MEhD5mX8VD/9l9b9Jxh6RMdbFaW1THA0XRTl9IF+Zg69BbWmlNg0RmdtaJC\nLk7KsEIAU+hSgz1wTishPqrz6scn3X2w7NL/WJO1dJd0km6fzUJLWV/fk3Rg\nTR6+T00Y/FNj0WWdG3a5uJSm9b4399mIlG2VdzUIsUDW1jhRQ6Q4LxjtfWF6\nm0GJj2Ytzsbk9Q6KzzgszvMbynfdmyh8hkUOMlhgN/Sa255x4BziVWyXC6T4\n4O4tjAvzpo3DjTiPNfCuz0UUoM1qGaNBgi8DN2yIfu15oZQ0UR2sZ3g1kZMb\nUHwt+LxQW88/HArRUj/RwzyhJrRaMOY6kbqh6H/ZdutG+qh1/7gDwr1rEzLU\n9Pbk7upEjTl+XJwvzD+CybXKr6b312Srj4Izc+ek4fu7UaRKMEKrxbTWLssV\npX/yZMABMvQtTu/3+3hOGHJyRemNAdGLTEFJwuirSIZJMCNrXrQ3aDmpy8ZK\nPFhZPBfmXk710NPoPtZa1781nrpq91hRhfyJQQkgilHjwY1thbxw0Z9yJRrA\naWCd5RtFi3sWtwhCQUxN95p8c4razc4PIiuV4GhHjyyrubbKGnssK4fH/XpM\nQ1c9AvF9MKpr6gaSzUkgxGjl4GQN1w0OGwIj7AUOMKUPCXF5FsFFLYWQVzfI\nHusZ\r\n=pECm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"3ba5266050e404cc9eccd002b4b9cf9324f6d131","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.4","@storybook/components":"5.0.0-rc.4","@storybook/core-events":"5.0.0-rc.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.4_1550744326078_0.6724685316745014","host":"s3://npm-registry-packages"}},"5.0.0-rc.5":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"50fdd12c5d2dbd44a0285137f246bb1412a998e8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.5.tgz","fileCount":74,"integrity":"sha512-bGnRzKErHQTa9x1w416hl+DTtcmsBiyiBTHdw2ssf0Gcu/x2GY04QPaKFCbVx6GIHoQHOjAus8OC12m6n8/Aog==","signatures":[{"sig":"MEYCIQDC5LhC58AVDkzBl6ZlrRpUBaVFshMeAIzjPhVKfOQaGwIhANrt45mEkeC4MfEg4pcUbjmde66ECou00s465NfEVJN+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJccQreCRA9TVsSAnZWagAAKIkP/jH07r7hDE3c0FKCRei7\nVckmWHXuAcexqflGcUvrpuZRzadwgLKeXjVaqJRK/4/10/jQIHlfRaEUJDqs\nT38vhuEMpx/abNmCbBpJ11opXHqc9uSknMRYIJ2U0dFZCsEo0YQrHnWoi5dI\nEbRqyikYjRMm5Lne10pKlMWP58C9OL74BJLPN2A0cpe6kYsLh5JqZYRkYhLT\nMfOopO89UHpihw+4GkzJ2xNGTEoqWyY0W8z88nauVdjX6ZlZCZb+deYPZa8U\niyEhiLcPhLQqfDiH4LEVGkUtCttwTyGn68ZA3HukQiSKDjuYNorjusgEKDeW\nyMMTUm7PWAAFbz0WQLM0IiFGlOOx34sVaPOtnPg7q23fvRXjYPdX7f39xSVg\naW2+dcoAGAPWXeL3BXlZ4zDYUIiTQO4UVurILRWkjJv2ISvwV5rVVRHeDszr\ny0jtl9fLxOhZ4bzJ+E3kTjnBNdnyEOqm+YzU4XhflzQwDWW4v6r7K1bmBoEj\nNimi4TuvC7gEicolrycf5BmNZH89C9+9P+16kZP6nqO+02eL/n5nTh+903R5\nSCG2CAlh/+Sgn6vavB0lRfhWeCyMarjil9LVk3rSz3pUsmMCc7WUzFcjym31\nnkJonuraRalRX/b6lMF4lnFiat3ZAYkCntIAc/GgFbvcSISRR5bhXsaQozDE\n7LhN\r\n=YVru\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"3982959868bdb75696444a25494aa73e9847b413","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.5","@storybook/components":"5.0.0-rc.5","@storybook/core-events":"5.0.0-rc.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.5_1550912221618_0.49275864707975203","host":"s3://npm-registry-packages"}},"5.0.0-rc.6":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"5e5a34571978ec74a76f688d163561bb6fdac42c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.6.tgz","fileCount":74,"integrity":"sha512-qruooOOXG5oV3JL3n0fPODVds51sG028HbXN59/mgqsbzkSxFzvaAU7Ag+dV/F+lYglLwFWDfBgDenFQyt6hLw==","signatures":[{"sig":"MEYCIQCVwxzZ6WM8BiLaqhfQt+mS2fno2RMj4lV9ktlf8+QwfwIhAPtDv3UUMuF0zLyjkJJYwyvTojTbKPznqLl7PKXEh0wR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdBL+CRA9TVsSAnZWagAAaK0P/jy7+B/WFwA8wGrG8tKj\nS6hobeA3KyxOfwrCDpibIHX+DIRgNxdbXnd/7TGfGu/bnkKBCsO8H+nE4t2c\nEOzfaatWpNtjKktCMeFfvkNib4oGnnMqgrfwC1C3iOG+QId72rC75GDt7t20\nSdyjOAFzQAn6mCjuktXG2M6gHSinNoMGgf/m9K81vxrCXI0mNbSHdIEh/m6H\nj1qv4abWukA0/WSnOiWJvn6l1FDfiVjCODuG9gHyCq+efg8UGC1gxsCfo4FQ\nQXPMjwky3w+yUZTeUg/ehQw3hDVEcxTd2ujPbNdZC8jHv39NqzOQrKB7nMF/\nYxjBq2ZZ2OHNU/HcKHdYdDxuAJVzD2tnoWN+LyrKrDdUshl4b1xdQxVYiVAl\nL3ZQDbdIj1HOVNM33Ms3iILZOsW9ab6U3jPQoCyWjsHlLSq+cUxLxvpfk1Rh\ngay2DUP5+CVkcdktEjEup8jhRfkKolBgZWd9XVIK3a3zTbp30E4+ttL2bjPs\nFgATNGfLv53C7jIdfJoauoRi7LxNU+HkDnucWQMj/M359x0Rw4m7F1grUfke\n9k3KzGx8GRorqKA3bEwjvtCZxW+OHOjiOya6udhDkfFA40+j5ORbedIMOXBT\nc2JRBPNkKa3rdGmu0NrbzDL5moFvdyrp1HuKQk8irMSxqxw2GoxwWXTQemZo\nS3SW\r\n=CX5n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"70ab48e02c501c401c15e73630919ff1bd2140f7","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.6","@storybook/components":"5.0.0-rc.6","@storybook/core-events":"5.0.0-rc.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.6_1551110909918_0.07410050435687654","host":"s3://npm-registry-packages"}},"5.0.0-rc.7":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"bec928de3212956906c5deb9623cae54f99ccf2d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.7.tgz","fileCount":74,"integrity":"sha512-9GKC00gvfP1R9+gYN2p6MvLZR1G8XguDQzGiQNpOh8LfM9LtjzV9+WKIfpzpo8jWH44LXKG8xiK0yxbLOTqvaA==","signatures":[{"sig":"MEUCIQCSB8OnROaAE+vyQ0FC+oqDJ31K2SQ6EM99dsizCm5kWQIgS/PyH8YZtfV+skaheERLuNVHQF1rAOVLBcAQiISmKnw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdsq+CRA9TVsSAnZWagAAW7MP/1gCM6/bmqVvyNBA6qUT\nf1ksf4+eRFw9TjrxL+PofvRq6zJqjOhJiO0dYBy+guWTLYsCfrHzTSRBSJb9\nUGVMCPTcEU0/mJCwTe/NHXoBcs1xcz4SReyCNeZgGhTgj9whZ2CqqLjFhU/e\n/X+yAGTt/WVgM7SAi4iB85+ufHUI5Sgu7p97UsXVBWQ7p0e7vL5cQEB5QlZD\n2g2U4CX/D6sZvlfz2vm56NGsfZ1B+AmA1WfOQuNUYnIVq88TFRsvGsfHBwCF\nSgdt106OXfxoV1ZASOZiujYjsVXUlRhkKBdcFd3oUPd1pba1jR6+cbvhF4U5\nbblQWx6hcg2Bb6k0V/i5lPbsb9ceVsZ1HZVnRh0GPIAHqWh18N1WeOCip1O7\n7LJmImxz5Ty6ukea79w74KWOYA98jh4NwaxqPpHhjNhVn4vvVQEFOgL4PD3Y\nlkTiQ1WCpEJb11VkceU59vYic4zULgcXp4DaloTD8kB3dFKfGwuyD6gBwakT\nG5AsIU0qrWFbUtpL3HynqqFcAzEf4MT502+SQKUCiBvrjw78SoGOh9SXVUY4\nqKcEndncfODN+lFETj6ETe0RpdnuR+unyczH4YrDO5qGJiPiM6u7H3M+144Q\n/NPPUATC2R5//ZmsZNPdTNz4VKNCJ9QL4sNWBALKbrr4Zt1dDsT3F4bKu2eo\niMaO\r\n=xe4+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"163aa5b5f386f3ad07d27f2112c82185c150c8fa","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.7","@storybook/components":"5.0.0-rc.7","@storybook/core-events":"5.0.0-rc.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.7_1551289021312_0.3751730513157845","host":"s3://npm-registry-packages"}},"5.0.0-rc.8":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"a4ebff7b372756092e212196d7e52b93fca0e379","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.8.tgz","fileCount":74,"integrity":"sha512-JI3JTsNbPhESTZ04XV4H2dab5M8/fGy2WOcx0FDfHcXWpKfKZgiKERiT0rDdp8j2wP52iVlM0T/sRr5jaUgMPw==","signatures":[{"sig":"MEUCIAZdXX8POIiimnMszi4PdNLKWIZv8HaKhNN8K9WO8pEsAiEA31ShBJ7B/jeoHnkRSSE88UyIj0ia4UeWCTx7sarirbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJceWrJCRA9TVsSAnZWagAAVH4P/j5qoJdvWx6uPH/kAjq9\n2YfXMphvipMlxQTAWF8gKS30ZL/6HL5ETxHbrSb4q/4fZPGFhzYkViqYWe8I\nMB5EwQmO+URwO+TkKSjh9VTzjStLUBlUVlXezy9RY2jmgQOV3otN1JmlAOXn\nFNgM2lE67CNjzRO5hhvNmZDPr3Q/mEl7STqGVEGN0ZllyVKLjKaMyk8mIXk6\nqw+4le8rrFRNeRbS0MFnd/WDX56NPzXVUu/GOF4P8WIbbSk4wyoo+LnxQ934\nDFreE5xo/ihyT37IAZi9WZ/xvkaoozyOOdLHHS8D1OrfT3Nfmcs4G4FEnR/H\nLudJPa3FzvXPpMGr3g+sHrQGa7746+UG/OiEfxUQdY5h2kf0FSfDjiU1/qUR\n5uPPhbu0ufty7szFOGGPthWw4HT5eF5k89WE99R/XBN7iTDt8X+/+ZBpQiZR\nh7rS7lIwJGLoqJf5kCweb8cYteHHiyVGtCPmA1VB0Jrn2hliwlxAcabCe6m0\nugJNGyM6GGRuXwXm/nd+Se7WS9g7IxEpBdmGH1NPDzIsVClYLCCInVfK/y4W\nBIuunyhfwgIqBaDQ6YjkmFROJ68ePeznuhhiZPMkuI0iwLP5/cm6hYcqHaHZ\njf/MNjfSSxPJZv41WcY0AzIOOfqGAM6Grq09T3vRkOlwKxfRubQ2AEJnrkhZ\nasvD\r\n=MhOZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"6c1d4183d3608a3af6328e6d4aa706d2689a0320","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.8","@storybook/components":"5.0.0-rc.8","@storybook/core-events":"5.0.0-rc.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.8_1551461064134_0.5860848683481872","host":"s3://npm-registry-packages"}},"5.0.0-rc.9":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9b9c7ce6a59c9e8a8df08e89a3c1cab7579d38d2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.9.tgz","fileCount":74,"integrity":"sha512-bzw8Wv03gYCra2qBPTBPfDf8cbJMuvzq8InScWWTvgtMfGtQkkqMA7eEc9wfGFXBSCC3X8OIg/2VIzm7ltFU8A==","signatures":[{"sig":"MEUCIQDmXTfrRCTzQVOUrEpPewp0qaQmkFVQidK/IBT0EKX/dwIgS+jh6OnFjv+lQv0gih5gBgntJZerAhYlpKsnEMHe5Bc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJce3RICRA9TVsSAnZWagAAFAoP/0IM3S3/PeAmMDQtdJ3z\nfABWLsmckECUXD031iy++fmmgSrb34ygMQzZMOFNoVD7d/Pn/FXz4YePFDJb\n+aoIvdqLQyo9SKBLHK+3vjXReHjQrWU7dZ8wIDkExoqQ94x4+MA+Patjgq0l\nmjoH5/UEzaSwO4/m1zYq+cgrmryy9iZ3rIQT83f1pP+evoewwgJyTCvLbirD\nYOaEL7fON05YtqwGdRt8l79yodXrlsUL9gKfCj8KZU+rSOItPyjg7p/ALqW0\n3VpaC7V2W2rvsQdJeC4vIZojnaxq/oVchPjA0jTyf+BXTx4SlYsZbcAUzOzG\nvVVAUKhA5mdCHWmlHpcFYiR1rKPhg2NlCqFH8SzzD+9rkPzBaz6yf/92P49f\nDo30RsKRkDWxVvreg0fz9PhO+ScOjAwEBIamdFxkrSdM5nfHgK2xyvPJlKU7\nNxeuZU44XWTPHQvbT1b6Il+Qh5lFE7qRS5ooxI84ShkfCJXGbBbCdWQb4MZL\nEYQS5kKtMNdLODx6/vf1cOJWUZhVJRRfyddC76lznw0wlVLVOkuNR7klMQIs\nTjaSGq2Nj06MGqePG1iZRJg8J9Powi8SAuhL0cAKseZSn16UZrIh9FPSg3Ma\n9VCGLa+GNwvA+KdICAbTFINJVZXAY/2uapgzhJuKXWVUJZqmgHZCASPNICu4\negnj\r\n=9CSK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"d782ca1260df341cc488bc9a575c17c4e9e6e0ec","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.9","@storybook/components":"5.0.0-rc.9","@storybook/core-events":"5.0.0-rc.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.9_1551594567429_0.3399748583008877","host":"s3://npm-registry-packages"}},"5.0.0-rc.10":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.10","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"f754ac4e4ff94ed7aabd35c877710aa67b609342","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.10.tgz","fileCount":74,"integrity":"sha512-qXBAnt3ABQQ4Y8YaeHanIQMpGKvwH739O+IUSMPPf3Q0rz8iTWkMpbUl4N2hgPQARc2l48c0CQdifQLBGa6fKQ==","signatures":[{"sig":"MEUCIQCXChfNKw1kEivB9W/j5Jz0ZcWCgOoO7w5J2u2s6lv0gQIgVKDg+EyqGt9yA6tpVxNM/HwDmAOQORYO73Z+v11WaNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfMZ0CRA9TVsSAnZWagAAnFQQAJ8x/J1z6k2fy9q+Ea8w\nweJmROWxR1X48Q7xT/deYTWb/GkfMC2FMh1RHzZBcNFIfiULbETndeyJeOVZ\novJtLett9Mv9ZbRE3tTRCyHUkjZGxTUIpNh7Xc2bbxF/uPqPygP1NcTSbH13\nRUYwPpLcD/6NrgtWB+OYmr5h+lcKS4YkrIA825q3cA4zus9D5lFQ3W+OK0r2\nDfnSogbSUs8vMcqeTEn+lNnA11J5Dl1WSQ0mSCAUI4J28g21+WiuXPrAxzQg\nEFQagNxZY87UbWeXsWYIlPTXvUOAUFJjHIFek/gEIv3pyoLj2xihkmjVdPi2\nNiK3jUOugovZ+p+sl/mPNk7W7k0XJcRFF9nxkC+JA3yDWdsVyf0xTAf177Lj\nNXIerX+YDVWEECg6JPOTC23r+KbaR07RRA1UAB74xo8zRqCUPJN/mKJpPPvu\nyEG20Ncld5br30OfYxs5cTYbtUyAij/Jl4pE4adhxPH3xKJk4wvm+3HZYqrP\nXVpvAEUtmfuAoGpdE6nU9VaIdj9jkcH3qWbRu72WM2d2dMncA2zS+r8ZZQqM\ndNsUgYTseEt+++1lVtYcDROADVlVlPHfI0/21f4EvYerpzyzCD1KscaqP7w8\nSiUs8iDVxnucQiECTszfYAlmjcD615n5P9mJ+qa3T0OJRg3tHGDEYMc/wdVP\nFn08\r\n=gafm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"a464c6b23689223a452bd6fcb9956273d9b56023","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.10","@storybook/components":"5.0.0-rc.10","@storybook/core-events":"5.0.0-rc.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.10_1551681139781_0.4693028309145053","host":"s3://npm-registry-packages"}},"5.0.0-rc.11":{"name":"@storybook/addon-knobs","version":"5.0.0-rc.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0-rc.11","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"249323405e751b9ca86d02c34f900007e404298a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0-rc.11.tgz","fileCount":74,"integrity":"sha512-nCpco/NnBHspItX7r3NVWSzcvU9W83DFQAP4SiWLVljbd4v7/QbDoMuxS4RbPF05q9UCBT3Y5aRtVc0Szym/4Q==","signatures":[{"sig":"MEQCIFPm3v1Z8oAZ4DzmyCx6UQsEwTectv+TddLpqcahdBdGAiBvmNaZqKKLd68FWj54TwQPE9DjNpkqVcCQu7+5f47joQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfdxgCRA9TVsSAnZWagAAePYP/jqQGue4SXXq4UANcRiZ\nyqByUUhYtt1MRuvg4ga++ZDzQXfHnCkdZiaXAdO0cw3xssyYt5mZ1zoK3rwG\nTWF9aj2QANzne/Z3/8H+jhrNplAl3Jl6cxC59nm21LTLPUmw36SygWCQCuJx\n+QpYppX1mu/Ek7asnDuusy5KGU2gJ/OZRL/KI9tzZzqna+3yeh6QHB/juzSe\nMTkaVO2msWrHDdx90r+Y8C1fkhKl+DY+na0l5KIa0iT3vTgQL2Sgc5fUfG3r\niQ+wN/+EBbe0mbfLwsoZf5kM3rQfxKtvroTz6NXWUuLZuyuAkzHtQ2bKmioo\nQpaENaktV5PJVUj+PWPkgZM3AbMgYTFIYfiyYIjqxhJt9g8mjD0XBY6yL838\nHb2Mb6zdKoGbEIyMMjV/qPLrbgXnmLXPx55RyowSzmBNBKrojRW7wPs+r490\nP1JAh609fYZYzVhlQz6bd7Mn8AyqqJJUrTiYq8v0hdXtkD8t90+eEBUgFTX5\n38Rviq/2gP27FzsKXKp44Yysp9KrGwFUNnCPjVj7uAtv9TeMCelIhsEIhuOh\nNlJtbRv6fi2utf+hwDaUEWAcaD6wm9hk36YwBDoPvtdoSQiOrVFmEP6acAHf\nC+jShcvqlBqqDXKznbblSORW6h+wHrPsikyH/hEC6LWDLtGQDizPJyWTQl2P\nXewp\r\n=PIec\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"2724eb7c21d0d28e9a5cf0abf314f2314f32d594","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0-rc.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0-rc.11","@storybook/components":"5.0.0-rc.11","@storybook/core-events":"5.0.0-rc.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0-rc.11_1551752287894_0.7762777495225315","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@storybook/addon-knobs","version":"5.0.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3d8ffc01112e9c6073349c60e8addccd3da9a53d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.0.tgz","fileCount":74,"integrity":"sha512-YPxVzRbM3IepgU2GekuA7AVUnGVdu1mglh7ENAaRlynbMLAS7H780JxF4qK9aJiXm8oUudYxprz6Fmr4BNkWiA==","signatures":[{"sig":"MEUCIQCX016ZAvpe3/Jh6pm6Xnhuxaj8G3g4XPVUkooJNxKkRwIgQUTLCSDF+iayC8OcQ7p73+lAL0mUC05KNTrdClxV5gM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfinlCRA9TVsSAnZWagAA9ZwP/12Icld3HCeSrrbMvzGo\na1JRxAijXc4Vp9/oyUUGY89ZAk3fvVd4mxMOAmzi0KbCmWhlcnUzoxnbvg/P\nJiGznI25BOKdmKNlJxW/UhtbaN+Ej8FHsfdTEzJm5NcXOPu4fpse3SolSzm1\nKvwjMfZVWq51AZExwuWj8DT/jVdq0/N8/IfO684D1ljpIou1mKykIDBjrbG1\nCeGVrOiQi7p/PUKNGj9WKQr9/lI8+537ZUEGy/Pr3+/evk9tJiEJGMmj3Hod\nzl2v/DZ60QYUFtNaCoGf/A3k1hfnUOMup1QeD5K5uIowhRBcL3xn7EUUuRaf\naWju0YYMcFGcE1MnYOE22JYVI+urFzqqwWfjYvrmCZwkK15IRbL2k6KnevWo\n2zwgYnA+88W2yuJk30iiT4oWEXmHl8HQQkT+MT9Fe6OvCxrJghcbrHG3lGK1\noa4iZhBhoMIGYjvvWkHuXXZm1Qi/LyZR+hLP9DpAUWXB8+kO+Bv8l5s0i9nt\nbAj6iNkysUxSZ3ybWcYWyao+lMJauzXAJ3jJv/srxYpIU9whvx4lbyEVJydS\nJDYAp/GsVyC7MjdgsGVMGktUm/9PGjjADdKgxV3j2Dk9jDyS28BWj1ZLFL4Q\ni9VsB8wNNoE+US0ebQpe1dLiZ9X6thqrpuWPDHu2N2G1joNts0n2C8xeFeaY\ntrL2\r\n=oS/D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"670a682de384dca31c4ebc5c61a824f4d241f720","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.2","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.0.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.0","@storybook/components":"5.0.0","@storybook/core-events":"5.0.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.0_1551772133115_0.7756564697820241","host":"s3://npm-registry-packages"}},"5.1.0-alpha.0":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9480362d9683c74266ee585facdbf8b6e8b2b322","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.0.tgz","fileCount":74,"integrity":"sha512-l8JoKQ1GUvuew/1En7usqsq5m7Z0ph1SyaW6RBiLxhkQXfJFlBIe7BD92l8oMw2mXVSrz/KuTRKrS44KD6Lmhw==","signatures":[{"sig":"MEUCIQCI4zE16uRBnrW390Ws8guPIVj+9TEmV6rkDLn/G//fVQIgPrzJmsQmGvxiuFdslOroS1LVzBKydOVkmvliB9zdvUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1311295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfzP2CRA9TVsSAnZWagAAqrYP/27/btiSaCO5KVUtlWbA\nfR0IhLUOw3/7UrennpV2g5kHWWd2wtsJoDLFr5HeUKDd9n2JFo3+8MStOWGT\nECYcHsM/bVw6ZhiHy/NIQ6htDvRwaHTnqclXkIlM9QvFJ7+WjlHkzQ9Lr5a0\nu8uZY4EtV5aOFaHUORz/GqujghSZswgRiceYsrxUYNMSu6Wo1pVF9plnTTNg\nYDprnvpWE6UrelHEJlboijee1aqmGz16qcSaat6MyBE4Q7J0yFdJunZGwRDP\nRyoPxV2l2oIzMpNQU/QQRa2D8r3P7fdP8HloQVtfvt20W6o2bc9UNsm7w8jE\n5Ew981oUpouPJ2khX0oLstMHQtpISkVztB/AK7c9eh9jGf8sWt94Fozvq1nj\nhzg4Kq2VNbaTvzGUa6o5M4fI5O3fVEprVP2zt2yVGBQCJrxCEzHBv9+y3cbZ\nl+ABNu+Z2erD9AhmdG3pbDzV4JoWJuomp8tEB/ne4gWGBU5Y1YAqEE3sq/0o\nsvTr6maOM0/4rYmiAYjSG+cb9yLWS4jhGbhg3zBnSCIYUj/ANyb9oE9Qzaik\nwZcVQbNz50YZuPZ97QZvpF/LFs05BaK/AdeoByKY2BjLF/7Q7t8xRD/IHL8p\nrGG62nrF/PpJq6IuEoBTPhSGHlmnMueUVBDli8u+CnVh/N8Vmvs3CTk8OdVx\nctda\r\n=bXbz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"a05491b07af8d56addb15a1b7599c960b423af75","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.0-alpha.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.0","@storybook/components":"5.1.0-alpha.0","@storybook/core-events":"5.1.0-alpha.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.0_1551840245653_0.6443868559388821","host":"s3://npm-registry-packages"}},"5.1.0-alpha.1":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0be421c9a23a0f0e8da922ab4b040200e45e1e6b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.1.tgz","fileCount":74,"integrity":"sha512-6gBfiLnKLi14na13IvV7xknYeXpZrrmVPN6cykYuR4XkhjBvWqG2T2Nr/oZ7PneKCUZAjwVR6fpay6HMVtgTsA==","signatures":[{"sig":"MEYCIQC0UMWZpbN2Lk5JsL6E/TB/b5TDnISOXm77oqwdJM7w6AIhALVYqFpy4zSixWY1+SdbrkSu2JDDZpW3DSXEChlkUQrZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1311988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgSf2CRA9TVsSAnZWagAA0NkP/RZ6ALBePQ9sSGZuOjTN\n/RzhaR7KAOERbseCykDVUrVkzTwLjW/N8LOatAtSpPRJeR53VPHMs9AnIijC\nRPB8FmIQ1Xq4At8WbD20lEWJgj4JxQXZDXZFiFulvy7M/hIUgQVqEqOZIS7Q\nN9EwJuzbErL1QyZb+LmgQ3EXFB51FNh0Pv5JtHVxrxmSMrP6uQitEL7KKjtX\nO5rxeaU0CUXd/G1a/1evEBL78X2I8ckUbUxSBXyaecSo7Xsjbpl6qquGwxik\nDile7Yrkaqu1CgGZ1mGxhSx/bIMT0r8JvxlP7NK/j4lANZl1Hl0KNa9F25wq\n7j8Fg1C2RN7jhUjawI5rZhVxgfZ6LxJRYNEHnmc6Necr4o3ta23OEhDT8zBN\nMhb6XbDffK8vNEg9rop9G2IU0/STzr1TGiUzZVA3IZD1MZTrnSLTgqzeS/C+\nAm7TEVRgsTs2qy0MSH/F7TqBdrJe6AdJw35fzDVgzHntMS8x1N7XRLLb4c5W\nQrlFyPFnjfEjUSo42R30uRoXdehCY3iC3zua2j8nobIn+QFz4y25pXP//G6j\nzGvjyY/Lg174tzi4oa3NkJkDaL8RiQQugNmFH9z9VP/gE2Du0+9t3FisafUq\nf6BnAyowiMoMEnGTCU3QHA1QV4knQy2ujDJ+hFC+kkZesto/roGqSdOuJX5w\nON42\r\n=9czK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"ed9b342742fadd5005f84bec846c0537bc13b4d5","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.1","@storybook/components":"5.1.0-alpha.1","@storybook/core-events":"5.1.0-alpha.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.1_1551968246234_0.5481556684315729","host":"s3://npm-registry-packages"}},"5.1.0-alpha.2":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c9925fe729d67ac5f81e9dd1ec4c937daf7b6e97","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.2.tgz","fileCount":74,"integrity":"sha512-EogkDwxWjL6sV8/B4iBewBsQ9hvjQ1fnZqfU0ZT6BleG8E1piQvknY7nfHwRWrR+CO7Xa6NqDoEYDR4ChLgorQ==","signatures":[{"sig":"MEUCIA+2aX4hSuenDSkV5Wx1iV8ul3+1/oUCYBIgSc0eRyYnAiEAs4KjvJDDPfTkz9k5GtjFU83iQW20KJqIOxAzeT0UMdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1311988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgkaJCRA9TVsSAnZWagAA68YP/RSdklpGidD/HU/7xyt9\n1DswQsnbFdc7IoeH2oTmJeEuaJepp8cgtUHJAyNzZ3JkCieWgC6/DTCz305Q\nUamSTd9dSrefNAb8/LcZ626GU9nC1kgl7yH9CYB1hSUQxSvC1TaScvDbVKaF\nW2TyJC+0PAHheC0qZyHLEMtvii/kJrsJt4MB/9zRPsLb2RsUxHkV6lT1mmBs\n1zakTUkwDG7mHlewBxuXWc4l6LlgcXYxatay6K1f4k3WIE7TOms1fwxfuf3L\nJPLZzS4nLv1FJMjZ3mDJPjEm7Nt+z8mWQ/rkNDHZQ3B8XWWgQVqSr7WnSgeF\nWKzzI2EkPYz6A8Nl2K2P+YHxkPly01773op3ELEMDn+xl91IILac1s8YCVLk\nD0Dq5eBiIq6pJzVTq7BZkV2uTbvgCYWg8kl0KPunE//y2QNrJOdRKxHB0iv2\nmWOYV8gYeVHuNquUHlXnnQaQ23F4POs8LgG9iA47cGq3Pcje3+jeSP4XRwFB\nQhXROaItqtTfTeR6ZekZlXLNGRFd6jK137Ch3X8LqlsUvT5whctUDPF1CDsl\nyWpTejCHGJjbjK8SXhsaoOzp+ruQHyFd3Vy++Ct3GsfuVu9retTin4GBhMwB\nxo9isldw4onX0BwkkIhroGF/KfxPROJmmsiVuvEfwhMboDTbrMsJEyBd4N3j\nwKeM\r\n=67tP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"394cc916377ea71bfce7f3d9fc1e4c9f154f02bd","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.2","@storybook/components":"5.1.0-alpha.2","@storybook/core-events":"5.1.0-alpha.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.2_1552041608562_0.5018832607532187","host":"s3://npm-registry-packages"}},"4.1.14":{"name":"@storybook/addon-knobs","version":"4.1.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.14","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"48bc37f58707cb00960a501f24f702c993f17ad8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.14.tgz","fileCount":66,"integrity":"sha512-ScMi3iZxdOYMzVv7jMUqfgyPBWYwkSW4OLrVFIr5/EPP9mAOwnlYz+tI/8zM6w7/cvdEPY2pCilKt2zhzEMQ9w==","signatures":[{"sig":"MEYCIQDI4wvmKutAozIlqiKVvMY+/63K9McnlwJfJtXwWfz0DwIhAOMjNQg8qLwl7vwsyyaqf8d2NqmhxnaUHPi34URxKNmM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1283010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgod7CRA9TVsSAnZWagAA0jgQAJ9X66EKxxJVfeaq17q5\nIWdtiQDnKwT24Xibxn+LhkIs9DRxjZs3R3YX6elOv50jT0dwDDutfFgwcDA1\nPWoI92fiOCtPqN8CJiEi4q7l8gi2K71WNwQKDMlH1v9KwHY5VhS+36WqdieB\nEZHNFUmsglThAPxW6eVEMULHoWi6NOqlov3UZsyMFzbyMOj+XnpEscZtBvm4\nCU6N9vTlUJ6NMCQouRML7y7la/xFKGH53240cUG1mvBC3VzxlR0PnRcKFNY2\nSEKIPC9/jfUWIABixW9ogCVM7mJGY+pwaLOvWsSaUzFoylXbA9CrHikX/h1j\nIqR2lrK9rkHJaYMkJi4icrDzPO0IYP6Pp8A1+MyoepNwEPQ4FHwbsceMukdL\nFdKansUdgHc6f9wjLgIyGlN+dSzqhtY/CNCtcOGtM1h5XfwFfMIx1PGrEY4P\nTxX7bNxMFegebTJftBOUJ2B6xmuJ1Cq9hWAHCZt2imt+MpE8MbSpeo3LgeMV\nP4Xfm26R0dCdxWU4/uLoa1io5r94qJdxSNxNXqBCmhGJqYFYW/EVKypHn+wd\nf+SOCP4NmTj3bQQ95x66M+A7pqun+Lhx2OIHK1eVGejFs4kFIvYZYFxMo37p\nO8uN1jIhk5oMDjxOiXOjTSsLOFtMTzZR8pafhEJ4sCo0jQKJAtCIjQowdMMx\ntDbA\r\n=02wu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"7832101492d80cf343d0e3c2d5a062f96eb3f2ea","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","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.14","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.14","@storybook/core-events":"4.1.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.14_1552058234035_0.04655942465849128","host":"s3://npm-registry-packages"}},"5.0.1":{"name":"@storybook/addon-knobs","version":"5.0.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c7a3449691d07485d3e31681db47655749ccaa16","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.1.tgz","fileCount":74,"integrity":"sha512-ELEjUF9n8aSMkszBzik6PpGgYp5eOPROeXaW815gZqFuZlu8MaYTkCSDbx2obQc8YsGSJ5G4Vbupmtg7IuQR1Q==","signatures":[{"sig":"MEQCIFohB442rsIbPdjtLiCgI6MznMRRCpg/asF6MS3fkgf7AiAaTpHzZAqLJMLtEyw9i78UtsIydFS9XlXImSN0f9jwsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1311533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgpfxCRA9TVsSAnZWagAAVz8P/0SDGORNfJUjdpGgAAfg\nozdqX9W8PiEzaIx8XDrHX0EMj9w5ar1NQZ2KmyFc4ybjSSBbkpcIek0SB//t\ngQ1+OAl2X2bTVL31LYM6D8moVG5B53majNjuLdUcRjnWldD9XdkKgeqyvxRh\nIciQ7oVNgHVumF+SaxMQz/npzjR1UZT7LkLSKWLFIXfuN0Ke3X+7vlOMUPMV\nw1zBfvSnH1FmNyjNFQlMmalQ3q1NjRsPqgWKWb8tX1xtc9caJt6crH4mfRIq\n7R23mOsK0YgkyJ38l3BENbKsxkdBe2WMbx33ChbI9Zd9L9B1zWreYCu3JYsc\n/x2C8ykhIMeulS8vwAOnAs7OcXuPRkmHec3tzg2FlSZrnCs+EZPp/d5JcV0d\nn/ybWyu/RE32vOmL6ZrA48ckOzU0ddudR6USwv1qUISxql2YtC5BnGbqRH6w\ngZ5VXWLaDj+qkogPvOOgjYv2jrI+VYP3FnYZxcu2RvyylupwluW47ib9v0V4\nA5KCvSnAZE+C11jSw8dEGP3BPe5W8a1k5EHrgD7NiH4IYEdIjgFNb9M7qqTC\nCt9MWfMMC0l7q66f2ITr+6SSJAtx27XuxyGzy7BMPd4goy2e/QLebWdTmNh+\n6D4qyV+OdZHdh6bs88hPxntwmtW6t1QpWtDV7CG8Zd9EUu6hAcDwbppfaynX\nZwJl\r\n=7RDs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"ae7a4cf0720cb9d528163f9411ade78aa379708a","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.0.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.1","@storybook/components":"5.0.1","@storybook/core-events":"5.0.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.1_1552062449070_0.13040496007130908","host":"s3://npm-registry-packages"}},"5.1.0-alpha.3":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"cca5968d35abd2726e96ce8bff04cb5226a6aa50","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.3.tgz","fileCount":74,"integrity":"sha512-dpyqMrkvTBIxDZG4bdrgAmWJ3DpmO3nCmDBZ890nnS49piuQMtsAyyZ2GyTUNeOy0NiA8BMqdSilOwPfjKiC7g==","signatures":[{"sig":"MEUCIQCRA3Gg7R6tdo0xpN+vuAL8a9qZDRbIvEsEJ5OBxA9IjwIgJYZnTGj9rpN+0mAKq79iJpChNxwthYqBot2fzgwx7qo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1311988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcg9vICRA9TVsSAnZWagAAaIgP/0LggGiKt7SZOmTZm7sy\nOMLcOSwRzg7Vusyk8w5scUswCBkA4+rUnqBdnFiYRNmkjlu5zvMES5bYumIX\nPmpiqS1eypLHUOzIFzbLurhH2WnGYdbx7AqUusbqxL1MiyrqA939fr+BnBOQ\ni4MJNYdVeTB2pVm1QcggGMT5HQq5xO0twg6wxa98rH4E031nDUlklmfJnGz4\nOhYoXRJpT2iofP64UgaPuUMwmsHehWA69HtIid1rpcBKjtGADR9cmllvFIHy\nh/dzMpjAUcBBND44Q/dhNqeTQXhKZWj/Q6tMUd8Lvw/yMla0oam6mTBKxnFF\nVXXLdhEaMbLHIfu+E0wrN3Rvw/DqxDESgNxtzbrxcXedXxqujBi0/Lh3hzhO\nNr511e36GPwDH91Z2esZjhAsp79F0Ic7d0JlYYR7QLqtz5aU+FktxSO8C/kd\nErb/V2m26PbVaTtrdlyx1+cEq9pSql2R/uGCwKJxLULHl0MpyNYeZhEf8Vg9\n6jNxTiG5ZlyVw0JNO3luRYVtZcE2taV/dU15ME0MkKbU8Cts9R4OGaMcK3S6\nsVr7SdcjEoQ283mSfczE/A8KA+RA4nYAj+O+oKV96Ay4SNP9QIhT6RFdGfA2\njUPc0pKmGqv5bc9mf16HfWutiQlsmKV3nHXInFd58k2UOxJ96DygKbdypXei\nk71G\r\n=Qm8z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"978caa74502fd06c825dc78d6ad984e3bca79ff6","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.3","@storybook/components":"5.1.0-alpha.3","@storybook/core-events":"5.1.0-alpha.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.3_1552145351863_0.11265919472933983","host":"s3://npm-registry-packages"}},"5.1.0-alpha.4":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2e10c12e28cdac7149f62f2c0b697068cbe5010e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.4.tgz","fileCount":74,"integrity":"sha512-+jpXB8kbjnaB4tOxjpEYGh+Na/9kpyRgXiSd56Vsgx/oqhFluaHMk0gplASqguNWIR53xxlPSXEnIeHD4dtYeQ==","signatures":[{"sig":"MEUCIGta9YG5OCIM44HieMatKW3j0S0uHMqY3mJj0umTrO0sAiEA8bySnmEcliLroistPeTDlYyIphoBFvLiuPvfnoUEBho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1311988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchnHTCRA9TVsSAnZWagAAl54QAJ3iZaeAjDuKCRw8j+np\nOLOyXgHGXuIMUxp64hqK4FVVE8wKDM37R93lHCGRV3ex95qnHwKpDtVsKEmW\nNcVHf0dBiSRhcChe9K7g54v6y6/Yxku8ECQGtiTbdc2bNo/4WBtlLEdXP5pX\nOEhlPM8KWp7Wyjw0OjJlhn/SK0KIqmSRrZ7KjXUsdOL5R0gsFlzX2bcq5Hhh\nTp/K1LvyV2P37Q0vNW4LVPeEnh5b7PvPW/47F1ruavRIYlZ2pH7hQHT3/0y+\ngNg3dJ6TomnIJ6UxkN4af1BqmkmLDQZxAVeCd88x14+7qxCKiTchXSL34hbe\n1l+FvAlkzePtqSOFeqJolYbHX0STJJ75vF5OItuLkjXhvmkKbl0jnnIkYTmt\nq3+1lcrP5eqePGZX6xDm2X7ucWWSaxMAVXBQS118IagtFuohzrENXyZYgAoZ\nNXJEuWbQaDKcPJFI4oRccT7mxtrJ8NL6FTRiZAuJaMf5EFkWercTajkZq2Jc\nQ9oPF06nXCXstK8tOuCkd61M/w+7TUmFTExSODqjQ+cdD14cttbXa4d1TZK2\noHEjlbK1Iio04fIOpglrKqw4wAPdg51YD53ouesAN3vwkD2dgmDQsSYtua51\njfZNmZCHtlmQTcrDrG2M9m6DCYjmfvdi5SZriJtFDDKGwX0FkuWNUC9rpCgG\ndMM9\r\n=bWrD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"aab869c4d8665b2be3ee99ded272ee2f68825fe8","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.4","@storybook/components":"5.1.0-alpha.4","@storybook/core-events":"5.1.0-alpha.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.4_1552314834884_0.020501198916551777","host":"s3://npm-registry-packages"}},"5.1.0-alpha.5":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"b40e67222af73055d4e79df80b1add7a10edb1ca","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.5.tgz","fileCount":74,"integrity":"sha512-xfQzLwH81/99WoQS0aV5xLMVAKxQAFJGaHltYjKL4NojN74AINcDbenhedrL44JDJHOL53hw0sUbTI2krNOs3A==","signatures":[{"sig":"MEQCIE88jOfn/0bD7zl++gJVb6ZDGQY/wdMm84eoxdmDwEZFAiB0Gnbe3ogZbQbMqPs2MSdzaO7tjgNrB6NCtBdVF4UZSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1312041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciCS4CRA9TVsSAnZWagAAfBoP/RCaKnSUryNo+01/+Nbg\nFomP5okGcL/bZzuwFdYE5/vKden2njXMeeIEAVpLaj30kZpVtIoGgB73G1b3\nG0DnuREjcgRXBMYLyPKE4l1dJ8TUxVeTn9g/KU9SGXhNONBGSVQDdU/0EZ3c\nRjUgrpvFarmFfZCEYNiun6e1MJsgIjk2cXABFTtwi5GbDG4AH7AA5snyQPyr\nB7zNpgJS9WHnCOu3g4O+bfeJ1+ofgSilLZtG1lbXIIUw4jxRn6ZAKTYYnyoS\n5KjOHNHRZ4waOb4OOIu7z2ceZR2IHilM0ajUXN/LoTzdjkdycSO13uznhLYc\nb9w4lweouGHc4OdY7IvYYa12L1RAbWTF5H488xLVC+bSGkK6y5Ve2zWd/ep4\nZndesiuUN2lvG5YfbSc2lw/rVQTMKybnlMmzD8cKfpuvzoZHNe5ePvgVEQWk\nsuynuJc9u9z+4c0PfFIcy1ElIXlcF9Qks/hATR0xjo+GliesqQ4IJhU2RXy/\nia+n3iVs0VkEYIx+ssCCxJw3mGkiQ5JBtgaEeWbw6/6X7NSf74sqYd/rYKI7\nc3TUtNQhy7eqgNTkYwBYjj06imE2JFvTpStcjqWKF8ZIzN9S/ElhV11yMWO6\ntlkF7LLmFq5C/8KcM81hiNNdc7S/6+bORO0g7Gu0ghd6icFY1gQJIpbirVy5\nzcav\r\n=prlj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"81f7d94fc5e6f9487eb61f7b75e5fc4ae8f9b0fe","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.5","@storybook/components":"5.1.0-alpha.5","@storybook/core-events":"5.1.0-alpha.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.5_1552426168280_0.34626611073498204","host":"s3://npm-registry-packages"}},"5.1.0-alpha.6":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"fbde9d67423e2661cb2fa5cd56668c0e07d42b4c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.6.tgz","fileCount":74,"integrity":"sha512-WnAiDdH7qbAxvQj/E6L/d0TdGBy6c1UnWszNiOZm4r8gAst6LveAtu9rr3/VEXR/Xfld5fq331SklJsF/vpprQ==","signatures":[{"sig":"MEUCIQCKl9KeDyzRhmSwcnnKv2l2ZSYmxK/gVeQvrS/NMHgOkAIgXYY0vH/+zJyfl5hlKIXayuLjiRYhRlSMmpGfGZM+Vvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1312041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciaeKCRA9TVsSAnZWagAAs+cQAJgMIZRyd31mWhSxq7R4\nTq82AvQ/26Z1dbPp+xMSK6suNro6U3tkYsD2KLyRoCjL7HlF2KzrACW+Wyj6\nuOSMlSFHTSsJbHfoX07Zn+kpzFTyr432/e3uXur+stzebNG+LruHEkNqOvYo\nmv+N2t39g9XJJWrAbB6dcAD9vLlY8UeDDBELJUBePHyEW4yGPVfhVHfFydT4\n7Kso0fknVBlEVAvzkgU+dLslXjKCA/9waDxyGA65ZaYJvaCtGF3TQAqpMgHS\nl3lQNcoD5BWAZSTjzp74rR3OlC2Mfw/4HhMITXJEvD0/vfZOsli2YsuV3HvZ\nmZHPpBNuqrh+ZNfoRDLXBJdJt1tk3mx4MO7ycYLJXoNmafNhyeOOk/a+Yb0R\nnMFkHA4CtNEGi3CvrIyn4ht+4u3PjD7uJQ0WyCzK1i8OslZ+056yzrt/z1yX\nz/t+eTez1vCfApfOgzyzYhuvuUTUd1rvG8DhageaQl6KCL4LEMmN76elVhfD\n6aEjsv0PWPWQ4v0yM0fl5rZW7wvdALx1m5j9hIA8rdDJ52RFNVB4gx42gyeG\n/nMrwkepn583AHjfKm4V5PEXtJ0p/YEfhHfKB2E0YLyJaDr55EBUD9n4oQha\nGmbPaVzU/UWi2u1IEokXu7YcgZAdWs8VtkL8XZ9al9t78cQHdr9A+AhIWxP8\nwVcz\r\n=4MPE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"daccff8919b470879539a45de09f22168f666230","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.6","@storybook/components":"5.1.0-alpha.6","@storybook/core-events":"5.1.0-alpha.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.6_1552525193952_0.2935401246551108","host":"s3://npm-registry-packages"}},"5.1.0-alpha.7":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"30d28ff9fba02768c010ff355cbcde3cc5df9bf3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.7.tgz","fileCount":74,"integrity":"sha512-A+6JeKstyDabiVujzvR7gD3Q8KyIp0/lG3IlhvMfaPYCVyc0ilMFeaGdhSh+5MXkBGfdVwX1qDch9fDkg0kn3Q==","signatures":[{"sig":"MEQCIC+OLLlElJNC94mLQof/5JYOMFrXVASGdOjo06LPXQvlAiBCUYwqUb82y224O2PM/2tjWCL/dMZdpkGdKKT5eXRgqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1312041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjKM7CRA9TVsSAnZWagAA+20P/1GTWdAZvNmorWA8VE0O\ny3t9S5f5nAwoleC7Uagks2niWoOIrNp+YoVWge5fIUGj/Rg1fbG/bTGoqaxp\ncUna0tiwQ+oqOL1pBZe0cGigb8O7xTDhQDVUMq9X2aALN6wUrmTlGLl1Na8t\nv26kXrixRRGR+4IOZoFTDDMz8acb83lU9mXPzfULpm5POiykJiAn+2G04qIk\noGkoSF1XbGV1p1YClTZY+FjIR1vloo/kyFqP+qYp5cupZxzvQsABiGj6bFqa\nn3z/LMuJPq03EOWTuGR2SFBMrsfSu7MBla68I8kTF4N8qe9TOns1kw5kw0J4\nSH20/19o+2YOB+NOVTq8S2A/+BzHlDNv7lklM0eJ4n1U7cnB17ZeSrJ+GNFw\np7bNTKl+eQKp48wD+neRK47HlKtk7NQzQ+GdUGRbqqDr8vmGz+zenQp7/YLX\nvPbDPh6XqvDSNRB4k45UwyBAhA/pTPkO5thVyXAWtxrrbwqr0zBAfl59niZR\nzsSG0M8JN3AJcwkIg7xuewS8wzCi1Zbam1PfsFsYAD3bSq2BzDEeZcKxvlRo\nfMiv0KYdTGjVw+XX7aQ/No7LMNYgbcU9+fxGlC8tWoxnvLuXngPw4d9p3iVY\nW5CjoG9B3ELuxvyEskcyAHMTeXfObSFs8CsdY86hJR6pdeySTArctbpfaJZD\nvpqd\r\n=IAaE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"76e5df9ace362e3d6b8b8198c03aaa2b0db3d48f","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.7","@storybook/components":"5.1.0-alpha.7","@storybook/core-events":"5.1.0-alpha.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.7_1552720698454_0.48395762282392774","host":"s3://npm-registry-packages"}},"5.0.2":{"name":"@storybook/addon-knobs","version":"5.0.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9a7c206004c0bc56600ac48622db2ee600dd4bc6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.2.tgz","fileCount":74,"integrity":"sha512-oKtLtgqWVP21JOS+a2uVnWOnqV4U4nUlH9H38I3t0vgqntKe/Vp1cZoWDgeQRduZiMWdrWgHpGtZJCLI0V4qlA==","signatures":[{"sig":"MEUCIQCu0dlhSTA+PCsWIZ/2DUe+hsHHjuqDOQ7vSWgjN3CNoQIge56132GBXwhcoM169YKOGukXbFLpJRofKQ+RmpR+AsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1311567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjdVGCRA9TVsSAnZWagAASuIP/RRsjgCt1iHbKNO4C3Kk\nTtblqEkmbhGDY0s1IiJG/IKQC2ghgkh+fQEKdbq/JLjE9pWL9u+AtSYHNv2a\nSq5HUScpQAwZibo7Y4BUF0ff3QXme0YTC8IEvwwjggkSpSGvrVsPex/EG5DB\nN/ghVfAn6LDCzyVFz3zehgWd/kJKBRtT2pFsz4l4uZOAi+ajncUi1cxajT4U\nquQ1YodK4LREWtWTp7ifZ/ExtTsp5soRrGiiaUqxgomQPn41p3+3F3v9ud2n\nlAyO3bmXtoRDmo28ydMTkyeZwDiFQw3wB2PQTqApoYe1fWISGSkStvbm+9A2\nCvJqTiuabra3jMSNzrI1rVvbpjQ34N2+UoUqL85Ao3CU3Lb+ZOE8Oqr7oPyb\nnfXW/5xOyDmYS7QMvn0Yrj6xXR5KaALLVD/CuzxypKyTkCwlmf7LTxKGuWXX\n8IUu7MCbSIBHrrrHsoQHBzwNtndOItmO/Q7x/8fOEgJVazbxBRtF3eoov/K1\nNe9RIrAahrgKNvDQDqPCflBEAm8cf2CB9QeSAf4i825ot+nm8bZ2agcBVLBT\nLal6Qs55qXJIs8J4PE+QExCP2YkCoTFlo6h5rbgGXpUzulB7G13OaRznnB0q\nKY6t6VUA3hQO5dVNumw4NKGLXDUCSWDElc9/UEBbQcELBckji1+8mVbdHRI9\n3PIG\r\n=z6Y9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"b23f97ef2c32079cffdb9109f8923eb654f4efb6","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.0.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.2","@storybook/components":"5.0.2","@storybook/core-events":"5.0.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.2_1552799045896_0.01630361242831513","host":"s3://npm-registry-packages"}},"5.1.0-alpha.8":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3b39a1e7d9cb4feafe1bf1258d8edfb32b06dba0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.8.tgz","fileCount":74,"integrity":"sha512-yDG9b+VxshaKKMwOju+y2Nzc2Vzhdcoc9/n/vb4+D/yPNs75tWqsQ7lpVQUYmf+UhS9C+SkulTzpXRp7iQD36A==","signatures":[{"sig":"MEUCIQDpD93yXypa3Tbfn7qFFfs3fXn/4g64iYCAtE9zjBOYzgIgRAmjTJ4Awg61nFgHY5Mj/fi6y+oH94dXCEWJ4BD3DWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1312808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjmiBCRA9TVsSAnZWagAAjHUP/iXVLH1o2IcI2JHZhXJq\nEYPVwN2Ug5v2mrS2A4DKp9y0p2DBF3MicJG3fTtKrb80QMu7/R2YFky5Ih44\nMYOzK3fM6WZmCU8yJUP3V3aVT+PlrEbgCZz1T2PkVsk9Bvd/nNgp666hrv2h\n+ItLsDlaC4o2B25zvZKPtD2YadUYBAxSj/o26O2+nH1fikCBwiwMdh3UX3at\nLinOU1iJrd7gxfpXiFzTLmzFkE/gnLNUlDsfjDJZ8CaG7LiMAQe/frvSvVjo\nukgvsKb0JWIexFcfJs9QupuRGvC47/aEq0KKSP5JNIUgvtyqciw8ZEmn3Ehz\nBvwGYGJQ/auCNPVevR7zJpIt9mLNNCe+v3HLP1nzjC5QHoQYbOGjKORlaJPg\n16orRQqZHL7ZWYPfmB4BGlaxb5mvM4gxjRa3NZNcNO/ZGqdleXTElGV0Sn0n\n+/dZX4H4TlRMhRtp1vjjEbaq6JAZ1Ywgvee/nGPk7secH9P+dUcQNnpv9rO8\ncbrD+y76i6ETHz6rXzmVMTBzWg0GB+fKCmAjinBZFRxEipdx6Y9p1vZDsZ/K\nmOknozo+HSRgn4RBLitZR1TIOQbbSmw/CIZvu6r5BLzBBjfQpReZw1xMQ5iY\nC0aXlcX1Jg/szFfd2HhW5s7M7OIGzLWmH3BugmzL1spkafhStVK9triYkip+\nYa/C\r\n=VpHD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"eb9be1fdc49a2e80a744aea9b54437a2148e33db","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.8","@storybook/components":"5.1.0-alpha.8","@storybook/core-events":"5.1.0-alpha.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.8_1552836736373_0.8312965520779056","host":"s3://npm-registry-packages"}},"5.1.0-alpha.9":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"4247c5888c35ca4a67abb481c4ff693a91f8bcfa","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.9.tgz","fileCount":74,"integrity":"sha512-xNr6vZ1Bk2HfEHqoATy+GuqyPMqGepz8Iu50/2d+rOb+JoCsmUFMd8hU/zgS+kn8cKpledtOT94poSVMnKUx4g==","signatures":[{"sig":"MEYCIQCuBqvQUpzuFaZAwp6BWM28RgMrt3QPLjijf2eklZby1wIhAOBE+9XE16cl3Jq+93PNSQLAj65ospm2Vw+i+54eE33z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1312808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcj2XpCRA9TVsSAnZWagAAsMcP/RY10A+u6C9k42qJ7OiL\nn1IELqej4yhFuTHvELU9RaNMSQ9vFy0ru+JpGS+qb89HLY++YqQXXe0N4oid\nty2j6wCxighrHzdJGHMjAtGmFsqmMtK6pOAaOHFCm1acAwKxs9JDbCKWLZ6T\nVSDFoF4odAX3yQEGryboNaepjdrdd1+N3L/3AlfNGY+/s9vccVsPSe6pEqs7\noI48ez+OF8h88aZtbrgaNub9yUxpeOs0cQOIioCXH5noCH6XbVf52x1Jy9Js\nb3Mbe6p863FOz6KCJ2Giyos0TPybY6qfj6HH5+ik6n/pRLYsu202vmAADEUZ\nF5m4Zl7kD8A88R4gTsGuC++ckdgsZfcfxvpZBExXgWJxA00KYh+89WWnz0/x\ni4hV218TQHDwMaN9OdUfpYCWso++El/o+fBUVTDE7PJ8NALAPVTsdi8MwVbx\nX5fnjUShI0lV4DbIDfJJhhy8yFSLT2zzyszmhcLT3EIAycn/oLoUsxDEiNPn\ndsc1gkuoCM2RajM9XQn5MQx38udw//eIQE4jqi4bcU2ecIVQJWJpwOL6e2O5\nTqalPG//uA5KDx9YR3wO4IEQYonqwLlR/zY1eja3vrMXyevK4v6WZG9uWEcw\nTf2d5N5NtO3xaEGLOhcbW66MbhRWeTD6ThHlBrSXTbQzAS7YPf8JMsjP8kIi\njkPP\r\n=pBWe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"b51a247295aca9ae33eb98b41cd52abc6f77d844","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.9","@storybook/components":"5.1.0-alpha.9","@storybook/core-events":"5.1.0-alpha.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.9_1552901609283_0.36734298789130726","host":"s3://npm-registry-packages"}},"5.0.3":{"name":"@storybook/addon-knobs","version":"5.0.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0d5877189dfe773493f4daeb1c39fa19c6927bd3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.3.tgz","fileCount":74,"integrity":"sha512-FX1dhdmqr0H2h3oMK3cIWfeQtVbLnTrDNYD6ommRWZYSYA9hU7Acj1u+9/IDK609EIgS10pBQYVeWwn0SRCnOA==","signatures":[{"sig":"MEQCIA5DhG0Kz5evjSVm/r3xdhuGsjUYjsGKe1JJ7uAI05NfAiBAFntRqV22mlikA+oVU9dd9BCYgJMoyV0GTVisnSZ+dA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1311567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcj3zuCRA9TVsSAnZWagAAynYP/i41Vv/ZW4BjIku4a8DJ\niOx3PnH7zrL1N/RRNynvbuxbfmsW/hOx5Xnp2iD5Dr4BCC/fn87QlhdWRuK2\nFosC0rjZnBaHYokeI3JdV/T3wjjqI1yG6P4Y7Y0LHo1DINOU1scAdGS64HrO\nYBU1wqYKox/lHld42JBfe+k/BwIjFWgBm+p8AD0K03r8kJ/rR3HwPp1dr9vK\n4INw0My+0OIvsxgc/OvQeIt5Hbd26DqvRKc+hNHj23NQ8edevbBHem3rnAnu\nxwpI2tpHpWE/FF6jJvX8uMHlw7OSkLTDKSByRsgXQMhU1/vWEX85LOaP4Szq\nAKi5WjLmvCmG+H1GBIR/3t0aqsjqOAPvuXVf/mMuL7Zzo5zQ3BXg2hhYoU+d\nMSqtDaezsKMyaAGkS9c0pbYU2N8G7bsh8vYWfhMf0yoP6d4PYzoj1CMZY7k3\np3P4cO+cucjc/tF4ZF+hHZYyWSsOMTUnTyjcfne8Y+b6ifgAjJBF9Jp2hFqB\n53+0PJpIvFEvKbPg0nhYqTFPKRPqs+JQPJWnbiWupbnK0208bcfJJThAk9Js\nyRx3boO7rD/CIpIBMpP0Qtq6IpGRbBodBhDP4y+I2V0c9GcKTRQfCMwXnJAb\ndD40EENa2kRTlz/brOHrtPFBDzl8X0DJhS2nkxf9aPwTtbe82O0KDGkb+osP\n8mqf\r\n=67SH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"22ed36243324aaaec6101ec422a661d84d19a59c","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.0.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.3","@storybook/components":"5.0.3","@storybook/core-events":"5.0.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.3_1552907501397_0.2886109752434083","host":"s3://npm-registry-packages"}},"5.1.0-alpha.10":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.10","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0db838da3502157e5b5153c5ee02d4bde151ff12","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.10.tgz","fileCount":74,"integrity":"sha512-BcRwjYa8HHPzsl60LoCvCwRCBgehcZYG+uDPEKVYoOUdSD6SUWwzFBMjU1NdM+NabsItc6QqK7T7AnkITaEWvg==","signatures":[{"sig":"MEYCIQD1bHnrRclai8CRuxK9yLT/zrlxzj/cIOY6Fjxbo9gGOAIhALiFuPQijW6nKPprd4ebpj6JBbojUaF+m1ljsnjfZ9tJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1313120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckPFXCRA9TVsSAnZWagAA9/oP/0y9FT/jjq/UOFUT3rNY\n+nznNPeLcjUaFEzeSOl1HrTVJxOAweNEYApj+l81xHj9jK0HN+sC2TJUavG8\n+vbmbXA6V0r+AkWJEJC0fhOffnJO4D0vP2/0svdgIee6Xkad1iwJfiolfbtb\nzqTLI7smss9DLOY9qGj04g24iGiy2uUnXQ7MGPlGwT6JdKSnwZLlXeeVa4pc\nzy+/Y+dMw6db38sSGgA6kkWoTe26ymNh7UYD8TUls4FzFMUOVWyfw6QeTSW4\n4G+4+u4+mRZXldiDr9qH5pDZVLMKNzDZ95XfeeskdbniDk6olhVNSJajxXxP\nfAXorhy/HHl8ocKls7pOpZAorByKKgCwF1upH8V0bRXfH3pub+adJ46iVQmG\nBG0q8rTikKMQie/wfNoN9T9JvUA3uhqT5n2m20rMZAW8+D6Q3iVkJRUlDqVh\nyw0tN8XFYVkNZO8HYQbhN1vwBTV/NU1J3d4xUjqI8lQU+90GzFV693VOs2C0\nROuyTj9dL/oF8QPILuVy3yROfeL6DwLzo9essjO1P1MlCK1DQvQDHjRU8ubI\neg1snMAapF1e4gwbaHXYk6bCgHvH9VmOkaZOpPxlNFbFaqr7YVNm7f8yBQrw\nXo9wLflgdAUDsBjWV9LGYO6D8OQW8RdNBUXS/1xZ00iaffprO/SL94EkmE3p\n/CGE\r\n=6lo4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"5cff559d907931e817e715d0a00821993b6bb00c","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.10","@storybook/components":"5.1.0-alpha.10","@storybook/core-events":"5.1.0-alpha.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.10_1553002839251_0.052786924293597215","host":"s3://npm-registry-packages"}},"5.1.0-alpha.11":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.11","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c7f2e8cf7288595444ebd2e53a50c5a415fc9cf5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.11.tgz","fileCount":74,"integrity":"sha512-9CPO07N7a+NYAAzm4MyucSjxnqRRGVcEoLOyxra9/oNqmGi/w7b+coVp9MrApJnT+yc9bnToF/n1eW6iWC0cgA==","signatures":[{"sig":"MEYCIQCf44D35a09g9RtRPFe15Ry1yCOacbIiqp32TxPN+vTNAIhAL7iMEFmw/I29RZZSjIfrCthFmw8H6YjWvgMXJP9qAj1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1313487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckqSKCRA9TVsSAnZWagAACkAP/2UmAg2AsutMs3qD3oTb\nkGoU0ayev+anxhq0ADCKTgrFySkTOA4L8TKzXSJHA1sDHHoOLJXcEb4Do+pK\nJQBY9EO4jtizAQ+EDsyTLkstqxoIgGm63yia1T+HOzX3qnLcgKMZ/Ij1/m4j\nHMoauNDvB2EmrYTJLRbA8Y4yFJdlVM4nyTAuy6RmyZYDXq2kBrH/3o/ZNLkZ\nChR6/X7eoHorTLJk0R+gpcni+u733R4unYuVtM74qTV1bGg4AxwTLVIp4hpX\nOKkY4cJSyP3SW4mVK4W9ghRt4bjNm5pJSCLBNZ7eN9f/jh4r4PGR4oQNOSXi\n+pQ9smcxyVFtv781szQ9fvlFL1O/0eznjLBJWxaQ+XteF3qTihYsY9+eBKql\nrzBelozBqiiCOlSwAm4o9atQQJuXjIuf20nKp7EUtGbsDYRq64DutXc/gFGl\n4g6SIwWXCnOHtru/xOSxybxTUb6soxHisUgaDh+452yJfoNgkaGWkmX2c9KX\nStHFqJlitNx9YP2DzzEoA3usz07xawg/wpE3RanuoCIrmIbRgZs+62EUSJ8c\nbe1wVcFRWtRLH9FiWdB2ncsWpfAiAEGfq+KBGiN2xMGxAUjPLZiA/ju4iw7/\n+4x7mmG7vh3EiwJlGv3QqUXfegmb3dNH2FICHg14YDiwzK+Fdt69vk1is78U\nZFxv\r\n=H/6Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"0a81425e86aaef666146b1e8e7797fd6ba7ef9b1","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.11","@storybook/components":"5.1.0-alpha.11","@storybook/core-events":"5.1.0-alpha.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.11_1553114249756_0.9356421691691899","host":"s3://npm-registry-packages"}},"5.1.0-alpha.12":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.12","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"741acfe29322a0e1c01016c8571d628dc2e4303d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.12.tgz","fileCount":74,"integrity":"sha512-YG58XfOEisqavpAlGIprus8I3z68ktakyt3Q8DRhtyDc9W59yLUxM3E3GRplU/AITTVsBY2hcbi6j6hpQpAd+Q==","signatures":[{"sig":"MEUCIQCgktebWfNIucT1/Aic9HA3jYXa6ZHP/eu+pefMAeqXjgIgSFmxJo4SnkvKBD7PE2xqavb/TqB7vwuh1/2Ly+eXbuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1313987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclGVPCRA9TVsSAnZWagAAY8AQAIr0ZYdFASzt/NCwoHbP\nZ0S4zuQP+joYDVJJPAUA4E7dlWclwaXB40/dEUJgxkZlnM1FTDBsaj8wvp9y\n/un+sOLYl4sP+d6bTmQgHtlUJog1kwz8ILoiGo+LHnCBdnj/bfL9aKDuw3JH\nPesvH4MG/mCyhXYtKFzRwkR//JOWEdNut0b7UleNgJmPqK0gnKS4Az0jPkAJ\nJWB/X/kUJU1BCzQwWE9AWvipO9B6Sb/1CZ6B7nuzF/HeSs53cB190+0T4o96\npbjE6+ZGEC1mupxPCSywKlDQwji/LEGqczvizBNsj7/RHtkeMEnpxXovuMsl\n+H+6Gi2X/cyooI2YBdfCHSKpPNLdgZ1bpLInPSpTENhTGzEEV1dUwDbgKFIN\nU0e4uYAX3kOjeLLhV7ffvejQOCeMhs/LYfhWczlTO4ghDDcaWE4Bt1rm8agr\nCR/Q053MxssdanPWfVYyF1k33MCstexHeN+0CcVUiyDNJVIjddpfvCP/xKEw\ni5bY8lQkWwXPM1iZ7LsDcsjh60Qmghbvs40hfGjef7+7I+FGDzjv7hUQUo3u\n9PoMaLwVDNES5s8dYyrGmNTQqlFcLPhtQPckD70h1XLIQDLU3bS3vKHKgItS\ncaHs2hikpWom1VbCO8uePEe3BJtjci1kO5pbLH4V0sOwmjuN8h/ATm/EUlBX\nAlfh\r\n=YAgj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"2c1fae398f887fdad6bd6e8037f1a6bf96074289","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.12","@storybook/components":"5.1.0-alpha.12","@storybook/core-events":"5.1.0-alpha.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.12_1553229134684_0.9962473351053147","host":"s3://npm-registry-packages"}},"5.1.0-alpha.13":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.13","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"74a86899bc568216dbff3b4db1ca4eba40dad269","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.13.tgz","fileCount":74,"integrity":"sha512-bM6RB0ax7Vd7wp+Zw3w5W3+q543auVOkyJRsSWqdxILra42AVcWgWmE3gyXYKrxiGzirq6W5wkvQRPXsNwGAiA==","signatures":[{"sig":"MEUCIA5VcS7LugKpTHgr2jKE+3QKTSScENsRbUOtBWVmSsCRAiEAqr3BwrfvlI3ku2Sa5+oAa7KYsNU92+289tec17569yE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1314113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclcLLCRA9TVsSAnZWagAAGTkP/A83tPBGNSxs3vQuANxq\ntJS3Bw5tBYTcEOvK1FvqBG5oGYFGykLhKP9jYJySBYsVXA340sPkkE6114Zb\nrxUGD+pF2jGNCKuEmWyp79c1OW0K1PbmYwwZK1xK5d3KdYqCl6aPfIZ19GNN\nc/Jzhcdx6SQC9wNHZXVwfzrSOSgyHBGGl2P++rbiajKstDX93duTKFrmtamH\n4OL7amh+UKjS2pC1+qhxVFtgVf0aB66hdQRN6x8m74yAMA3vB3Ztr65uwILW\n6fDYgQizp/WFkPjzzX/TGlilo2HAFVOpYfZX+5eGGopKDH+s7BIjJqqiLcod\nFUzh183sBHajd4wWeGND+l/t18uXCrlH5cHRak69v3c5N7p6rU6Rid0v2EoY\nMrgOtSRbOZVzsBzBD7GxPt/a9iJmKf0h2q07FFtpFLjaphCdYWSFsUHgMhyQ\nBZ7+IFQ9PSf7yRLObTFqe/erDIuqKeNiPotl67lVOZfwsmlqISKeRfQUilGQ\n2w+UpadniJ9NaTT1yT7vwOAEm9wezO7MK/+bdhibzryQoFQXAAO/htivPh+g\n7PUCotjU+D28snjQF5Gr9xR4KmClYvO9kU1thdiTuUp8QJtmzByrOqFUtvAk\n2oYy8Z/d2LOYcS28jp37AxaoqPRY2o/ujSF7WUHJEjywhnw8Zp4+XuTXbKrq\nFlyh\r\n=+god\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"15871945e228a6b15bcd553f8b97d9a3a1997233","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.13","@storybook/components":"5.1.0-alpha.13","@storybook/core-events":"5.1.0-alpha.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.13_1553318602326_0.4118461663292312","host":"s3://npm-registry-packages"}},"4.1.16":{"name":"@storybook/addon-knobs","version":"4.1.16","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.16","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9308169ff6b03562c7e7a836244a8c826c9abc05","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.16.tgz","fileCount":66,"integrity":"sha512-3sMFOrRKTvjoBdFT6UEEsd4gGvItuopUWwNHoaSBTCGzIX2+YDs2vvsVXdhB80IYtkiiCKVTl2micNWep+fQ9A==","signatures":[{"sig":"MEYCIQCgDZ4Mf9v6vhbLiTirYQ3Rc2Z1CcdzDuLpuaeRJsQRTQIhAJ/74I/VwveRQOv3gsDezTg2f//Va1Se3EmYpPp8dzpp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1283010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclzJMCRA9TVsSAnZWagAA5gEP/AoYUm+/EgEoyI1DYxU3\nU68IYNzznOughH90gHFFAQD4+0Sel04TPl72OlvlyobVusTyLhidA6IdP4Uy\nkYOmbMKdVkQjdhmtWAKUQBnY/AdzpUF7WhxKw+c3msdRiSpP4bwOT68GVipz\n/gcr+Uz+TLmacKgym9QOfeQLa1xZtCMBVaPzZEQAnpFzzd0A3ZO8KlBD/Aaw\nA2RWVnD2EE3WTtR4a3L/N3Mer2EEfhLPUE3J1BkjkKyEV3VshP+R8CEQf7vl\nO2cCpzWWZjCAxe2X3hSq3lJLXbQ3g3iiu8eQG4odIpU3RKN4hY2AMwNnuw8H\niwEEVKfMwhd6dU2DA9Mafjb552ZcYVyDmXvrIuk/WsjJejLt+IYSIsLpP7oD\ns995GQMjtDvW4zrQHP3O+Z3Cyczg6SmvqXgFIsjDkgQQEQVOye3KUYJc9U45\nwR3ZKB35/oFlYhnsYd9B5q7EEvt1gzRymhV0bDZOs6Vv1zQk1XH7StYVMq8q\nxYh6yr/laSCaas7zw7jrj/hctUyyArX1vZFGMO5ZhE4rACo7Z0KmNGORoS+n\ngljD1l3u+UM02bWzLFUwzTDKVSjEvoZzyMyx9+LEsBPO3D9Q/X4r9R15yr2u\nL/aPXvoxPj6kBDHGiqPLKlgQKICiXeLpye+qJO7WFxJtc5+3EsQiFegXeOw6\nMeI3\r\n=nu4b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"58f39274ad8e12a8dc1621d42849d862b7e31586","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","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.16","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.16","@storybook/core-events":"4.1.16","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.16_1553412683068_0.11526684858151448","host":"s3://npm-registry-packages"}},"5.0.4":{"name":"@storybook/addon-knobs","version":"5.0.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"cba458ff6da9c6bedb2196251ddd7800ab2dc973","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.4.tgz","fileCount":74,"integrity":"sha512-CYBt7WofWtvWrPAbApwTW/70+/QnUomBCMcW484Su+ALfIKmB/Kv0HUBZxMk1bkb77r8MN9aXEEaICg205yP0g==","signatures":[{"sig":"MEUCIQCxsUWuLJv8D29Ak/wdG9kceEGCwSUyNmU1T4JiYNC/NAIgch5+Y3XaMyaz6LeCZLggnkc+fxRt8UkX7j64Eh78wYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1312060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclzt2CRA9TVsSAnZWagAAV60P/2Ifo+BqpzQGaWkAhE0O\nrrrNfSKSgDscIPcS6iAx9A3cUQ8JleAFEuTux24NZZ6GTc687oMYpJJTY0C3\n3skaVwLmRMyhb8N91fZlvfA971+/rBn++U/3J6NHhS0NkL6gpamrOAmgyB90\nO+2VBgm1JPfVmfcx0rT+H3WZO+sXfjBDgkZislZ8ZtnmxsokKK/dyjf11+zu\njJAe4isN/t9wJh3yPtLI/HicVerxMQAqZIFJJmtY2m02M7u/r/ZmoBzxEf/2\njG9mmdb8q6MVJycsWuDHZuw+Zlvk80R5GcIMG5IwEo+Hyq8qXicmeTBakFtT\n+xl1o75o9b2Q3u0Oe/mWQPd1HIAdtRdbH/GgE0xvbs5P398c6S0cqqiXbztF\nFpJ774GyBROehTAVXDYXDheRbrcXm5PoakXhT/eSaYplrkphm82RIVdX2/uB\nzrvb5uWNMC43vt/YDXIp2BuUGgw//cWKkf9HoAtum5PzM2ecFvrytVHxfHNi\nSSh2+690ngoBuOR2I7oyu+sWxiThMG190g+dheENCThX/KsgpSJ2PNUqtLOK\nLU2E9i1SGtTLo9CDVxqYwvewtveA12mRutmFlLrpPKzac9uIWBnn9JNeav/e\nIPXsvyINnSOHJjkIH5fhRpoSb83qdFcNFNued0wCcLJOENXXYeEixCI14TJG\nFRez\r\n=22KF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"7e70c5f06fc1f8d4e533c7e66f7222fc6e7285ac","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.0.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.4","@storybook/components":"5.0.4","@storybook/core-events":"5.0.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.4_1553415029682_0.15481915130514423","host":"s3://npm-registry-packages"}},"3.4.12":{"name":"@storybook/addon-knobs","version":"3.4.12","license":"MIT","_id":"@storybook/addon-knobs@3.4.12","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook#readme","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"32fb48e15648f58870450d9699fa80cf6d7a0f47","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.4.12.tgz","fileCount":75,"integrity":"sha512-ZDC0ceuVJoXJj9Ef1qg7L8xZycF1pl5VwvE6ETC1htahPRI7AtC4//NGCuuU+fr4Fp8wVlG1cRw6oN/DowdMUg==","signatures":[{"sig":"MEYCIQCdeeMZQz69nsxR45sIJc2JIEhrg3nwSX4fjRN7Svu0fwIhAPdpP+FJo+ydXBxwGcs1PavWaD553zZCK4MQu38dlRPF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcl31cCRA9TVsSAnZWagAAlJIQAJ1wt5+a9rICoeQrvw5R\nKaecONLGNMPz5s/9ZtHuIHL1oO0bbgULlGaIwS4hYZMzmfAYmhO7+FHYwRY7\n6CO7WJU0n9AGhraPYySxZ8ecxWHD50V559X2KWo3LkQDqt+iQ0CghHSV3tFu\ntcSEOh1zO7IMQwe0kGNLDWOTcUGAh6N11xrl5CyTe3lU5WZDYbfg7qnyuq2+\nu6nH/9Jgbax4uY1ZCJmpxL46zsBOiOus03cPCmensx8PfODgjB062uZ/UfkX\nYM2hN/rZ/+vKtuurEiCemGJt3XfHD1lS3RUoKZibBKhvT2oXXBtxEsH6/zk6\nxYRDmThMsUcAopPhicdGQwOi6TVWYxbn3wuxfEaHcl5sqVIKLMokIWMVeu1i\n57o77jDTD2Rt6tZ8Aqen6sDaFLFWrZWRHZfr1m8kusTcs/cgHuLxBOtYk8io\n8vcxwONi+jSnVwGcbJKbUB2kc9qTSUAYRw1CtW3wehm6kQ1FJ0d9tXQF9/oD\nFMukqbSqvcScsCCoCTEqnsLSQhheA4OHkkWej3K4Yfke34anZhPkRpv5ptw2\nsZWO5J4mgzyXgLm0qLdYF7qX6EY49B+iSezbqaXdAvLtrGL4S6AjowWaC0JV\nI2yXNrgCUYI1MsaxM5FSUJyIVva9v1qnjpfvQ18HkRCtfjrNukVczDugfebG\nTUz/\r\n=T1ev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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"},"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","_nodeVersion":"8.11.2","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.12","react-textarea-autosize":"^5.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.5.16"},"peerDependencies":{"react":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_3.4.12_1553431899152_0.5097828679158909","host":"s3://npm-registry-packages"}},"5.0.5":{"name":"@storybook/addon-knobs","version":"5.0.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"965d3afc86bd2373ad4514529ec0f4e590c7db45","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.5.tgz","fileCount":74,"integrity":"sha512-LbtWoCd6oBQP4pSLZ3ZGdZ5hfWSni4M2BXTy2MRoH4cNYRyHFeVthtGCqLAywnO8Gg7ei24/1uVyS4J8ezTcRg==","signatures":[{"sig":"MEQCICztpiLv539LwKRFr44eQw4K8DiAPRWI6cG7wupuZGfTAiA2u69vcuFvtTR4sz7xfXc8ITJKF9zulRh56xzJm54gyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1312060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmA1kCRA9TVsSAnZWagAAamQP/1d0O8dpWihXyoBw8VUM\n/VOI6d835ufzpiejP1BrKmzA2D6FdPEhhKrjHzcGksypH7rRwI8jU5rdHnGU\nQbVYDBIbonXX8BDTzemTu2QW2oX/XeitSYsK9K2nMck0gNDnZsj18sFaSXmQ\nidj4v+WVZ4T3Tp3XqQly4/+6epLkRMNb+HtQUDVF2epJ7BvMLRti2q+zwBrF\nPrDev1JY1yLqMEmPYW3WSLyIvpWHadOj+U3YibiiF+hl0UweHpU3DBlPJO1f\nvPKiT65m3K/3Sp6DOQSULW18pB6gHsufHYzjDQkxc4Wc8zIbavkEY2iXWtO8\nYH0Xv39GA/K/zBpr+1++K9lee1S1NTS1rxanw0YZhTAG093vSJtOPDzJYl+e\n32b1cfGLSLK2nvbprrVbfIjKEtUXQRKwAm9QXd226GcuIyF5LguITILF9Esv\nWSPB6MQImhUvrYuD9qqnFlzHao17I8TukUlmNmigLa17RsFbpz0jQjdUj70I\ng5YV1ouF4aOMi1UqXEZ2vm7qDlZ1VN16/Yib9HnPwjZHkUHlbPoVhKoTSPsa\ncE2DFytP3q+PCNtbzh/lp26A0ttBzxAcO7dW0wu0gLjNyLZZgDPmmRt+RJuv\npCg1SCz0fU01wt3zepCYCzgeg2MSIqk48SW+6MpGQ/MA4JJqoJg3Y3RXvD3V\n6AEh\r\n=+fST\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"3abc5928c99acd2d364e1e2e901d19e89f5ec16b","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.0.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.5","@storybook/components":"5.0.5","@storybook/core-events":"5.0.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.5_1553468771894_0.02238751422906704","host":"s3://npm-registry-packages"}},"5.1.0-alpha.14":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.14","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"375a7ba04b2dff8b5c74aeaa5fc743b1e49c7234","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.14.tgz","fileCount":74,"integrity":"sha512-NnamzzRBGdCpzD1zL37tK2J3oExBhfzLkUCnudbeXRAjNvg2Mq2ojdmgCGm++ozAhrMwtKF0v9qzkKe5+KNPfA==","signatures":[{"sig":"MEYCIQDMcCxkvZQ7JwngvIGZrFfE1oV+6F+KcGqksGnnAU7izwIhAMT8FqAZa14gD6jse/YkpELHnGvfEcU5wR9qI/M36I/U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1314113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmPT2CRA9TVsSAnZWagAAGuUP+waJP9wac1Ipboe13B1z\nhR4/0UmsLwT8KQSuonIHTOtZ/BZ1+//1Em0OXsCFuIp3V//TpdAOfoRPPKpi\nRz22iTeAK2ozINl+5j5B1Y6oHu2s1FSF3prcMtUgr1hvwyiipDZRQcnXazeH\nPrPGX9QFdghsDEBNrdlUKHgLllSr+/SFN1SnTsktObdeh8dK7QwyrRKQstRs\nh3/vHOxXjpi52uI3Zg/2QZUUmM+RWR/wWskf67U7x0/3AJfiQkcdSu8IhjB0\nefAZRpyQtSKZ2MhLv0VlbibA214alL2ktC2pfAJt8Y14qL73BvTiH60OmqTw\n1ZnDnHW4wJgkzacbVWei5cbiVeubpDCT2K9JvSFWvxRAoA0Labt3ZA9PWqtD\ncLmhAJ8Tg6ZAMeTVSld91QcSil6pXkibFZZPYrd5Z62bYxWYhKtEzRJYvZKR\nNxT+8V95YESwRiAhN5yQkvJemShj/xINdGcxYXcPXGsS8m5o6A4OC4giceux\nuOPB0vY/jwiHkDcmx/aw+Yl8AQGNaV+dMH2eCVtQ0wMefuCqGk2lTvY0CG4Z\n65BIBGOWAf6Z7MIxG9hKzVoitvTc8QjADBV/E6ybvNkxSqNGagw330VDWJIG\nPzyTGJ5gv51X8+ph7fBSMoYOfD8NZiDTFxJoE46h+6eXov9atevzVuQ0jkna\ntFok\r\n=S2ap\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"8f95620be5838c42ec36f6d26b9cf9ab2a2af6df","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.14","@storybook/components":"5.1.0-alpha.14","@storybook/core-events":"5.1.0-alpha.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.14_1553528053879_0.09071113728435765","host":"s3://npm-registry-packages"}},"5.1.0-alpha.15":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.15","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"4c46c702d4fed25245f43ab2b16aae1f2cde334d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.15.tgz","fileCount":74,"integrity":"sha512-NYGD6vZuubxskNXNAX6TRyk7VkNX3XuFz585BA+GKqQTI2kS1GXb6ufwu3uMirg2dlVjBuqRp/gF/LqQSKQyhQ==","signatures":[{"sig":"MEYCIQCJVaibDj3wShmbcwDZ6aN7UhP+9oZ1or6wuUHPTXXtVwIhAJ7iU6cHl6l7ej0eIfussPXDhSnR+zlUHBrvz3cdp/ty","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1314572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmZhTCRA9TVsSAnZWagAA7V4P+QHd84nvLau9qSojeuYv\nKHIQ2rB8wSX7Rgv1K0MONbK+T5B0qVh+BRonbhq6CsH9+xSbTQGpvmDZP+6V\nxXhJI5HaBgBi2sAemk53DDNEDPa9NiVAY3fGv84k/ZxU3qrcsOzMQv9oBEf3\nJDoD7+10Rd5sdxYVNtr429z7pPo8BdVe2snpwMaCiyn/btGAV+HLtjtQcXM1\nHmsSNfS10Bm4sCQDn/nL2/zScE1GRTaJf6TQFavY6Krz1X/Wwb81akoWp5nd\nsBcspg4HSp1P4cltbzgDVvuG28KVoB4EfHnpo0b9SrW8C92VsfiRFRXVbSDZ\nm4wjMJoMN0rB1zEDg7IDekoYR9bH9KkTenByYRvFVWNoXFp9SVungSGMP31U\nBM0U5Agp/zvFzakkhswS5K9663OyZHw3YZs/DjGjuAeC/PMrR61N0XKsGBrr\nEm7ZI4w28MkaXVMMKyOgVFozY0QZIQxoeW0ietUhkclQ2d15lg8rpr+yQaW7\nfFXlRyxA0yK1x2DmlNwY6Wrl+SOwp9PUlSBAg0F5JcB9YsYypWmW3nAcP2Pg\n0pq2YAAOVXIyegAsCYUHxuoJi6I5c9/wNafkOrNFuz5MtsWvUqu9jokQD3Xt\n0iVLeXTaaPtwTjWhW7kDMTFFXlcTwZ+20Si1gJbzPAuO/tmg1sq097khRfDO\nSdii\r\n=aGS/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"7550a437a261abf4d80152287fbd591715b627e6","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.15","@storybook/components":"5.1.0-alpha.15","@storybook/core-events":"5.1.0-alpha.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.15_1553569874206_0.39401178780816726","host":"s3://npm-registry-packages"}},"5.1.0-alpha.16":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.16","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.16","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"a0711e3e7ff2195d433b41faba16358e5e9c61e1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.16.tgz","fileCount":74,"integrity":"sha512-pJuDSQ/q51YdGbIO+y1pHwUQDQYuii2M4IUsLo2bCsvChdEmnRIy4ZPZcF3IRp3sMD/aTR9aRr9E7FbsfZ2+og==","signatures":[{"sig":"MEUCIF1kTAwfaIlinc/puT9VQ7c++ayz77Ue5G5V4p/YqNjfAiEA0nS47yXrFZmE2qDhiGl2YWDcWJAC6rhU4vnoW0klWKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1314572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmgKeCRA9TVsSAnZWagAAWzcP/jqHLwJIjid/uYtiQTlq\nNgVSLmSK6TBcruLEjPrNLibGcPrKD8BnUGgfB01DTdQmDsDMsd9I55VB1ZLu\nasFJaO9/vWjQUGtF5sF67rHZR+D5QZuKBN3Vc00/xB9JgzPOEZqBMi9PSTit\nG8hrSMeYio8ZUCgGHgVOauNTbx5DTWfuoOVxD3+yN1eVf33x/UOceBnPelAi\nG3WJ9pUMU3Lit4DdPwk5s8yAW5b2VF4rXmMP+61LfKlHO2/56bM9HMPjCeBy\nLkI1g+0kAr78LSkRRWQ5n/SS/Lfpha4Yf6tjzpBndY3CQU71iL+66JHEBV/q\nNXbswBQLt6eHQplUVz/urI5UG6jxD450lb+PtaenUqP6jpIKkAJibfmi1OTi\ng8fiZUY4kJxU+BvUYGPWsWChtaMoHeSWmpORP9gYt6rNnGfydUPEbY3VQINy\nc6sMvqbabCPiXhskFZwREckNlJuHoUCqy67sntv68j3866KPrILrzGgdL616\nlBKQHxP0Wgi1Ces6NHbDiqeGSGuoTmyHwqH+Gtn/vhEKaFI3BLMcXyg78mqj\nByUvZloD3nxUj5vqe3D5S2uJ9wOWMawbNJgTZlYFVMO5NR4Zh6NSEsFXUKE3\nVo3xcSXtciXlqTbQVq/KYwFHS+TKiFv1DvELhw6gw43QkylipHx+7Fi7vlQ6\n0rrt\r\n=XpKT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"988679f4b28cc9b4b0c12bd7cc975dfa84a62743","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.16","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.16","@storybook/components":"5.1.0-alpha.16","@storybook/core-events":"5.1.0-alpha.16","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.16_1553597085918_0.3316318150880746","host":"s3://npm-registry-packages"}},"5.1.0-alpha.17":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.17","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"e6751694993f83332ceae60b3dfd9a286f6bc4b7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.17.tgz","fileCount":74,"integrity":"sha512-CHXN9Zf186nhQfLdlK/qlmJxw+VrpMM9FFIlJacNpomq57yzJiADg20IQ11V49XYPr3QaXib6ODjl3BjOfJedA==","signatures":[{"sig":"MEQCIHNAZhq8qw5kstjdkeH1IXlNw7VjPaSrjiUyyX+lgEtSAiAllx80wfosruzJrVDYKTGAFcDLSRgsAITnEyYxsgFSWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1314572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmiODCRA9TVsSAnZWagAAnVQP+wTzppLDzIcn7Z5Qqhq9\nvfaWMl4cfpxLCVkAYars9mrc23QcLC97ytLbGpp05RB0p1u5lgC7WEJie1fd\n7ysCv206no0WlvScHmBq2Kr6q+W7e9iBsE+E1H6kbCuJOvcY+FbDQ3qtVI3D\nRZztCDfxyUzs1KZC0qdF0dDofbT1YnJNc9W3UsKfHxGQYS6v5VvxZeHEefqz\n06luYS0f6+bOqqQ6iS87DCc7+chG9SLvmPHWVG0rBvxXXQvzdipziWzDTh4w\n/z04WdJ4KImhXGaNoSZ/LLXUBcgoIBU3bjf79DenBPJ+9vKU9bJfNZMjG0kt\ncOw38FszpBHrBUDqArowBeMVFvjN6lE4WsPQ68Lmf4ifnuO+Xx/Gt56UJSQG\nK2Ciy9GmyeeuYcQHCDs60eja9AFGX6XguiPqKyWYt6o0G2zjUMuBy3Ef4pxw\nswdGs7oUXo6ABNl4i+PBft0tpUuzpNV84STyxAcA46E7kMWma8NhAvINZ7bh\nIuuetuUIhbn/sbRyO0Nd3kRgGD2PgnmoevxnwiyoE01AHKiMX4kWsrIDkXVx\nMwaY/FjYCZJg7uldDqkkMobeHRpAnWEcWyKPPS4bim/CwYTss8bLm0NzHjM+\nZEbwFsn+rfpjn/0YIhDgueIimDmxRA0gagwqLye0SSZZy4Ent/yqaqnoFslD\nYwRN\r\n=QaNN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"99379542434cc556b2c063056c3fb6e3ab0bdeb2","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.17","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.17","@storybook/components":"5.1.0-alpha.17","@storybook/core-events":"5.1.0-alpha.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.17_1553605507057_0.4304159453821308","host":"s3://npm-registry-packages"}},"5.1.0-alpha.18":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.18","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"cee670a4949c961952f152d898eff3de666cb89c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.18.tgz","fileCount":74,"integrity":"sha512-ZFrsNHnmUsaEhTd4BM3mQnAExa0gQIjN7loIBvbYdH/7pJbVm+2TuPUwmViah3z9GoLj0TSfho+xy+s+LywFDw==","signatures":[{"sig":"MEYCIQDKV/fM2U1rDNe0quhTec3NXxAJwsvpUHJJNxXlMOYCZQIhAOdYQOKdsOj7/Mq6pgHz+f1Nqk8US8KEPRQk9y52q7+L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1314572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmrfYCRA9TVsSAnZWagAA9n8QAIfTwPD+okrBZQ//XDfy\n9DrW9RN3S55jhWa4HvXFXynO8bf/jbWgUQZa/KVXoGtjpVYtEUNrpMCKcBcE\nAoB82mZZYuCcigu+XRO9aOwKvzfaIxq9DbYeR7BzfxzkEORO0qUyr45d+4c6\na0wXw4xhXEQoSj50aOhMAUIwWHZJ8H+Vu7Kfufsaa5MonaQgIo1KNKrjZ5Yk\nHcHCY7HJRlNFiCEXBbjIQou6F1GpMdV/RNGkHrhVG2kgriQggnAhFp7gYDut\nKwp49rsCqV/reKISas7fj47xSBR3WhcfXAt1y62D0TUUfbdhC4FoQSmsISSm\nH6bb2N760NfYdxWxtc3RyxioCiO+mia67QPzu1am+qSIZdI2HYc2qbVipI5x\nOmCgWNOkKAghC5fEp7Ax9+URBhF4YBrD7gbxPzGxDHUbSFrU2drVqWYOkshE\nvVIw6AYOCmAdLq3EgDo6aQqN4wPaNal/6tDDY7g05zUtyekPxS4x9Lrox51x\nrcJTqf0Z/vSXeuD9ZFpO0XtlRqpSnK/8dZlOKRuDphGTUotsG4Xu7x2fADRj\n/lOq9DaAnCzWqHk49EKRda9Iyzex4k0QyNDRMOm4UMF8IhPib/fvByZcaw6Z\nw+O2IKsMrzt+E80LHY5/SnfmPjrGcSS3//ABIbaPe2Xuf4E+Fd/qP6H9ybCh\nSRr4\r\n=cRdK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"8941e4449a8a4525472e45255fedc4ae068852a2","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.18","@storybook/components":"5.1.0-alpha.18","@storybook/core-events":"5.1.0-alpha.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.18_1553643480015_0.3916977687496983","host":"s3://npm-registry-packages"}},"5.1.0-alpha.19":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.19","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0c824fd2c3fbbe99e733c224cf0176c5070350a1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.19.tgz","fileCount":74,"integrity":"sha512-nCn6j0fgFTFmtouUkaLpD7wKRyLkHRTdx4Ms3f2+yOnwStxJcbnICqkV718E2hfEGJHBPXKZX1Kj+qFsI6o5zA==","signatures":[{"sig":"MEUCIQCLZpB8QsnBe/eAy07aNWbKNg+JXezU5ZGrqhpwO4N/7QIga+ETY292fcCBxm8EZTFIlfXR8UQKXOLtxe6RuVuHy0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1314572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnD5eCRA9TVsSAnZWagAAqL0P/iQztdunTgLiazobTXr3\nNVGIJn+iSeuuwddyyUZPaCKUd56MtfD5oTOFqvqPIBTRxAA3UH2e/rBMp6Ck\n5fTpy7jKnQpqa2662SRTSlJhRNaOaNAe3Ml4KChEYstjtdNch534AVD8gzlU\ntOUmrwq2gUMZN8glv3wp5puljwx8lGsqz4Z9ueQ1NV8NapuWc92gCV/ze0pw\nTkOtVWE9now23D3yscI9/C1S1G6Z90U70PS/DOXk5x6yn5zU4WxGjN0mvy5P\nOEWpnmrsK/FDyllgV+vhhmprh5zbVwRQueL1FxFmnaUThIWMD1xxTUH+S0Zy\nrZBKn23P+c2wBy+U1pVp8b/bHGz6W64BvLJhG9uFlhALZgIf5g0KZCKcwel1\nmBVv0tQ0H3BRdieRcFQwGzKsbCDK4Q7+lof3MUsvfdu4BtkhrdhDxAh7CRUM\ng18FRpUkVr/KernHuuoLpNIVSm/GM2hiolK9TBX6OFZNFm2VE2AdllPS61cD\nMJmYBr3QF5+gHqgueoltM3rdpOpUWvJ5mMPWWKZd1GVIR7fxQgW28oJsHQVe\npz2Wnmj1AGsu20obz6NLyzbxa2TaA7c4pgpnibZjkGIozA09ksn8+i8b3Vg3\nHYZOruptkch7/Q3a2nlKBvjdc7YFZqjb4uYJi5RcTVs0aQtlD0tKhKFR+iDX\nSWjv\r\n=+GZR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"c628022f9cfcce5b6bf048038ee9338754282f12","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.19","@storybook/components":"5.1.0-alpha.19","@storybook/core-events":"5.1.0-alpha.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.19_1553743453538_0.2716595728075666","host":"s3://npm-registry-packages"}},"5.1.0-alpha.20":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.20","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"b43863f099fd9288be9f42742e1481de262e181b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.20.tgz","fileCount":74,"integrity":"sha512-rNeOtvr/kP2lPjWLeOIZEr+Jq8xz+kz0bTgc7BGZmRlF3T/ZpDNCiXebwdhBnCr0ltZKX4oSFS/arLBy9TMhPQ==","signatures":[{"sig":"MEUCIDIyRK7+5TQyDA1h1byR9Y9KJs6r9Om7JeyycBh10Z2BAiEAhEGQuY/tIsD8xDXYRqA0gQIh/H0depmuPVjUrD9E9Zk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1314572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnX2fCRA9TVsSAnZWagAAn3UQAKRE2CDRgESLPOY7caL3\nxVHUzMzt3R4/lhbRD4BDN7Tgqpz9oOXNmTrTgoiMBOXjdau6KrWGjSN+juFG\nFQBe84adOd7rKPGfTfWuweyxEcgvC90cPM1obEo/Slf4VUa6aWs9HJ3MAO5g\na/Q6Nc9Y0lFhwJqvM8CXzBDFijqHvouDTnmRbOOMJqFdSF3d73Q9YrKKsIcs\nYvcSZkKclXFr+kzN7KXqUZ1cI/j0ObNYdGfb+EGjtIzDzEvtCGHI8nYNdumQ\nfUy/fCxzhV2NiRoyRp9zPEbjcde2GBwzysB4gHXIeHbb3gNXQtEh8ndE+5yJ\nYR9TpUlKcMeVunG2uqLgAplXUuCEzRnkFTibb1jpOt7Uh1/TlYkdzVhyi+rv\ncJO7u/zvsCrpFZYloy6GSyZ0Zo2nr7njaRLN4jy2Ii2I/RcVlcI3cCsRIZGA\nHf9UB03hbFzW4bki7Xb0TTWxW2ezzgNvwVULAOU8rKVKed5j7HX281FpgG31\nHg9naVxHIhU7DbtoPiE+OIfIAR/Z1hotga1x1dQwEMLbNHB3Itv5BZa4ce80\nYSvSaTGJ5UEqtBJvCeLS5ZtLdzjEgf4jdI+Y/uNuKFBBX6sHiloPj9mQ2DnX\n+hEblso/llGhQz6qNo2O4LqHTf1d8kQe9ZjtaIgQMydMZWXG7ptYpQbkSyYM\n9UlQ\r\n=II+H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"a57917a19ceaafd5f5c42bd47821568f9dc26390","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.20","@storybook/components":"5.1.0-alpha.20","@storybook/core-events":"5.1.0-alpha.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.20_1553825182571_0.13620948754170814","host":"s3://npm-registry-packages"}},"5.0.6":{"name":"@storybook/addon-knobs","version":"5.0.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"f291d7e18d30ef65284dc424d1b7527f114183b6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.6.tgz","fileCount":74,"integrity":"sha512-Qgj84wGuBSxY0As127OVmd6bz6JLWsYteqjhlSu9vRfQrSszbQSEJb9ikOhE0I7g+hS0u3zWU+HDb9EgN/87SA==","signatures":[{"sig":"MEQCIG/4QmaVAp5MehgMG4CX8ilgBdoQP2Dsm3t1bLTc5UC5AiBlUi6xapAIh3jEf526p2KP+yHvuvBTCDxNoE8fjir4dQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1312921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoZdoCRA9TVsSAnZWagAAriwP/RmK1IR/NaC8vUwUVkoT\nY/eaua9p4Ax9v4bDLTLC/QDQrnmEHpJizwWJ+81LIj8egHQ5Y1HKvJW+2tEf\nZdfVyReeQPL3FsSO/OCMMEwAZrjFl8wFrg3+hK0WR7cJg6slsA7JhT2PMox5\nD5FIhNaSK+F376xz4vF3si8X1YJZOFrNWxV1ymXERHs8nx67WNW4ay2X7LOV\nP9ZE8oYIqyiLioe1awU91RM+a2Vc0aXd2Fy1Y3MXro8KAn9izoPrNazJJI2G\naJMWzOCioYEE0C+oCcPEg+MebwTbfEQSJVjyVMTBagf8WEc8XZJt0Gs6Rn5J\n4j2o9MiNhvNGdA/fd6dBaKd4bcatgZxQktfrrxiNJ92Cfr9l1Q074sG3kigL\nsRlrYvZ4r0LmXpGLwLmqrU5tq9rsVfV/WnDBtTKV7i0gq5WcJ7SWAnx7/vYi\n5uklTzQ/i0hNdeANDqbWAY6sjpW9chWgmZ/nQvKOKiUifyvoGqBxI+MwoskW\nDTeOs8uLO4PKxQvMIIZP0Gk6Vn5MTialGNF4BUYmXvZM6wZpMerzUKSXR7Wc\nIsca4vZAgwBxAU1CX9aK+ooN8m99H9nFs4cgcek38jsy377/vOV/5YBP/QNe\nn4DR+mjTvCzQrE5rkJtZiAzksUYrqgMPssPVV4bZPb12k48n0TnDh+suEjaW\no1i7\r\n=1FfN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"6633eff16e5980aa74f862847a48fc6305c876ab","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.0.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.6","@storybook/components":"5.0.6","@storybook/core-events":"5.0.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.6_1554093927897_0.2541140696288007","host":"s3://npm-registry-packages"}},"5.1.0-alpha.21":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.21","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"33b106eb39933183701043972d14a58747c265e1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.21.tgz","fileCount":74,"integrity":"sha512-zIJdOq6fQZ/g1ZFjEvSDtfNNnYSFJTNm43ka++JNAI1RCHkIDIAQz/e4zgh94f+2vtUHbROHYXc0C1uHzzDRBw==","signatures":[{"sig":"MEQCIBrlY6IwR2tp/kdWWedAQOBgiT5lfGuIQpIrfOK8myM1AiAjj+hhuun01PphPje7CjE2kI82CkCJNuhWATm2a65yMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1314572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpiSlCRA9TVsSAnZWagAAsFAP/RcUTAL0iSeZcfYpxwbw\n53dFw9SSUF2MxT75acRZPWFXt6xCpQKOvLyNsxLKjnmaTwP6EgVUl85RPXTj\nsycgmaUUvcoaxqiGyZQUPG6cVEpSRYZRowNUs68kxf136u6pUyWQzNdp7PlU\nZ1Xe8E7P9nz0uIbRLKNegr3GY3t7RHuJ4f3/iHk8B8oB/E1FNxIf2DYUImex\nokDT2u9MH/6M7I7dWJ7st6ACkvSb4D4JdU6vkVrCNSqeePup/LX/PfWeR+I4\n+nMk0UEVR/t4UH3/jS5epc02BkCb0pmtqOcJqUWACm0a9D2ZnvPYr+P5RCx/\nzeh6C/ytmUWqtjIa9TfC1nrXL3L3t2e2AKGA+nbDgkP9KPh7sEoe88K5io4b\nnj+ccxeBTvY592uX6GrJ3Qh9kmlFsKHPkleqwVn/5ee1BY+rp5VgvQWHZ4vh\nx6D5Wx+gATLbPclXMRk6xMzT+/XAyF3xAH0bP6X6StNkCN/r5bcEDgZmYKTH\ntItVtz7zH03taFGm1SDpQmA8FbHv62ATqGJBOZY+nuC1xNu7g4TShjqCWucX\nq7gHLXCYH/jj48W3/a/yUmkJK/9aZrhSJN/1/qgxaW1QEPaFiwnufyyHnKDx\nhfB60fWnq7Q07u0PG4xPqcjvoPmuo5V/yTcnsGsSFFZGIxSCvrindj06iEOS\nyMxh\r\n=BUfJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"99c262545d1c106802ada148883ed371901f971c","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.21","@storybook/components":"5.1.0-alpha.21","@storybook/core-events":"5.1.0-alpha.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.21_1554392228297_0.9094482689583314","host":"s3://npm-registry-packages"}},"5.1.0-alpha.22":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.22","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"a59b22f22c6266e5f3d6abc9a72f3cce3f90375c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.22.tgz","fileCount":74,"integrity":"sha512-RnhhAYLSA2i6SV2UwBCpBtdRK7gqXE1+60U76h1eBbqOWU2/AoXYro9KXCwzOIItRSlXvpXCL6dckoGgm/vTIw==","signatures":[{"sig":"MEQCIHmJtMRm9W+Bz+b0LUg7GjKjUEci9FP1E/PvWumx2Bp6AiAyWksjb8KxwdrfOcd7EfoNivoB+s4jjKxHyhmFlxIRPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1315314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcp1v/CRA9TVsSAnZWagAAVrMQAIj96Ci3/2h21VOzO0DX\n+87CPYKOMdWtHh8plDnRIR3e6yrvqlln2uznlcRXuObtqweAFCbAt/Hmh3b6\nQ8RYsvngxF/Rn0tXF6wWYOQM6aSv3cC+04u2CHcE3bI56tNEdwx6W9O3zolm\nldzr6PvvA25wQoQyPy3Vq0sB6rHiSr6jERKMhwaqHVbaHJwE2YBsKi7Lup0S\naTn0HnwACUvy23WDqxN2z6syuI25bce+JJbrSXLUK8X6tJz+jSFLxQgDisbf\noOZHeDZZ4tAgzz3l5yuI+9z1l4gI1kHgD98x2gFgk5hLr1zCfmRRqiv31lvi\nlvUd7r5dQiMHAYFqWtJTRhWgXCeMl70ug5K5Tpc1EuQFI4uQ9yb6dtfblpM7\n6e2Nnsostqk+6phSUA08ufTydErAxSHI4tHg1hDYiU4I8ARrTPVZvnGemxCh\nxByo3WmcKxdQTJsgOYr/M2BBT36MHGmxAHr36VP5GTZwVUlPytqFC8ohOooz\nniBEJen2WOz8WdV1iVOTJH/JQG18YrjMD4UqOzE4U0V+UzjsG4g8yn1/Y4pX\ngoJWZF/hSQDaRwXNeCsqvb9HmGgSzKCT0SRxkCZrQ1Z2GB1aztNUxExvdwOs\nEYDpJlE0cs5KGac738KMdmvRQyAPJQhB5p28C7v+/XhAWED8TGb64htQObc2\nu160\r\n=6caw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"daa8d43e0e3975d36bcdbb6b488d6def33f5b70a","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.22","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.22","@storybook/components":"5.1.0-alpha.22","@storybook/core-events":"5.1.0-alpha.22","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.22_1554471934283_0.4615453729406995","host":"s3://npm-registry-packages"}},"5.1.0-alpha.23":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.23","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.23","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"cb726af28051aa4d075031e73764ea09c57a4bc4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.23.tgz","fileCount":74,"integrity":"sha512-bBpUkHwJN+7rUstXpavSzDSX34LE78ap+zIkHG1T5v9oQVX8EUZJw1anHmV/wO5ptKLxfozFLqIti0b9BjYIHA==","signatures":[{"sig":"MEYCIQC4Uy340UHvuVVpayE7bBl2x3LneGC7Jy+YwJFryWhHgwIhAPGVOPKPUZtID2H5WeZt3AcVOtyIehCwjhR0+esvxdS7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1315314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqyHVCRA9TVsSAnZWagAAjbUP+wXGWc+SohNgT/hPkSGK\nB7lwGBO9pMOGpj+LAWcTNluhC7x8zfWZKnVW9gOQ971Cyx+uTp3jL2dTZOEy\nAPc2jXfS/PwgshvY2SxFSSfEKFe9qM7pDlhMBzSmhOvLQai6YlhrC9GVenEn\nLyZkN4Mlh8SLpQy+HUXqHVXZ7cBzXcGYiIX21FkrPjFvOe5mfQT55hspEO9c\nelSnOueg4B/c8ijy2Ogem2O0zYKgkCqYA+bgaw2OmucQng6U8mx84FzHjA/a\nIEV7oysHP8a8xq/lBBO+qDHxsZ/xDACWUpCXRUne/wtD28Yiq41e8yCxYd8T\nBksDk+hqJL9xRs4ukBNdhbCeykNcbEElf5RgWRuNIqld8d7mgfiPptOp0ZLk\nOipZ7l7xDS7mYp9eQHBuSB2Fd5w+vYbJlHP5SWJ861SFEVLNvYHX1jmqOE3O\nYm0Gi7XdJGKomA4mvwN6NKTiZXd11/J//AaHDfVW0zAsG31DvSwz8h9kx9Rx\nYlXTgHOXfUE3GHawr4+1ToRPCRhOT/HWnn9ZDJcdhmjSMFCq1sDKvIFlP2S0\nc4pKPyP9vfbpqGBGCXEeguz9BUtp/zYo3DO5tBBiByKwg9uBLX+VYUyFXwZo\nk9qaPaLCWmDSwZJG4DyeEE/SvKzjxgn54qGi3+wD6LHeVcwKHNaAexMRPkOQ\nZvZU\r\n=xnbM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"3cb0dd5af98b1941324acbf47db43a6498f6ed59","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.23","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.23","@storybook/components":"5.1.0-alpha.23","@storybook/core-events":"5.1.0-alpha.23","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.23_1554719188493_0.9722163931855323","host":"s3://npm-registry-packages"}},"5.1.0-alpha.24":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.24","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.24","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2f14c9639578afcc7a6a58f71ba4f4494a5d4985","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.24.tgz","fileCount":74,"integrity":"sha512-4riGl2EBfGZCxld5Xtd9eohfXv59DpasfRCHh3PutDNNbBX+AUVu8E2P4o7Z62Yv3X7FDXWdvsxH+cz1MWN62w==","signatures":[{"sig":"MEUCICY3W0fYWf+p6TkzaWO4a5TAXfOfx86lI8Zl6wVgLR0GAiEAuDNJUknVma4iQ6PCxU6EmepsQm55h6KKcYYcPoNB7PU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1315314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrABkCRA9TVsSAnZWagAAqwwP/RwaADztpUiCjWsZf0Ld\nKKLd1xBOrntxiTGC8AZhP5mcEpy1ORfVUnqW6GM+NmQ0jhr7lh6VlrR8W3lG\n5ZThI5wF3iuVF4GExNBX+9vWLasFCMjjBiO9ekZnBVyHogZZK4nXLH07rkW1\nDJ3vHMwgTXVp3+TSEvfrGmVZo6hrzw/A2kwaPGTG7JkHCgY5FCcBgZ2FVR3G\nljuOJwbubBLbH38Cx9mLDNg7ag5jgH4e6NU3DsuwpdQ/s2x8cbYiaBiq8pgb\ni3lVeIs5E/7gut5JxiANyvr1AIbYrEs22VnB+idoOX1GUHa1pSgW7bUueQ5n\nG5gxVTMbUoOnzocHOVn8IU09+nZvEi7gIR5OR/p646l97s9DbiSBVLj2fwli\nRivBpW7dggxQqZJ1dznQ7wBOtOCGBzLGz8GtY+uG1joEottJPzFH4FCtDkh2\n7rV2YDB5fq8vnp0n38/s3MXja/GSI004crhq1pLY/vFkTRs8OCca54aPQIQd\nMqlg70IegcZu5A8CwoeNRNA4Wv8/ucFumUl5ZxFIs87oSoVg1b3+3c7B5mWD\n3EdYyfgXJVv0orb3mUsjhwm/d1RCygNlmiyCkfy4SdJpSCn8uxgZnGuo3B82\n6Bi4gkmv4YDK7TqItm0iL8ov5heytdT5n7NLLIvicNvgv1m5d6b8/kh7a4Mq\nnCRc\r\n=VtJA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"ea8b7217c3114f979ed18c7da625f72a15e6b2f0","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.24","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.24","@storybook/components":"5.1.0-alpha.24","@storybook/core-events":"5.1.0-alpha.24","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.24_1554776161948_0.06724137832629284","host":"s3://npm-registry-packages"}},"5.1.0-alpha.25":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.25","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.25","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"06b302de1befb4e8cc900c71e859e44325f7f7b1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.25.tgz","fileCount":76,"integrity":"sha512-u2WOk7BCLRpXxKqDIUKUN0FCzNQB6RXbCsYytb1oiDRzKOh6CqDoF4PvqdZhjihr6mELkiM1dDyjYJOiZ802tA==","signatures":[{"sig":"MEUCID9DLcPRZvUvmeGgRS8m1Pn5hQCtV5TOnuC3iOrfCbDfAiEAs0kbATF/1QaGSEa+LlQB4i/4cEIYuqd69WEzsmTOLC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcr8Z4CRA9TVsSAnZWagAAVgEP/1QeCaRTfzSt2/gjoGsO\nN8+M+sviX1UgwnPJfmvwDDTjgjRafTLufcIA6CvkKp7YVzr+BHZUyNd6xfW+\n9XJ+yM/xnMPvyp8M8bI3k3mN/bpvyerD0tQYZ/0d69hQqITnhdOLLKgBKJTB\nuWAWrxdlXFmOJJhFygb/DbbNUgNFkwxoY0uUNt1PWOj1jWgikhnR2zGiS0io\nC/sfdtutdD7dpJz9OQI1qoAMrx1krlgDyMoVMTUk5XlLSLXV7InK48gYjacw\nYnlZHNxztvk4anAJzGdQfRYMU7+uHxolKkWzLDKPGlQouV3q7t2W1WRUVWti\n6nmGE7vS5tD/IO0W95bBSFCG3AF6PvWBT6UGu7RwY/ArUs4aAccXXkJrO4VT\nvtbAUlTI1siVA2dsH7zIl5hmiBcDLG/dT5Fi9ZeMtGaHMHJljPLDQ6Rhr5dC\nkE1acoLkDFMEznhdgWtOsvBVKbudNlAorbP6W9VdAyMa70VZ5Y7BthzZoxD9\nGTBblzIP74zehOiThBAW9znc0g6v/nnOtY1YH5WOFJQvDraN7kkuWsa02Bgs\n7p/o2jTgaGIQvjKwZTTYbBM/LTetDXCtOrmWZZV07Byxow1TjGj8JBvuMado\nSKiQQvGsu0Mmu3rR+MhYeEc4wWe8H8G2ef/BELN4UJQVrxUjGRcnhLjzmkU7\nQ/zn\r\n=d19L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"eb7a36ff07abac8899979e7953b34658762cac78","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.25","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.25","@storybook/client-api":"5.1.0-alpha.25","@storybook/components":"5.1.0-alpha.25","@storybook/core-events":"5.1.0-alpha.25","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.25_1555023479394_0.24337840369683605","host":"s3://npm-registry-packages"}},"5.1.0-alpha.26":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.26","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.26","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"e9fe1ba56e4f2c79654322129cffc3e50585945e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.26.tgz","fileCount":76,"integrity":"sha512-quzmyi3CiNDk6v2QVMS1v7aZzA41A1kaImhN1ZXs3+PTP3BzCxxVkQvd0lgBUXYI4TWCl8w0A82BUyPEAfp+uA==","signatures":[{"sig":"MEYCIQCs4nFj6nMYkStUrFB/wVZXUXLoBNhO3m2LM8dHi0W53gIhAN0aK4OUO+tRsuYU1QwbeUua0EV+CdLPORcpS9blNcF8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsTX8CRA9TVsSAnZWagAAlgEP/1F/BnbfBplEJ7KJTLG6\neii8OcEzBbAOzcuR3TOBTG1xavHe4+cYXdBNC4iJKdA/dMobJzWVUrEnv+RP\nRcLH+7HXIh0gD9Pg05KH12X2jHA7cR/QNGNnVqcVEjA/8UmjME1e1/8oo84p\nvLhUnGFNv6luFx7dePYhppyH/BF9LQTRmftZahO2+RaVFsMXXPmyZN049V4G\nHYs1BwIT31tW4OLX2tD07QtBl8I6+g6MwAX4NYogh7QZe8HgHzpjvomJbOPI\nkd5gHZz8A5YCnoaeL5L18BSt7ZMqtX0TXxZRa1OWLBGP8Ldh4Z14dgSObCHz\nwxNOUZDXanH0mEVUGtULMglwv6ruxbMNlQIZDo+/ymOY+W2i6dr3LxGj4lTX\njGvPAcmLXehi1WJtHt6QlJnGVAizy2ilO1VVwdl1to/uoNmRVWBWM+aAgQRg\nRhXBwCz+Tu818DVHOy1sTaWnOoLrCZvMFJAqQA38eZ6OHUwyijGEOaxgIOx/\nA9sM7p9yGsosLteeXlgmOtl89tsRfULpqlkaLcJVaj5m6zuy663HS59sqUMV\nxKTyMjFf8IvtYzI/Wgl/lpnsTKAC/IWSq5KAkQWseO+2xZAU/ARC31RChysI\n0lZEzLa0Jl5PVSSPa8ckdzLp03kzTRmceE+Z0enXLL9Vl300MyFOgZLVqrcA\npQy4\r\n=tBF7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"17b8fe98b908b8b6923e6d97c0689b25bd1bca86","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.26","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.26","@storybook/client-api":"5.1.0-alpha.26","@storybook/components":"5.1.0-alpha.26","@storybook/core-events":"5.1.0-alpha.26","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.26_1555117563151_0.2313915218887741","host":"s3://npm-registry-packages"}},"5.1.0-alpha.27":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.27","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.27","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"65fd935fb2611b4cb89d609b15d4c26a4d9e6ff7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.27.tgz","fileCount":76,"integrity":"sha512-EUTJeBAT/ZDiPEQHpTkQQcfVlsejGiDNsbxGL6hMPJNiUImxVgcBiR7CR3ChdY3rMd/8BcRHi404wSmpXjYdxA==","signatures":[{"sig":"MEQCIBwvZO7111aTvCQCMHifXAvujz/ZgKZw6Ws/V+WPb47ZAiAfy5Xfe1+W0MszOximfspHX9l/bykzEKT9WOot0ajV8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsovcCRA9TVsSAnZWagAACKoQAJTkBjH8VlRakf/Owz1z\nfPQQyMXRQZ82A239Qx2xPK+Nan5OB4oXAhmYcuAe9CwcMnZTLpwBWor7HVV6\nZZV7z/2llcVbqT0dN05LqPymIVaP1aN4j3h7ta85Mt4d8/M3cGF2S8PyZYt8\nYmSAXg/eI+Xd+d6HdzeJxfx9TB9V7T4aG3zn3vg/bbevcjD9RPvzFk8Od2iN\nyeWPOY6Rfokef9LynxcZ0qtUBDOZeNsgLqsfWrgkoHSJToDQJ21XPdoKMP86\nG+UH3yGE1vnIkjN3CXXbxpJdfKiHTiO6EyyQFTlNpA7qvdiXRw1tdU4GkYI9\nBZzpyHLMjH6QQiCbucr1j1NO0IBx1K/MnYLq1vInK1kb/CSciman7+pOIT4z\nFTsyxP8WDOuaeMLRA/3xXym8Da38vbCpcAfosk3DM8LJ94EMOc9dsrGChjIv\n3hkAyuIaAxWqbqE3BGLGRDEYtKWrIKktw5GOF1ZEj6tauKfwoxg/YDHl5wBb\nwiqQBk/dUOlHSXnd/8dUzQwHOYtFHM7/SrzvXVQOS4OAat6HeCKOjvAPxc+h\nWwBrd2K69kwr7roLfRqgchMLPqoDanCX3Aem1wyqT9AId9zXyb1gn6EoUVuQ\nLKwS/SmQUn5owsCo5zJe4G0oMwJYZDF1hvB9VA42ny08BnXePh8nO6TuKp1u\nOW9W\r\n=u72/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"f506e15f54e79480816ec633651eed0022641533","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.27","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.27","@storybook/client-api":"5.1.0-alpha.27","@storybook/components":"5.1.0-alpha.27","@storybook/core-events":"5.1.0-alpha.27","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.27_1555205083894_0.12894260396985335","host":"s3://npm-registry-packages"}},"5.0.7":{"name":"@storybook/addon-knobs","version":"5.0.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c7480c41e500a0263a1cd84818f932f7173dee23","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.7.tgz","fileCount":74,"integrity":"sha512-DgWYuWOx/wr91fmnJ9s22P1Xkrho67W4IBC4pByrPBdc7fD1YHsIwg4MCqU+CvCvb2kOB215FhkCRoJTUFDdVA==","signatures":[{"sig":"MEUCIHgYS4YrPmIhCx1CWNduLtxVMORwqGkqRbCyYiGa6azdAiEA3eeQCY1zykVwloRW2hYmmjNFDcWU+eUKxpZ2Dsi0cLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1313626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcspX4CRA9TVsSAnZWagAATt4P/28azJRLS6AwMLR3LTBq\nxzlGjq3yE92etv7CASuhtZPt6lvNJaulFUNlCGGh2Z9epv6VGRN1UB1bT99L\n9z40w5WhQwiaq1oTvLNi5W6qZ+YygLv/a1DHn/juypCy0fCs6jyHv50vwnjB\nFtcvFiipRhw2c+DhmCBuEDp4Pcji7zE8PGq4hTuM5cuT+99O+ReNZaW88Asw\nHyI9bwV/K5wHcQKFVFDDGbDhDtQYUDQfSUuv+Xc0cy8tdKqS7VHlbOvhLFpL\nl4rimQMKHaIGxOvTHzQMYAxBkDhv7B/J8JmVfLwHgPHQfP67tDXcNOukCGpx\n9gBM0UMtphtFgke6jD9baUbJUtnQxWl4jqJsJQ1vgn7dqnU4smxbfsykFuAT\nLUU3BTjb3vu16mV+IuL9Yi2ADtp5z64+FojWr4GlKSQXuiz2pf3R3JXnEgIr\nbwRoKom2gmbhWIs6Y7fN7Z7lc5CuijrYuKAp77CyX4X+E+iFjhBZWXJJaJtE\n6dTtCGnUeGfwsIUmBGItkeb18iN2qxDA/OUhYynRMAvCqxiJCU+zYq+AfS5o\nDSGeFC0Xa5WhWD8oSN6qrUwR3XKx4304FHex3b06Sbfv1qOSGSMO0ZYQ8zDI\nRjq26VLb0e8LqbUmR3wgclqUeCml95VDBO4bLem7vdCcXAkh4erTmGb+YBoZ\nE5f3\r\n=I26N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"effb88f7bc652d85535be04c2e6deee8d88e33bb","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.0.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.7","@storybook/components":"5.0.7","@storybook/core-events":"5.0.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.7_1555207671442_0.5110969439476336","host":"s3://npm-registry-packages"}},"4.1.18":{"name":"@storybook/addon-knobs","version":"4.1.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@4.1.18","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"ec26d815211671c6f2aa5bfaafa8d21c4fb2a307","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.1.18.tgz","fileCount":66,"integrity":"sha512-+R+WjZCkQDRv0UwU0Rrrz2EmOG2Y65jrf4S8Itklj6ASlDFt8YVRw7TzHbk7C8H0slQmu8xu0jQdNdEUu48pFg==","signatures":[{"sig":"MEYCIQD85pd6Jm9JiY/DTvXoWteAYcdIKGp9eNwcslHl+q2BrQIhANnm3WbHB8Sku+gclHOrQ3xELu+t6oKaY51l/AM+wYIc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1283010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctC/sCRA9TVsSAnZWagAAA8wP/jitEdCNSl1OsEYiDESl\ndKMQUXt9ZrNJ7Mca4q1x+563fCz+99aWgaoEWMdj67lmlsGEvNaPgstRQUFZ\nJj4DFR4KEgVpPLeOvpakGvLr0WxXadoDH21EC/IsVfWodZil0qC1Qsm7DRzh\nQf8Yag25dosg0O2DkkOTCPq3SKSTond7s11LSwrVuSIoXtiVoR+BId/Zrttr\nu1qEU+ML0cMHDzsVLlPgZ43qYcmJMhqmVMuB3WDJNjraFi/XXMswJ2dB0sWo\nzZ3+s8uHjEy8PCY9z1nCTrQqHvB1iEqrix682g7dJyWqVAg+H1vKwhF0bKej\nQwAetKB9JlWCjv9vvwDhJZxJU3R8Nlij0VajWeta/1N+4tV/ZFJ/0MIWFaVz\n6sUkmFJ4eEieozZAygxAvwwKGR26IV5Gcsyg6KVZjxOZDacjyyhcY7y4+k5w\nX9HQDWN7Wo1e5fiZi8qy32OR0wOXXCqB4zCWZ9jsRszGgjY1NuXDqfoJwLI3\nDZ6JcyEIpPmQE85JijcbYs3CnFz/sD4ss/cVf16p4PIJT2KhCia1G4/qwqaw\nYdfoilDTkvO0QLgBRC74Jlpu4VmM0Tt9LgmKEnrAaXrhjl98lKEb+F0Q8ufS\n0eKlXdeV315BsVAQHC/je4icqpAHtprfthHmYdYm6yOf+q38laWxcbD/X4/X\nadQV\r\n=BA1d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"d88a0bc5c71f06d5dbf023efa58b9f3f0b58c0ae","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","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.18","copy-to-clipboard":"^3.0.8","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_4.1.18_1555312619795_0.7158829190710074","host":"s3://npm-registry-packages"}},"5.0.8":{"name":"@storybook/addon-knobs","version":"5.0.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"6d20e29e409839b6bbfcb7a6063dae683f88b619","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.8.tgz","fileCount":74,"integrity":"sha512-fW6Zwb3rwfOvXXuEwrgAEUpISRINMmTRzkwI6cMclvwoG3S9T+VdU1/WFttwAVmrJRbjb3cNOyFldXNDTWenlA==","signatures":[{"sig":"MEUCIGKc6BCQYL3YjLfcBrQFsQOhNm4ldUhugcs3D8Dv46s7AiEArC+p1RzZNtDpVwvHjnhWE6CLLd3v0lzON3DPxwMm2Os=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1313626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctDUlCRA9TVsSAnZWagAALQQP/1UjmtzDi1Val3GlS88w\nYdPApACLMlDXTYaWsu6/t4LmRTY88bSFhVVKphs5lyDvA96vOGh0/djbGTEy\n2HAZtRpqZB588hSDk4fDX+l68nycHpRUBnizMiZlkHdjH2DQDP8LpPUHUYj2\nUhR0zyjEo9T6iaA6CATnIMic6SL0YEL9aWS8yBEYb3FNSgqxMlWGN17hja0/\nsYtUfHa4fgHItR38jJmTxyXrem8qqiQ9H96Jno3AT5hS6S2Ezr79uhSoEy9V\nz2uim8+30ykUVm8UdYSc3wv3MKHssS7skpvPUUnCavfcNI3MXCoxbQvT0577\nqJYcuroPH74OJ9KJH47hvz/gZRRqmLGwEjyLgE5VzaxpZuBngZkXVDc77dzn\nyvsS5eomQdPxI9qCf2NWTVIfRCK/wyvrk0kiNc9vihSyksaXhXKQTYmmElPk\ns5xsMzmA8sT9n9srv/hjQm9M54ofnTOvanspKjlj2+ztne+mlMPjIIw1mNWS\nLAeJ/bd1b09kdUvrmDtN86dH3wsF7/5R+xYoQJJwQeYSXCz924f+BegcPNbY\nI/jDYkkf44iwNZKhcoNlvEWXwT8HVkiA7mSAi0jEtFiXMGVLCQ2BRCCLZSPD\nWKfS2zaTOOQm0rxRlvgvEuLaj5O4nsdYsW9psz1vA9XyvXk5O8IQguysMnU2\nAWTu\r\n=c1fh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"1aeee184088d7e446d2733d4109ef7ca7826189f","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.0.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.8","@storybook/components":"5.0.8","@storybook/core-events":"5.0.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.8_1555313956226_0.6968569359998278","host":"s3://npm-registry-packages"}},"5.1.0-alpha.28":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.28","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.28","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"b580b74e260763c51985c00c8325b9efb2a79089","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.28.tgz","fileCount":76,"integrity":"sha512-krS571HiATUyaaGKZxh6+5jvznomEpDkL4lP81N27fv1mz7E3aAclOOIUW7Vpi+5mc3yncPEihjaDXFmGFBgLg==","signatures":[{"sig":"MEUCIQCsjMZyQWQEjTPN6mfmxQBtTyk2iaLL88q7IPEoAS9sXQIgbWwiv8pbMH7tlGP2x3gPx9Zh/99YRqH4L/YTogeKH3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctbIsCRA9TVsSAnZWagAA8C8P/jQ1PZSCHq6DZkuQiQrD\nsnT7eD7vDLjv+x96yAWb6vcITeSc8DEom22yAqv5gMaI5INAiuyeOiq7gKXQ\nXoU/YJNHgzaM1CCw4QLta7dMqLo/bQ4hL45N1hgaxWroi9SXSvBLtYyLuyFZ\n+zWV3gqpe/5A5COhB72LJ1v/Ar7MRwE0pubhoXfTpuLRfFfzp1gRhHScNgyY\nffv6EicAlxnifOYMHdRSAsehUBUSmYiCI1y0+8c7biXgd0FhFMH3op/0lqMc\nelvaJK+jq1UviZUnCv8teI62eKu2ZveuAc59VErb2w9xJvz5fGNVqQ696mc8\nZ5oH9iERaOtao2C5ZUK9tvii6if1L5ktRGMD+CinE4I/kd/ESfBJIPccbaAM\n1psX/atRcOXOueRduMw9lNbCK/c5TRL+SZgIjRh9ul43IQ5lzcYo0ni26Khs\n8eZBGnMg9QlQOZYhshGkBL4W2l8qPUFgZb2DAiJtxSQP0stAH0qU1OgDzfXp\nZgIjqKcHBdBt9yHIwtbmWGCwoTAIYhbhJaYxYSqSdJfRvIxa6vgye+yFDVX6\nfMb2m9D1vh+F1+D+x1LAtDJ1XJ/bmQ8SiNhr1etWDwTD4Mk0Sch4rpZN6IYn\n110/4S6/GHoOcsncKpEFABtaF0gqrsODn4I9C5hDfCfmXhIxOVQol1rLEaud\nYURv\r\n=H6Ir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"2a55ee012f2243b7d7b24c192a7070e3d2824ac0","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.28","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.28","@storybook/client-api":"5.1.0-alpha.28","@storybook/components":"5.1.0-alpha.28","@storybook/core-events":"5.1.0-alpha.28","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.28_1555411500102_0.11249534698867691","host":"s3://npm-registry-packages"}},"5.0.9":{"name":"@storybook/addon-knobs","version":"5.0.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"1310822a0cccc3606fe28e9c42e30982f28cf90a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.9.tgz","fileCount":74,"integrity":"sha512-ZMSbd507Brvsn6Flm1V0DQVM50ZtbBlu5+wZRXCMwBA7D2pYVJbjwYVdRl7Ms4RA4g6u3GzRfzCPIXefs91qbQ==","signatures":[{"sig":"MEYCIQDA9sV5vPSRi9kBDVcSu5Ct5ao0MVIuHAanFeNb+x8VsgIhAN/vdrLiFAcxpD0Y4+NPP6hzZZSO0uEeQXTg6IZplEMV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1313731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctm0ACRA9TVsSAnZWagAAel0P/2F1hOVJDdPNYbXCHpa5\n6VOeSNWjuelnDgEwkXg0hig6pug84Qg8AsC26gQmZDEZ7wBhkmBHbErd292e\n2MM9j8jgL8/eBPn7/ONrGgpY8kua6Vf5dFfLMNUYRuvGnQO6LmT5o7Tltbp6\nqoKAtTMe9qQCaj8/0p5aWIBm9hPPm2DRyeGAkHH3Y96PWNQbJca33EUMD2gN\nleeC7GcqyX/zI+wy3JqgbYNXB9G6QM0Fm2nCJ9y1/t7XbZ/AezJv8gbE2ojl\nHgjrrmB7rdiNv8nJZ8liPazQ47DQF4VY6X6cYRDEKXYHj7HSrhNpusBnUb8k\ncrakftQZq98E7FpG6tWgjT44FhCXAHDJx5AnMuZEWJYPabkaNsFCBvBAJglt\nTMkS5xrpjLk5k0tgAwhq+sSN8Fc8/WIqqJSnNgSzoYOsodpCGXjMdLRYz9Ex\n0GMG1BSWKvYrcT//XmbUy02KWo14jWge06sXZ+/8LYpAOh9AcVRimlgW0oZ0\nyZZXm1mjr6IA6p8rZFXzq9LcqmbC717k1IwCp2cbDV0F9ybsoK6rYANm/Qxg\n2tRCHWI9Ct885KjaTCyo2LBaqCqMPRUAZphRrt8oUjLXMDUnhovbbIHcgkA/\nEChdgsa1xFHtF6e1BOuCQoiIHEKRewvA4jtJaa9+s5FpqB1G5x4UWBj6GBRi\neTpW\r\n=5w2s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"51fe8ea7cefd14694d130f840371573c0e9bcf23","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.0.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.9","@storybook/components":"5.0.9","@storybook/core-events":"5.0.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.9_1555459327686_0.003914548053947531","host":"s3://npm-registry-packages"}},"5.1.0-alpha.29":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.29","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.29","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"79adfd781a59d37a740b37a414179e797b5eeeda","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.29.tgz","fileCount":76,"integrity":"sha512-rmAyz1kcnegAS4PGx2N+0C/obJvxSoVDjewwVHfrhXmHrZHsQ/qS7Vj/yYxaKq9+Z9iIaHybkwQEr4+dygfaeQ==","signatures":[{"sig":"MEUCIH43knmbFitb/WQWjt2iNW+49YQ4JHQ2UjtiJJCOuehHAiEAj+INLwvq7RRvyklCoVVcvblVECI8O/5Ii8ar7u9ZFtI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctuTNCRA9TVsSAnZWagAAx+kP/3B8SkYEL0BySaFwj7KK\nOHs18xWa5Ai9Z2Q70ha/gCm2ps+g1W2WfIJH9XEHGKUiCInCFIyTnRTo9MAx\nExmx1HUaif02irjVjDjueoJZBLzLkcrh+Xt8Ej7d9k9WXWF9lu/3eh6p4Pw+\n9uXOb/ub8prs/hA/6jiQOFhRZItty4APk240sJHIZgSJaT9yYzsChtkbHJum\nPxKTTHY9Kl5Zynchpzct3qXEY2hlWWdCuyO/n7L+HKtWixKzaIIjjzqJxHzX\n5EIY35H60y22qIPautthDgjYk42EtWDlFAOd3jPCyxcJQlvzb03cy50Mm/cd\nxwu+IDbJW9OXDlW99ST6x3per5mkJy51lhIFj+Hl9BkcC2tEZzMVFFq0oafA\nFGp/OXXolnDwvu3W6IkZ45grpr0UQbDM+fdppGDlHkjPHY/CbPi/1wmCHB3S\n/wMDws420oVS1t6GiOYGvHyC2a+OyDM2FtSAC2R2ypwSm85abEbZzUT3881x\niHyawpuumbzpK2riTdLtwX4mPijsmhY+3FFuV21PXYYpd7jiFqjPq1OxcJ0W\nGuMj46ookxjB4I4RrCd8tJxACxaPx7R5cp6eAwstj9iW1hI3/Z0J0D2yENGw\nDod/itKRjuNGZ142KlP1ubqauOg7osAQmoFnE0sWJH3NokJ2QIXx3Blayrd9\nXxjq\r\n=myxR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"93978131030d52c821db049a3891402949a8435f","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.29","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.29","@storybook/client-api":"5.1.0-alpha.29","@storybook/components":"5.1.0-alpha.29","@storybook/core-events":"5.1.0-alpha.29","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.29_1555489996219_0.9725673388615312","host":"s3://npm-registry-packages"}},"5.1.0-alpha.30":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.30","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.30","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c4fa8c3e0be3863533e08ef6266940088ceae134","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.30.tgz","fileCount":76,"integrity":"sha512-yPRDDPD4T/ZXTaFXt2hSqxPGXp9sdNO8C4omihT3cQuCXKarzT1DrNxUeiUv4cfhKHFO1ihrJwCWJxiDDb+LuQ==","signatures":[{"sig":"MEQCIAc2oNMHgJfDuFj4ru1fPneQe9Aoo5W7HGr/wqokyoVgAiAv15R0n6d0j+FB7BHVwAW8P2G/KWAyH1dCmiXO3afqUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJct9HBCRA9TVsSAnZWagAAkpgP/RGaLGYTMpWXOITPsCS1\ncHlM42DpGRyGO0aXapc6g5BZRGYjywoMJYXa+vhcDsoNHNJVpKZs9AdsxF1z\n2atLs5fBXuvA5eEOMqAxVV6Wl1EaufcYcEYhDpvSwAAutz/8d2K8+JNIEJgB\nDo5wAD4MDy/nfO3iZRHL5bF4feM/GsUdg4Jvx0KAwE+23T2SkWuFEr1EQl3/\npSqh0r0+ObyuXTzVI7j2RVQnJQdS/6+ZS1QilKl2S482trb7dug+Pty4ekNX\nF8rBUplysHainym+CpoY9brYcOO+Ujj3QX/RJC697WmLcsU3Nh8fX4oHZ6ex\nE8ND6OtV75bcnVulNx8Hr81CtomoRNGKvRg9FhJThtksmcCQGdlI3q2fq4I2\nnPdbWA2IgyVON0pkbQ77glZmFmQOe0kjBiWU/W0S8CDN195dmIf3j8TsGUdn\ntFHZsaofekTo+TbUtCL68gI5nDlPL9Om1sR0nucZCrR+BT8Vn6+HK8nsrQP1\nNA+RYmrP6V8EzywXrOvriw0Ju1v/i5UffUWgAdrvbEUix9RXaF/4kF0Gh7Ip\nZO48fUUBesUL5oJKNnfozR255n0HElYcRSXyCByvD9mGBE1y/yi18HjqmAOa\nbVE/w6goYiEk9rDwlBSMRgSLr55Cg1iE+qCNJBiHLpKtYwdzOjy3lHxAPcez\nY04C\r\n=vz7a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"da66766ab9819d0ecbb5b6bd5778dbdbf21acaef","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.30","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.30","@storybook/client-api":"5.1.0-alpha.30","@storybook/components":"5.1.0-alpha.30","@storybook/core-events":"5.1.0-alpha.30","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.30_1555550656474_0.11842609506446311","host":"s3://npm-registry-packages"}},"5.0.10":{"name":"@storybook/addon-knobs","version":"5.0.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.10","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"6c8828ee188572ce7ba2430846e875318b049cbf","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.10.tgz","fileCount":74,"integrity":"sha512-5HIncloKy/cj/q2RoW2b9Xe5Ew41v9wDSN3XLiOgsr1TA1uZslStoIfvhuHT4I0rBFTYEgjWebBGgnuY7vvZoA==","signatures":[{"sig":"MEUCIQCiWxWi4CcQHSi04Xqz6zqRGJ+LXWNZl3LmD91+7dG/bwIgdMkXo6OkR4sRsr1Be5kvLxYUTf1sioYLDQwLpUmrwJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1313736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcuBSXCRA9TVsSAnZWagAALy8QAInVe17g45uDU5lfNdsg\nKE+px86mbs3R1TNW48bLeGv/X5FUIMlN0xXe9DpcgOYClvuaU7yJpjv75T+i\nzBsZiKKVz35ILiTGlEy9+hise1ZeuZRyE2haXG5HqY4O/TeQ1teOp/RLa2dE\nk29uFU4EV4+apYEqds8QGEDIWBq06Ci7WC+2NpLxnasj6eU+8cRez1fUWS/H\nE8PdkK34p1bX2CMzpbR+P4tIFcE2YCgKXOEmLlKST7xny9NUuOeq69/GgFsN\n6KYY8j/wktrmhx8sYZxWpyRe1MdEQDUQENWoyMz2cDz7KLrLZH2oG+lGDNxO\nCOHB2HWJzdZ1OnmEFz+ROv74pTr68exAbOOBuslKg8b1nlncjfGn57HgDIq/\nEDcfzPJdsYmQOgsrPqgs5tm7UX4woGk27ExXJD6YY5tb1c44oY35RUF03e3l\n3/P64MGAdV2pdKcldluUyM5BLyvOYRVpNcODxIFh7PjfOQXP/LGHl8Cp/IaM\n3AthEEE1jrlP3G7Rcu+Js7tPr8NLb1B9zV1QwkQjvRSKxfym0W0++YL3dD51\ncPLqwDOkDWCU1MItBaxlXBBZHuCrtjq7vH/AeDFhSlD9ax71vzcI5nvuuhwu\nV7Vv6hMIioaDV3gLK+YJQAXQ6MFQqLOj9iWFrfdY83XfpN3T50jMW1npL6Lm\noEYw\r\n=ZfGY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"4b2d44172e564e4ac09eac3dddb7908e4cacb046","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.0.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.10","@storybook/components":"5.0.10","@storybook/core-events":"5.0.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.10_1555567766659_0.4174748882043904","host":"s3://npm-registry-packages"}},"5.1.0-alpha.31":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.31","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.31","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"778c6e29f0377e8f0f01eba01a2f3c5185460968","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.31.tgz","fileCount":76,"integrity":"sha512-7hf68R6CVqnz1YAMDvoB3bzIxPxIwd/Xa/VONroaBUwjObkMRor51/SXbxjD35EfJQ4NbeUXkN0s2REs2EfcrA==","signatures":[{"sig":"MEQCIGN4NVRtuhzx8IdEaA1cffucdktPbGQYB9XHaSXVQJ6vAiARojLJfZxse0BXwAxlGmIEwTBtKmR1PKrrh3tLXILwUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcuVYeCRA9TVsSAnZWagAAcrwP/RfmJZEXNBJBoLnaBG6Z\n1BK8rnLNGFMRyJSXiGZJaQXa0UEnI5mTTRA8uFSLxTREgIGfFQeJ9eJ6wx3L\nHv59R1IKsaM5RxZq/BzTEJxLy7kvribmYPl9m7z/s4Tmsxc0vTdNLOhJKQoh\noNYVNCvXi26Mo14L3D/HhMtZ4X9ZfZVyvA4DHaS694AtzD4Mm1h5Frf2JrpP\nFuodmF2t2j8Zz92Y4lWHobkxkcjTrA0joCmECrslti81cuuIQkspJeU/vHBc\nUCG0YBM8YOB81G9vEt+USRWva+YSKzak/vsyz7ZPNhlt4K1SKFdSIsnkPEiS\nkUvUBPYrMnKYoJ8h316JFl9u+qvBRm8aOoiIM0Pmw9tWJV2+gKBtJfzbiLlv\ntIRVcM/2oNBR8KrElTX3J0RtGnBGsMiWNXiOtiFJnIdxPicr8C0P+jlmKo9A\nIh4j8JAnX6N8sG3hZsrZHOQf6vQVxuXbx6h9GB4Hz/BTTYOWH+WzSLa8FYPN\nGcuyPg1auq+HTgZ5VJGBOzVW1wycV4qVnvLbECk1rXtp5gOLsjTcTp35oKv0\nm18jZxCVrWT388ifkm5YEtmv7oc7Jc1RPscNI8H8JWV70OS1WAuxZAYYmAsO\nwK9lDjmt2LCJlRbET1A2sVMuR6to32lDcm+6neqV6G3WBxayWkqYqJ7aYcya\n3Rmd\r\n=Vvaa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"72d852381151fb01043202d4c24394c863312008","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.31","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.31","@storybook/client-api":"5.1.0-alpha.31","@storybook/components":"5.1.0-alpha.31","@storybook/core-events":"5.1.0-alpha.31","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.31_1555650078143_0.5861487614411087","host":"s3://npm-registry-packages"}},"5.1.0-alpha.32":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.32","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.32","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"511db9e4c2e012274e82a341cc95a1657142973c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.32.tgz","fileCount":76,"integrity":"sha512-7EdldL58zhX6OgsCz4ewJsbopSpHNQrxLXJWDAjRsV61ZvldQtIphu/Rr2Jhhpgy6smCDCgoyRRIsb/jm+ID4w==","signatures":[{"sig":"MEUCIQDyVcVOlWjivMyuf9F1qGwM3uMaVQzegqpkCIMt+eVcjgIgOEZLawxUosGiRRMHgIusc1nYE+OtofDXNeOi3PUX+T0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvTNFCRA9TVsSAnZWagAA5TkP/RhotNVnLsZvqVKea2oa\n2vY2h3FhLigatv/FnF19EtgS7Ddzur35IYlFhQ0Fu/mb4K92cOW/rBmLhlVc\nPUbEOLe3mv2st5XSpiJGOAw9+bsvXalnB3EvQ8hm5TbvbxkgWJ2tFmiqtYGZ\n7QpPJkkT3CFRNUy8A4EcR156Ktme3nrsWMhHsx9A77ZRg2UlTq2Ga1Tz72lz\nd6bL6v56g18eSrTn3ZyXEmRqw8/ZkCaOu61NLEZdiDhRQXpd5zs7RctbVOcB\ngN/vz6pdAscRNLPUDfCukwbn9i+JjTnJkwbdAPApQptjXXhZwhILBHNCJZaz\nQgfJmmioVg3gYAPbOvlM+IzcZA0s3Z012EDYIMfkImGvCi+b4vJN/qyNN51+\nQfLXPQ73OAyVtJV7JbkDcn0lCV9iUnn0ovf1l5fKD8+vzGz70rbo37sgHOtz\n2b7Fr9eVHrb+ObGiQEBew4wFz+PWrwPwc+4PqInQnWxUL6wbqIirIJ0knS1J\nOJFLnnuG60SJmYeBArVTn/v2VvUlgOLmxdpgCaWKFsrynsjpMcDnDBgcJeYe\n8YmOuZf9epFI7wNj8F2ThCdhkXYu88AF3BqKjv3rNxbudtY3DqWW62CWMf+y\naH/S4ck8Z5AZOCKI+PBHb2kGbJYF86/HFsKXjYFn28Mv7buMvV6llY0gv3ng\nTE/M\r\n=Ddj7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"fb2798685de5c0f45b40bdc1a1151c455bef850d","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.32","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.32","@storybook/client-api":"5.1.0-alpha.32","@storybook/components":"5.1.0-alpha.32","@storybook/core-events":"5.1.0-alpha.32","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.32_1555903300794_0.4321666934981867","host":"s3://npm-registry-packages"}},"5.1.0-alpha.33":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.33","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.33","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"f2c7b7f72b16435ae0cbe82583fbcafb74b37163","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.33.tgz","fileCount":76,"integrity":"sha512-xnN97ghEWgd90gs6hL0pZdng4I+4uyI0DPzsOfT01u3ANqkMOtTwI2HwC4gfrMpw/AEZQt088m4z4GNRXGiVJA==","signatures":[{"sig":"MEUCIQCfPUyYGsBaxCR6EMU91IuPdQ+3RMYplS/HHyKZSzZCmwIgVN6lFSxGjGsc+ktMRzm6y+y8EShc2552Smhqk9E3HnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvrEuCRA9TVsSAnZWagAAoAYP/3mZmuh6vfe9Ao3lKVfE\nIJNWCaMYJ93+mtx5xGr4mudk+2kaNmC/V6n4hJpIEKi1SMKpPqXuTGIlAcvv\nCiVz89AjzqVdcc8ZY17RJ4xF1xFC1GtjEjCK5+jQmzAeWcpXLTNyIGIMzz6p\nT4vg8sC6E76yiIo5R2qDUiVlM14WUbbFgrwNZeytFCjP/SGMTQ/i03HNb/Vr\njYYFLoOfUIKl1WETjDlNvzA4m/4uTZJqx0Lwh4wGKZDucGh6XNQSND1BRCcx\nOvxYWjHKC96S9RXmwSyQDADD+lFsWR3BZ+in1nreluh8P2Go4brIxVg3/XFr\nHt2XOJRQPa/K8AIG35j83A/93xoS3ZwxukyslMWADpRZ4JYYjIOBV74cfUyJ\n4FaFLtymQOOxkP6+9BXjNyadSjRifwOwJbglWWmOlUbT74vsNjcB67fMw8Rg\nZSCuenOdKbXg4Al4kh//3icUmHvLJogj+HGqMgtRBpkxeeKJDM6cHKPdBMY5\nygMJbVGePeO1ci4oReOlT2LaBdVsgstt5RnLu1tmKYrxSUiHgituN3EpwoRy\nXrh6kpUfMQoG04RPXxy7Umw/DsiEaoGohegWF7Ps29tGC36eRtPy+9PVUZ9a\ncF+/REumDVZY7gBc2MjWIke/5fNrSYQjRBCIWe8rhHKDivfiL86WZ/Rdmi/s\nmYUi\r\n=QDG1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"23268e4fecfd76db92e85b270b689368fccf8caa","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.33","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.33","@storybook/client-api":"5.1.0-alpha.33","@storybook/components":"5.1.0-alpha.33","@storybook/core-events":"5.1.0-alpha.33","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.33_1556001069531_0.1830170767884154","host":"s3://npm-registry-packages"}},"5.1.0-alpha.34":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.34","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.34","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"de2dc057d6007219b0953ffd2d06777088c60b30","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.34.tgz","fileCount":76,"integrity":"sha512-BUrlD7qWJ01/kCbG5ESehEP2Wia96Aftn1joRO7agRUjIunnveCjmAJJhuv298FqfdRValvaDKnuKj88BxjVww==","signatures":[{"sig":"MEYCIQDp44Q9il7St9FEf1YRRtPgYxtt5iHp9gJJu+5CVdvu3gIhAMv/KIS43UdAqVYOH11E4ooj8NeI1roCN4pjfxp8Zb35","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwHv8CRA9TVsSAnZWagAA9OUP+QCZXXr4qz7R5xZIWJgP\nyk0babbnr7Gwe8casBDrRjVolPzLy2o+P3LA9uoezywO1i6Rl16SK8+675He\n32HyutCxyU7YRZvDLa6s6BylpSNzkvle78IBPjun1RP9gMuREGFRygpTerOC\nBTaGUvoKAkf2XWBaik8T8/Uyp9tUJs304nTB56uk8eQVUfDJ5dpSkWnfdOAN\nFi2ZDp4AvM5LhGwgMZoX1mM5qLC6xEGSWAXZLEbDUPBuUMc5NoWEyKxBlX7T\nSs9wZL8/bXJFwcsb8/mPX4zKTw11LHcWu/urTsBR8MBuVSvnGzbpeMKiTI9k\nVBx/Pe2pkxFeBYEuEhl/5O5wl9bAhwclyOye2peLYCSl47XjWkaJGnVVlQUZ\ndlnGeKjcZZP9MRSrmcUj7CSBfqPbkaYFPCMiqcP+xr2n7YT4sH5TKLyPC2LC\no/xkLD9lLtmpVbYSVjKhiqcAXpYTxKqC2DVQUJrhFhXLgXNSIFnYvsQU7N7+\ndtInpgJkt6GyGxhY1yDCTIE1uvYk+i9Kuzv1/H8bcyT3TufgfFq2aUbPXoBr\n6D54GnibG73PsuP6ESMF6UuQmValpcdjxR3D869ca1lz7xg9Qi8h7hIlGm/l\nm1DeEuL8VOuEY72dnsFoP2CImHSGDEwrfiP2k09bgW8UR8c4fjW5G5O6rvd9\nnbVY\r\n=aO10\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"694460c087326477e6a71d8f1570196739c23f22","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.34","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.34","@storybook/client-api":"5.1.0-alpha.34","@storybook/components":"5.1.0-alpha.34","@storybook/core-events":"5.1.0-alpha.34","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.34_1556118524068_0.4019559089230793","host":"s3://npm-registry-packages"}},"5.1.0-alpha.35":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.35","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.35","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"58b4157dc45e49e0c298b3b47c5ce0a3a3f1df4a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.35.tgz","fileCount":76,"integrity":"sha512-pRNIMlsKe1ivUR+bjojn/pZB1ZU1O0IAHF/lnzBAnd4mwQs2hqFtD9iQyQN1vNa1kBK5Q/krAfIsiK0YTWeJ5A==","signatures":[{"sig":"MEQCICehKt19M2KjNYjHxsyXSzlVshdNjgZAQGRgik0XA7VhAiBvL2i3+465cMKigY1ymMZiNaOl24oh0GQbb0qHdSDnpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcw0EfCRA9TVsSAnZWagAAj3gP/R7XdxtsZsmHOcmqCNQl\nUzKo2efF69Ghhlp8cRJU3zSnNmneHd84REDPC1r57qokx4RslSBC0gPRmzyT\nDxBopVqou0y1UrS70a3Cv9GaDY87cOIRvqrcGqOSNchM5BA1dAcPOvenYnlS\n4spvxgGElutYiDjoeiRpY+8dh64AEhsjHfFvJLdy5mjCeEiiu6B2T2Fm2kDG\n8ApKzwzLCHVwoTALKuxeAhhEriGKrtndGQ6ZcdjPGgRZUWYKFoqdjIxvqrbi\nHKd9YnhH5+Eh3JRL2wCKuB7JR+H+/Dejx9QYZYFG4pu8AjR7ciH41/rUYQZe\n43ERcK8mAJt6xFEaV/+M09Qcev2m43B11nxxCEE6t5pRKDT2PUtXrk8VFYIz\nv0cfTYxo+YSHqV8WgKQHs/ifzgvDc/nKBzC2P6bum/vjck9tp4QrxvFEBhxT\ng3CVR5+vFw3mM9t0mQ2yWsYmp5OIFcExcGCf1JBARuqDEuWjxQKuYEif5eIW\nQEqshCsWFtzOv8OKGECZIIzCbF4kOe7BwvDn1bn966xRtC0m9+z3kvCbKuhX\nu/hErUzs9q2YnTS2CKB1H9tqRijor5aRlnBIk3ouXN1cRsYnpwBFbXPW+VGm\njCA30qxXyNuk+EiDApQfC29dzDoFkoItI0EZq+lhWSFIVVuTS4WzhbAn9nZ7\n5/FY\r\n=4hcS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"e20d20a2635b442f47b95a4ce0f436491c0effe1","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.35","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.35","@storybook/client-api":"5.1.0-alpha.35","@storybook/components":"5.1.0-alpha.35","@storybook/core-events":"5.1.0-alpha.35","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.35_1556300062631_0.6629052089605403","host":"s3://npm-registry-packages"}},"5.1.0-alpha.36":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.36","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.36","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"fcb97fb8f5896279bfedda709f1dcab9e6092ca5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.36.tgz","fileCount":76,"integrity":"sha512-cuPP9Bjc8C7QjfRWpkgtLYKlwWTH3NdImSvhr+Ps4OqcUzIz2uGBVAa4SK0zp9rXj9iZVHwLwEADSIvekf/tWA==","signatures":[{"sig":"MEQCIBTx2iHPUwyHMrOWQVjAx/39gCAExf5m51Lr4O3BSfDOAiBenmVbXLqZQNB1TjqFnzfX4M1rMQ78awjJ12TomgkxPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcw+WPCRA9TVsSAnZWagAAkMQP/27cjoacNARxVPV+o1/1\nO2kuRDP8CySrvX8e1JVkwzkVWnigVpbVeGa+Gwd1XaKtEb9tSUSFdgBTfAjd\ntUeG7OaXyVusm03pnsfRpIklY1JSuPUe1hhkz7kZ46rdAU/erTWcEMlFkPU/\n75qQHuxTLJdEpvHIdmC4VCwjfIQ2urailOgWkNO11V91THeJRe+ZAeCFYD6E\nE5mGiGOIx5HDZE+eFis1WhFQ3BebUOSY1OgfRVuEsYZNRUbqzG9NBWpr7CRz\n4Eu9Yb+93c+Po6p4EB8131JLuB8ddooIjXtatD7ovEW0MP8GdmlrYqDx8PlW\nAXjkTnZHu4cmLuqDUQ4r0jjDBZkPspnaMX4b/ci4pCkMCQGTuimBE7fOqNdM\nymHSIB8FNTxaK17AY3U7o3n9c3dj57CDuI4sKb4WhSZYrcf8SFJf19Dz4o10\nGkVaThzsbblWacfQY0LNI0XDs5RgGju9y96fgj1+BEJ1lrpzJ/cY8WOYjKIb\nMsGu6LMYLvxjLQjODqYmCpMvP6umkL7wZwiUmDvMt2TBUUCL1xOdqkuGlfRt\nwQiYVSRWBLAJqk+857PSl9GGEF4gkizv+7WjyM55owryN6jYmPRWdCvI7Lam\nJUZK4ux+86Zsq5NBb5N7T3hprdkzT6aZpQAFi7xqC/KPCA0GviIJd7keDwN7\naz11\r\n=5uhn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"dd97c370e7f16ace596dc42a4a6b1d7e37a4837d","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.36","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.36","@storybook/client-api":"5.1.0-alpha.36","@storybook/components":"5.1.0-alpha.36","@storybook/core-events":"5.1.0-alpha.36","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.36_1556342158649_0.7063336242744196","host":"s3://npm-registry-packages"}},"5.0.11":{"name":"@storybook/addon-knobs","version":"5.0.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.0.11","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"1f093560ceec78f4906e0575ded0ac03b4494b09","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.0.11.tgz","fileCount":74,"integrity":"sha512-9/Q88GhzISxue1wxvbfVa1e8kBA1V6ny1eXWwKN1TRIfBRk4fzmIQtgKMf2R9kQ1VJCzzPHs1sHEpjjvSGbMFw==","signatures":[{"sig":"MEQCIEq+8uGjEBRsIoEeRUzQqvrRrhXEsYX7tamDwYiuLOjeAiBQ8O6o15R7ki1f/Z2NwtDvAQPv5Z3mlkEeRjNhzxjwGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1313763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxRqkCRA9TVsSAnZWagAALhgP/Awnv4DfyoyBzVsXu7NM\nVekp5uIehYQFyOkRnH4ND40IZ1u1X02rkk2eRNMpNtqLyCmrovi2AzA993BZ\nQdE8irm7hzylpOUi7xcExt5enj0At3QaFaXCpdY7pcKh/hVj3oJgO+HeTnYN\nSIQVngKv8kQi31cGa1egInTZo63TlUAupSNv+0lyA3KzCv1b++uTC8ZEy7/2\nrXCY3CPIKUi065PTDvLGUqnYUajB633VMr9KVBDiA4OYM568bmaG/9ijODZG\nwhHe72gsS3V5q0DDfoQ2nc7vk9nyJcdk8+Gk1hRreAl2eHf5pcPgKDzEiaT7\nv8YcZ/H7Cxs5YPgpw2nH1qcvSbS8D4nobfb5TKoMFKGvnvVWZpONAoFSTVt8\nh9/s9WTMv9RfDpURKxWPck8rWvejV0EzVBW/UOIq6iQWb96Zcj3Fx/tvpMp3\nX94W2wtXw3mY898rWpaI4EMReQnrw3CXLcl+F5t8DjCx2s1fnFRw79W0fJDt\nYOwbmIgCvkAZ8qNe58KyKdMtuuckIT9GVbyLozifbTpffiKg50gaiM09mC3R\nd6iLZ6FnZrxFSVWLHh3SoxPNLNrvUzgHuoqppCqD64GF1A9Fm8A6qjomGcRB\nA49xm0509wqJFYiZRFvjgHXUQENCuLMNb39iTh0OeFm6wIIqAcxuN4wOfcQn\nJQnQ\r\n=HEwW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"17b0a5ced1a92d47420a5e32c981b4746c0f85f4","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":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"lerna/3.10.7/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.5.2","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.6.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.3.0","util-deprecate":"^1.0.2","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.0.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.0.11","@storybook/components":"5.0.11","@storybook/core-events":"5.0.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.0.11_1556421283955_0.16941648975442347","host":"s3://npm-registry-packages"}},"5.2.0-alpha.0":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"d3771677217e9414f0111a49a4250ba7d76f7b0a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.0.tgz","fileCount":76,"integrity":"sha512-2YWWUB80Dp8MyATOtLN4LzQNTygO7HS0EaO/iweh7BMeq9OoFabFY+EK3xDQNWSv4U/YNMVFQPlEnsYCktnvpA==","signatures":[{"sig":"MEUCIA7B+G2TVjBD6p19Co0SWqipZuRKpmQFmhYkIinuWxdkAiEA8UXahe9P/pKX0FWmfivpiNZGHt9/f9rtebXf7rxB4ew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxwqpCRA9TVsSAnZWagAAW1MP/1h+u4SIXp8MH49IB8yD\nkd+jSMqbZxxMJRt7aYcu/qHTkoJ2oi6vyT9Gwf2KbtQfZzAfoFpUxUXGitY9\nX9Pl3TIQfavZrJ4NK+Ln3HJgDfeuf+UTYP8Hv1rC4yM62WxtE38WoGTV2uBu\nUFaoYolZP3mJr1nNUbmGxXHfVPxI8yILPAlPYAa0W5IHifmMUb9Wge2lE9zY\nLA1zLR9QiPC9fHFiIPFT6PC2QiBCugJE5LsvjV5jvoopIKbcwognSd2K96oO\nqtGVFSZqr5MDAVxzi4tcG1LCLsmdmK4g2EELnb1sxMhef6sgnfkh6i0molcG\n21dXs4ACVmAzM1QniauQP3d+xRt9zK9cHqQRyngxO3qwfc8OGyppIXqZ3/03\nrq1aFZUa2pzNkGRT7NEECGGW5AeXnIThL8UiCAPc4H6vTZGIJKaxIh24n3Mh\nPNosN2K1P1T2xW/fDe3vnTnSMRSmm52Th5NKMci9HWtYyDzAielUjjlaGfST\nPvqm7YJmT1je3F1gxyY59kY891T1r3jsAW0FiRSFJb3EUm8AuIxZUDxe41t/\naUpThg3Xcx2I7Fb0esn6lQIceQFEMaPgEYQsnzJVVcukUvC2gRY7fypW0KXU\n+5z9q9IdN2BOV9ZEmVw1vqBvRZDgzetZ58WvoWr+Wjpry67HjFb+zi6/0GUC\nbtyd\r\n=h3TG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"5366b8d992e80862f2c337abc2da70b01bad8b12","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.2.0-alpha.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.0","@storybook/client-api":"5.2.0-alpha.0","@storybook/components":"5.2.0-alpha.0","@storybook/core-events":"5.2.0-alpha.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.0_1556548265261_0.6897954899000371","host":"s3://npm-registry-packages"}},"5.2.0-alpha.1":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"418432acb4ae1cd88f3386fb5450dccb1db4a44d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.1.tgz","fileCount":76,"integrity":"sha512-ZnVIZVt39gumVkFEVfQLrvfClqtmlDKG2arLmfybw5X4h/GrM11Y6HcuqhqalBrKwN7kKSOCEtO5hiFicejquA==","signatures":[{"sig":"MEUCIQCuF679VdThnXrNWCGBwpt/BKdUG+yI3GQY1k2wFhVe0gIgAb1NpSS5vlgAhRVuE2eJ9lZEYUEWFxIL6iv/wtBiQvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyCaWCRA9TVsSAnZWagAAyIQP/1xofexboW8dCE5ar58r\nLFaGWiFeNfoM+gax+jQU1UfUQNXdaKJTUJsF/qImIn0icXDQPs7x2jM832DV\nIH1J0JnrhRcg0ciOHcPEmt+gW2trua+hTuYF/06eyqIhyN36tIVpcuD0p6v9\n1e4z3uW57IQpKNZA+A/35fwbCEiAYXrMiP0/m5100G5CObRSrmBHkaogzXYx\nyTYAzXMrETtY+bL0KUV3Fo9Vf5E+trVayPwTosVXZVZEBNMgr6IRq3Oat4TA\n2LYaTKYVA0Wr16etjytkEBHXCrN2W6GzqVOSk5RsYP0Uu+eLNfsUZuVu7Xfd\nTi+2pyc5O/UsBtLhiMYEbQtwKhwkPKjWeY8l5Y9bNcu9SRTF0GHYAyYACU32\nXtnKib1lLeYcFWoRY4KDuLzM0mX5EJQd4MHKoY/1zRg+FvPO8x1+YL4ashW9\n3vBTfqIY4FOMxJTCBZy7+r5Czne6sSANBnfHB2kvS8YnggFrFmY5d1U+qUqH\nl5WO7R3Z5SHp46XhzPsVW9DaAAim9Q8v7z0qEyPuUUCgpFvNwCwgL6b96cor\nAKK1hkaFKO7G4jYTqWsFznxYB6H3qNbwOhigXWPNdwI2zKS5PuzLOJ0kp5Tj\nQNhWgLgHZPAgQHszAT7zO+X8ABQNrWc9SYBsxXIeyMp3anzDpmGkChI1Q1D/\nVEhf\r\n=7ona\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"ebb70bc8946f4bf0cc90496e8dca45968f681909","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.2.0-alpha.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.1","@storybook/client-api":"5.2.0-alpha.1","@storybook/components":"5.2.0-alpha.1","@storybook/core-events":"5.2.0-alpha.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.1_1556620949191_0.7769650243736237","host":"s3://npm-registry-packages"}},"5.2.0-alpha.2":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"25e54545ff1cbcdcabdfc24a422dc54f35e06821","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.2.tgz","fileCount":76,"integrity":"sha512-j2Uz+Ani19UlLGy09X+v+ahZ+GabTyWW9PJ6FAeBaw5a1bnVOnr3Zctke7pVJZyw+sxqKsoUd9SFy43B/T1xPA==","signatures":[{"sig":"MEYCIQCTWnAC5PDtgNYRQu3ipR+Wr8nyWos2d1JfaZnmt/jmPAIhAN4keXCMAT1tyGD8d5eBWtgicb3baCNS++9iqpf/E/TW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyDooCRA9TVsSAnZWagAAHQgP/3Fp5i5DppphPN6677/J\nttEnWqJ1FD66/i0/XmklWhTslIwN4zcHQDbTy+Gmi7izDo/t7acfjN163gZb\n86VP9JsYdhXCA45SSwogTsqxY2IoPJ0iylU1oHVRipXw4GsWHs6kkKcNcAEK\nvJTGAH0TTQeg5xtElJgPQywBkmGzbXarTp6Aj0FWJtC9rRo1VDackFmtwgIe\nhngI63+lhrWl5dRM5CvCLowXxlTJCloUAoS+GDJkM/cPdQEjh6XEbns7IDnG\nQ5/5XYde4ya0optm59jTyZF8knqyGSnkPX7jqTCWnNfswUPvG40cGYLb/IdK\nRHH6gtkXPVwgTCp6k/EpaZRRZ5vJ3KJlsQ3/OAFvzpDR6T4Poa+iKiQS2Fcl\nWkSqA6wishT34erCCljJGyaTCvW61e8ud5mYf+pwDeUeiJf/IytSNke83h8C\nC/hMB0UVPrrITNl6F7y2XFsTTEVLb1tKRBcCM0pq/3cMaVfKLoVJe2F9KHb9\nC0erOTqY/BB2fhpUN2iixCqjQMypwIw6B3qiNgS8W9zdIgp5t8viSfyFrxST\nMmFIryQtjcWW5SmZrGg4TOLlcIcvsb9hB96MNUYP65bcEux6m9HI0NJrxhHi\nLO7o0Ltn2VEEsyo4/jXoR2HO4oyVM+MiNJ/2WT5stGx19vPs4HN0hw5NvfQB\ndvO9\r\n=Mw8H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"3bed00e28d1f80aeba6cbc37a5b43f5e32478f7d","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.2.0-alpha.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.2","@storybook/client-api":"5.2.0-alpha.2","@storybook/components":"5.2.0-alpha.2","@storybook/core-events":"5.2.0-alpha.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.2_1556625959580_0.27664213624870704","host":"s3://npm-registry-packages"}},"5.2.0-alpha.3":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0b47af204a1df0d935ad2bac9bcde4cbe565cdee","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.3.tgz","fileCount":76,"integrity":"sha512-qQl7XfQuPfgsMACQlRFn3DFlR/PU6vNasz7ijZxgmw7fQeW/tr5q5Q7zt7/wPnV98sNR3dZCcYGyUHsfq3JqUA==","signatures":[{"sig":"MEUCIDedPlGKkJMsBAYw+21sPouvqYwig34cbbWZgJ8+QuT5AiEAlWHO7RlvuVS0dPWZ012HHTSZlBC3KQmNq+whgh/gotc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyWTKCRA9TVsSAnZWagAAVyAP+QFIQkiJQFArWBNKiBrN\nqLEeAuY1IHTTFPBSto/rIFQARWEuDHchw3c0mMIPXW4hf1cbPU9JUy/mQi/t\niyaKel1JvWSvAStilNs7WG0shlxcPKqoAw6P1oWqv6NFfIFNcCZH+XkAu8MH\nmzjRmPdmD5IIDuBy7ailuh8yskLLDv+aU3wEl9vtSuhdEft+fuyaycWS/46d\n/DIsLI3TgaCb2qW8Wv6Zqwj7qLat/mMHhDPE0BlCqrlE/6Z/DooCjgAe/XRj\nVCWMaeIc2rLLVwL+fYMsjl2MXiJYUR3ykztlJTzTGDyFxi1BXupr6SMTFpaw\nN0hDFVMMCCuzNNMnzkrDOnY3JTUTqPTDTe/NtAX+jS4C9cMk5ju3RgQVFsTq\n39t8eNf6DFfaUV4ngCHglDycGdg1nivTF2u0Dys2xMao+62d13Xh59peCTFs\n+/YaCJx4Nh5mbImfNSlwq8W1ZR1xY76EO9lzTSzrgar/m6Oo4SO+YMbe/qRh\nHm5rbst4RHFevanWd9mGfa26BxDF7bUtX+hJ4DTp3NwFbhXvCFTlGVoHTXAO\na1nABZfh+V8ZWBseSXESSM7CcC6qpx6czyCV4W4xoEPcXIF8403elzqHzpye\no6MzkjHhg0BdmzC1SEpr4XhBteE6r+fPLN6T7myRJPS+btFxFcqglT6erd/a\naqQP\r\n=iAwG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"fa856c7bf4aa33d90cedee56bff5fb4449fea4a5","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.2.0-alpha.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.3","@storybook/client-api":"5.2.0-alpha.3","@storybook/components":"5.2.0-alpha.3","@storybook/core-events":"5.2.0-alpha.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.3_1556702410243_0.9914782410951799","host":"s3://npm-registry-packages"}},"5.1.0-alpha.37":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.37","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.37","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"d71b8c4d719d5b5fb5a3ccafa3919013a4eb154d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.37.tgz","fileCount":76,"integrity":"sha512-efbBpihsN+LkVeHHfwoxzyMa/xNgYA9QojdstmbZXgwaM9skDRasSe8KMV6HSR7Uns4VtRRx7xYVPEp3QvX1HA==","signatures":[{"sig":"MEYCIQCRduBV9KY6Ku70hMEPJGgsQvcjWuZCPWWciGm9SzQIogIhANR9tWIw7BtdYSKTMeTRUWzbJ50l8gtLecetbDGPBZQE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyXz7CRA9TVsSAnZWagAAlHgP/RiCiERhntVNLsu3V1bG\nyk5Zf9gnzD5ixh7Z4sG/Ad3wHDVqmb/9Jt6PreWpcpOKu5KU4zAe6ZNazSBX\nzVtKFbXJSqsBIBH1E+6mmhhe0SSEU9N9Gi4oJvxe5pGiqjfyGH/1Ha5KWfrM\nlTmi34Hf397AB9M8RUtPHVleHwA9aYW/zJQiEdQgPdOS60fWsKzF8bVVpiiR\nFzmrbxF0B1o7Il8yAcMQ1CzJRLpN/+/kuIA18IgCRluEOl8dkNQ96RGGt2dG\nKErbztTp1/7A7aLh88JrQx5oHHsFOzUgoUjnV8kxaTmxMRi5VFdjRVP/UKuZ\nJ7M/3vn3s5QqUHE9blfpBjj1jcfSLYexYrv0uMRUV7UL+6RXsxugbgqHdSgh\ne0UIv44Gt7kOnMVVvkfG+XSKDMZwUqWQ2xKSXYgTz0TQggzgPx+SciW9xmKC\nfADpkL3SHV64h24Sr6cqnXhn/EwCw8IQy3x3jVo4D6Ph8i+v5R0eBamDhmf1\n1bsUpjWg5QZ2HddtuyNTuYJP3CIx0SkZhkcxepfwq8YU5znvvBw1wvAW0bq9\nJCLTQipdXop3v6IcH13JsK/60Hgc0ODA0uuCiazdb7v50FhpDYx1rQWSYpv4\nhXB6R0K0GdfRe83M33nvIUMDIazdVJ7gbZu6akE33x5PW2dgSpvZ3oEf4lYc\nyMag\r\n=doMl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"ccc1d429482cd1f59af42eb60efec3fd5573bce1","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.37","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.37","@storybook/client-api":"5.1.0-alpha.37","@storybook/components":"5.1.0-alpha.37","@storybook/core-events":"5.1.0-alpha.37","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.37_1556708602205_0.6584181517963721","host":"s3://npm-registry-packages"}},"5.1.0-alpha.39":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.39","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.39","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"232324900588f54e903b867b6cb89f77e3dfe298","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.39.tgz","fileCount":76,"integrity":"sha512-TPgbYwwxE2GaXlQnpxLC/rn+mEpzrYdx4QnsgbKkADxKwKd2yQkoiUJPgJnsfLZqn3J75fniRgKqJwxYXqIyYA==","signatures":[{"sig":"MEQCIDvGmTh/E0XWPDrIjawWvbnw2l0meid/ApuD7odT01hYAiAyUgDwf5Wry7z50/b0mAG0JlCjjNCzZTzyrfgp8lU1Vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1318454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcypDuCRA9TVsSAnZWagAAz6AP/jbXaiousZuxtgkJ4hST\nQuSaZzHuKpBUncIKPOEXDP9ZUV4S/WD+aPWZXZFT3j6Wak2oHjy3/tKMy3FC\nlkJ6N/VZ3nQSG/sl4O2ny+/waqE7wSmekgRgS1xtbaAcco4HGFmNx3tN+Bik\nfxyqsCxUSrfpap3U15C4QOA+xtkkdXPrTcOE2rJjt50SyWarPT89xXcTD1Ba\nSChZoYJjriL0dWWZmImoknCKBPUw0O3cZDh+sjFiWDBNOhEEc4HT5KSi3Tij\nqZ+DeTuRWeXrnkYYsD9AIstwvshBpJuXm86ZFjG3YdzEk3hURymJ+slyjau7\nglGf1vCsSQ3jtZfYszIunKoPm32DHfbyN6LkDuEWklyiO26xYDcNa7GPDXcT\nsPJyay0xXrh4GbzaaKt5otfpn4VVfGQQzB7JlTK9w6VcpQs86yVdjpWnmcmG\npPRfsS4ABNXVmERiU/kIIWlvIRY9SOWuFxnfHcOUYAQUL2a+GTGwltuNcDpS\nij2otBQg9sLvHyJHt6LfkpTCjjkgjtdgRnU9lnyIPvvNECZ0JpIT9QOtOiSs\nHe4kbymm0dtJr4rz9xAWlTKNJ0p43uP9ETwqVhZch+prjlVaj8Ki/Nv2Csos\nNjmlf4Kk/wS5MWuRrdt6BE0u64pT0oe28d9CnNXVCXS4CQPZN31OyTOfWIRX\n8QLw\r\n=NxCg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"d2039e026d121d27376fa405939b979a9ea43a2c","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.3/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^2.6.5","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.39","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.39","@storybook/client-api":"5.1.0-alpha.39","@storybook/components":"5.1.0-alpha.39","@storybook/core-events":"5.1.0-alpha.39","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.39_1556779245889_0.880011270025165","host":"s3://npm-registry-packages"}},"5.1.0-alpha.40":{"name":"@storybook/addon-knobs","version":"5.1.0-alpha.40","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-alpha.40","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c563afd0cd5ceb81e8dfcb4380516ca9288765b5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-alpha.40.tgz","fileCount":76,"integrity":"sha512-cX8ZY+CtItfLgTAgVC5pXykkHdV/KoJ4FCg9KTS2MOoB/Qk+7j0JR1T0d2r/hOS61zfQON+nGJQGFfaM5l6znA==","signatures":[{"sig":"MEQCICDJpCY+aVCvh06LaQKYIetcEE6+mcNlxAe6WOWU57s4AiAIpvfcRI0QdzSQ7F2CGUx/TXrLELe/n7DJ2pETh+rdcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0veyCRA9TVsSAnZWagAAr20P/3Etiru22t9eqVQcLx3D\nrqbJcrcje5u1wlJvcIar7Cuu9XMiAk3M/eOKBcIbiIVH5E3JulD8C82qHlHs\nHC/K4RTM7wJCmOJRKRWQsLtCxrkVY7HBEered1+p9fEqc86EjmcFxdDAI+qO\nQGfuMXM+9qdWN5URuffiEJPis70zoGWrlPDcFv05TNPtTLC6L6C7Nb5lypv3\n0GoF9W73k5+sqw94oAxVk+aDhwqrTpvvT4a3fyUk0uMDZg23yP1bS9X0cYRN\ng/ADmHynSVdAb3Mj4z/e6YmjbhpNueecTdCzakw31Erp0Bvdb+QDmzlieD/N\nEV+r27r6uAb47ii/btNoooWk2FSTyP/hgtN4eV3FGVs6IMNDKyCXRCVfNmMV\njA0V+HrvPHUxo2bGmtm2Cl50RfiUHNqu4XObTVZ6gTMmp8n8dSPtGmHAB3oi\n/AwnAThqjL3Yu6EWsZz1F7YlLSMN+CdOaA6e2sCOSRLb6MoYTjQG2wRwIhiB\nc7U7W9nS/5TpS+WxHN3KF9eVy9ymHYQi7Bh5aZmXRmQssPF6unXeit46zgPe\nzEevtz6C+Wce2+BMPRYUPpO/EDRpordSa5qvU8Hrl0NIWUSf+Ulzs7A+p+bo\nKK2zZ6XHK7paIOPisAg9+iME8gCRkNVqJG9gd0WmikS3iBq3WwDHVm65pFAx\nJzsF\r\n=ium5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"d4922ad48198f7246d70eedd60f1ea39623c48f2","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-alpha.40","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-alpha.40","@storybook/client-api":"5.1.0-alpha.40","@storybook/components":"5.1.0-alpha.40","@storybook/core-events":"5.1.0-alpha.40","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-alpha.40_1557329841462_0.388998808244303","host":"s3://npm-registry-packages"}},"5.1.0-beta.0":{"name":"@storybook/addon-knobs","version":"5.1.0-beta.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-beta.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2bdee766d7ef4684c14f3e99e09ba0b25c150315","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-beta.0.tgz","fileCount":76,"integrity":"sha512-dGDnaGHHQ50xCua46TLst+08Kov662d/p/PpcVGtmH6n9T+qhT7VkOJ7yQK5y18oXtqk5SGML+9UF31GN0XEOQ==","signatures":[{"sig":"MEUCIQCL1eZOMstYLwZEg7ec67ncafbhDoY6K5E4fD4g5yWtRAIgIRbw+/ZjNdVAqff4GOeK321WLVqJ2p6j7B2cpc9qNNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1Tu6CRA9TVsSAnZWagAAF3EP/RBs75WKCL2K4kXKWGN1\n5IxT0VNHga7eSfm/d0QTntC/61YninWOPYkbgXqRO54s0CU4cDVHtyBWFroW\nrtSIp/puc67V95igEv12H9LRJwvJ5Su4Xh09evS7Eo/SN5lbL8NLweQdpji4\nzQ3jfop/lYsYKIbnqEpe20U57obORTBvJEGrs2L04rXsgJQOgIAykl96Ju4c\ny3+rKkpjlN4ftfwXLOlIE4P5ZTArNDGBcWFyLj68dfejYObeTqJ4d2kcSej3\nWDW5LPG98bT+vtngS2z16iUBQhBQC8ZaIPZjvBxwdtquJfkpvUz3o2ASq1Kf\nesJ6jOik7L88OiHQ5pEOQYnUY/bI5HpwyQsWjlpncRKmWJvCo6lCFNDgu/tr\npsuhOKzl9NDJHNUcsRC+5MYLXNvYLbMQW1T8DK+o5JLYtiJoKRUzERkTrhsT\n1UBT+thHcbXTmcdfKHVj3cc1vPH8qjZIKtde+DrmNwD9XnjN79VjfYGwGH46\nWFghY81HLvcOBcOqHHH4Yh/1YxxSMMcveDChKG+5TT1R/GufqSs29Al3p73o\nRhoc5gPODyRJ0O/5xCiRPKLJxk0oMmsPkQ5TjHQCkNWezEzPhe31lsKqPNUm\nFgCCNcd9RgLKVu/ZyVFDibsw2h06phYkraQImY/3w6vG1VFqRThBKtdpEaOe\nU6dd\r\n=ygv5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"564b11785e8a1951b04555be952cfb149fef1d10","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-beta.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-beta.0","@storybook/client-api":"5.1.0-beta.0","@storybook/components":"5.1.0-beta.0","@storybook/core-events":"5.1.0-beta.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-beta.0_1557478330083_0.16190498033056477","host":"s3://npm-registry-packages"}},"5.2.0-alpha.4":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"21fd8ff74aae0544090121b330d0432c5429fe16","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.4.tgz","fileCount":76,"integrity":"sha512-DJ522FPu33TAa082KpyulbMYOJViZu2poWxsIe5g2ASFAIUdv3sZ2Ooyu0U8ffenpzLfTwaGES7U8Pu9MbUexA==","signatures":[{"sig":"MEQCIA6ExWVtONSRoYvCYG3Gqw9oUA1VThxv7Z3lwRk1AAsnAiBiu3DU6+YlbZJfNQ6M3C9hP82nuG8Ql3Pw+o9VwJ1M+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1mrmCRA9TVsSAnZWagAAMl0P/2WEdBCZ6gB8UB/IUTJj\nahwg3nyzxPd8qjFsKA71B+bVYky2R7VpImWQ828W/vgHyKRVpg6VlAZ60rgo\n5VCAr3Dn1Yt+2ZT4j2Cyf3j6rdn+8/ToEG4TGs0CrBFU8jk2I95sMvw08iJL\nbJqhfzmvBphtBiFGDnoC+xpercvYrWVnbDSR0sHsQFkmc2fTFO1gpvuKkFnT\nY6Rq+RMuPwDORH5R9GSxfRwJqfzo1HwpuwARaeVa5PaNT4lDV7R/cTFOsrAj\ncmVjZPk3XEOZK8uDqN+u7VJx88EOLwhIy7LzCPNrSk7hGrbHxPfITazlodgw\nD2UWjwiLk4FJWXG5ucsKwdN0BUATvQ8JBpVeCgvVuR2hOFxgJLCRf3i6E0Xi\nejnalfoQKDcsJb/YvtngcdealRpGWX8G5c0dlhLm2iFU8tupPnexg1fikCPz\n1NHpjf/ogHdx/22K21aKTTSYWzLMXhGfpcp0woiEWniH0jtTvF9ISWIHSvEd\n5XD5H7pOnVK9nWDQNhwHKCrShrWk4pfvwPMZUTMAfo2QgQCTVcxUoOApH12C\nH8kksaUmv2kBuF4Yf72gJElLVWpr2Q4siOVpYcHv1QUGFBeDBaYfOzzRWRXb\nGKkphCmdrmtgbjg524Adna/o52U/WwZJ4bhtd7Jy7sc1jeM5DMNxGTOCVPWP\nDDmO\r\n=notQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"b248902dad664229659f6807b8a5ff9dd85909f5","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.2.0-alpha.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.4","@storybook/client-api":"5.2.0-alpha.4","@storybook/components":"5.2.0-alpha.4","@storybook/core-events":"5.2.0-alpha.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.4_1557555942300_0.057247959507812585","host":"s3://npm-registry-packages"}},"5.2.0-alpha.5":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"1fd0a23d6cb053975bfe9f9e24b985e39751ede8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.5.tgz","fileCount":76,"integrity":"sha512-qOFayG84RhKo7LvJUCbjtIutPnS+mGp54QCJZupkHFoSj/Mkobg250sHAH5OIWNAzoJT5H1GaNJ8eBnnwiw8pg==","signatures":[{"sig":"MEQCIHs5PoPZiWBx/3/1zE8K1fM981JbpaX5mUZyFr/8KguNAiBfisF49EWRPNWi7RfNIysEd2QhveeNUpmXoamPYx39Tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1+K3CRA9TVsSAnZWagAAq3YP/A7U8r9NGa6+WwVDk6xu\nkWrgZexGSQ0f5M+oKTnHgEJgclT634FSForyKfnVcXf/s1HxiZHGK/GjzrC7\nx1gShcSFIwZKTsPSpoauSiGvcDWzTFk+OoUvv9DjmgEE8YG+4sfHG3qna235\n45Z9JMcGQ/yoa3Z8sArNtJZd0x+AFJx0X58aYkRWxUtdLDAd2ysT9N3HAI1X\ned5HJwr0at3mE08KvqKVElbATRJe4ncJQLtxT/BXO25gNxatyMcmIk27S44p\nlWoDeNkKmQuRgFvhJQIpHua6rXrZ7dHC8ynSmhoKx6oJ+4wuaELvat67mTu4\nxMbVpZI+yPKhkWlggZj6Z5IDpp53BPwuaoYo21nQjfEWuKZKL1viDHN6cUCk\nPuFuqfoF3RVTiEx7JZ1zrPyXOECF6wogH5GlA3da3N2vJVOJFUFWcL66vvQ3\n6+jFs/KgaOXlwezUtj57kkJJ6CLXaLZdb7RHSZS9cpqCqkddGOq0AfUth5SB\nuvzU7RP2tA/SDGeg5kJLlGmlAj4VZRLWVYEaa4ksQ7Ofj7mI3LtHdcHDxh1A\n0H6fIkOk3YwK1dwMedUsRANWDVAZj4bmBgObyMSQRUn2Ng+PZcx2DL8MlFAD\nh24v+swm+xM2JfVINDQUnMybQLCbRKF+9A99hGNId6se9uuIzqlHhf1ix+VR\nABNS\r\n=w5hk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"ccd05c1e412ecf818d9fcec689a2744f6d8631fb","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.2.0-alpha.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.5","@storybook/client-api":"5.2.0-alpha.5","@storybook/components":"5.2.0-alpha.5","@storybook/core-events":"5.2.0-alpha.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.5_1557652150299_0.5529187653732373","host":"s3://npm-registry-packages"}},"5.2.0-alpha.6":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.6","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":"ndelangen","email":"ndelangen@me.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tmeasday","email":"tom@thesnail.org"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"328a24a9faa0285f7bf62c5abc7680d8dd783724","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.6.tgz","fileCount":76,"integrity":"sha512-pPurj/Eem4rkwo/+YlznTSThOzUHxgg/y1fBuREKsX8ozXtBmrbZZ0jX38pgLaG+OCBo9eQscG+ULQMR8V9y5g==","signatures":[{"sig":"MEQCIADv6jCX4kJLBKIOijvgIkxqA/lioDGvgwPfFPhRZz59AiAyup2rb8NjHiqfkdnaL355mY/162AQuRGH4DCvCFe3ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2vjICRA9TVsSAnZWagAAAeEP/jNHRybqtkC2fx/Tk8M6\n39kcvQL4kKtfLaE2EGzT7MpSWnjb7ooSTFldG33q813cGoGY/r3wZZJjJWdv\nrSzIz/wxqnuYLt7XGTBlCTB8oo1IlJa483B7mapQIp5+pR5Vh9YDnCDxuNN0\nQoo634vUEdbJ/MrwGVLFJ+WFS2ZOq8Gv+sKlq1fPcJ/mwIMsGSxxDhNGECcE\njlXRmWLJA5XPkD1YHGCl+jGpcJpYAHI/+COgr6c0RdEAgWn/oA0yevjSbnzE\njGfQg5Xp0cDhi2LddHiZzmndfOseyJ6hhbd7Is70XyR7C8hjU5gZG6JxDjnd\njssJ5djgDfYlfqFf0mfFtwk0W8u4emZUPtbzEsdD/X5ktxqrIjQiUU8aN6o2\nT+JM6eFGVmvTMtZVigugwJuxnykmGyIhty/SIbHw23ato0ut4gAIXWdIcQy5\n8KbTszhSyjnJKaqgP/tT/4+/hOMrlZu6Fv7ijmaq1PYE8YgOCnYeMCe22hlq\nu6eFNd/TmR7LtoleuQn8iZjPMJAFZHlee6ypHNQUNqsxSfQPUAew6nVeltqG\nfAvudN8TbftQOVGzJdtHSIilzeevVUHBd0EKNLSChTvEkqULlSISjHfMhkcy\nC6YZaCD0iPQ0yeMmdrILcoFE6rcBqjOjWFcqaTkanEBYpAhUZwA0g6zmUO5n\nnefE\r\n=whiW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"c5f2a840108efe29c836272c8d1ce7d1510f8217","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.2.0-alpha.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.6","@storybook/client-api":"5.2.0-alpha.6","@storybook/components":"5.2.0-alpha.6","@storybook/core-events":"5.2.0-alpha.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.6_1557854407680_0.10946879270999199","host":"s3://npm-registry-packages"}},"5.2.0-alpha.7":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.7","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"34fe5ed34675dd2bdff7e94657bdb1897c1650d0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.7.tgz","fileCount":76,"integrity":"sha512-dgFyPvJ7ZkdKv7qilkIuFKAUpXEs6kmhXfZD8lV1te7ONr3LYEhSW/xRyITF/ALyxZWqKoxVBz0sDlwoy86RZg==","signatures":[{"sig":"MEUCIQDiATbKj582VL70NaokvUf74mocf6ujDzz5KDfSdHACbwIgUtJI5DkayOOLr0FwhBadYSdQ0XomZzWqMHM5I8yP1Xg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc299eCRA9TVsSAnZWagAABCUP/0qNksZKXoR+Ai9HsUE0\nyt3hy+G0/l/VeXcrSYvNq9iG8uTAHtegPFXUIjOQi6O59dsjWHDTQA8v/1Rv\nOmtas4XJjO/akmD1Fj/23MFObplYbFqn4g10ShfIQSAuJcFeEe30h9Qx5XNP\nEXvBSWXKHMhTKD1YFNzajs8sDT2WfuqGfEplM1WwVJkLBYPpXY8W/nJUoXKx\nVGZHJqBvzyTzLwhQFaPdSyEklaNxMxyJTK9iTWglTQ2KhqqOiLcDJw5QYSEE\nivlKsdfMFQhxxTRyYztdwv1rJnOScCXI54wRucduAtNmcGOHfgIAtJYEPvep\nGQVhS9sw9ph5nixAYGsstW2BmAc3esNr9VSxJEe+S5isXBo4oZqa5xBUB+Dw\nxD4OUwRnwCn/OLyXhkNUMn03Xl/TaAF3CQ7+5y71XHF0R08rJp8GbzbDVPps\nJr/qpU0Usg0lvEjU8fFqwan1h2H4G1rpig2GgQQ2HaTXqaL7O5DYTD6hzR3L\ncm77aL48xRGu6MECZeiY3f89Bthgq0z7Zf1Tx4Fd0vwOQclZDWmrVBDg0prE\npeB8KdOaNvDMH7oiBCgR6hSw5+ZwcXNjOh2kKR3hVECiEBw2TyH4WtLXOte1\nyrt88/azcisBWT6LYfwUm5Z/zRKe32cq56GDdllYssc8DmaZ1+zCL6N+YliB\n8D2C\r\n=+Dj6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"b86440a111b2a9ba9037c4914f391ba28eb88a13","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.2.0-alpha.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.7","@storybook/client-api":"5.2.0-alpha.7","@storybook/components":"5.2.0-alpha.7","@storybook/core-events":"5.2.0-alpha.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.7_1557913437866_0.42631620187860997","host":"s3://npm-registry-packages"}},"5.2.0-alpha.8":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.8","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"34e0077c60165e049a7acdf5b6bb3f44f360d6ca","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.8.tgz","fileCount":76,"integrity":"sha512-wXqlE/0b5brbgfgjTwrsw18zs+NzWY29PuzrWH0BCP2v4Gj2oGhrEFUOXJCkfJT3ujbIf1VWUjGVKrfQJhJteQ==","signatures":[{"sig":"MEUCIBmX05aMq21y0jgGZTdWyh1TL1XGkBuNMPn9fgBtrkEvAiEAxn5vN82nL3hrLMQXpv5F1Ai2qJalVajDawXrwlEQ/XY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3BucCRA9TVsSAnZWagAA5nIQAJTnV5hGNX9br2/Ka8cY\nl9YVbjYHpeHGdXR1Y7+OpCZR9hTxbawbgm/TJyYtwa+kK1LWeFjG/cHDvyqA\nzqc2cZp+8w/fBizokdu+JUJ1/Fju5rd+1WnyD2g/1ek4xoUPMBCBAcaEwYzJ\nQnW0Saf/hMtxko4D9lOw3aVz1gjBDPVikoBrXFPEtVGKEURKdBedhsbuQi/i\nWppri5CdwRPrepiijQzfn+QhFslWJuzeebzVgjO5LCOyiNG1G8mW4BnHN26n\nFt+QCWpVMjyCvwhASxJKtmH+UexzPgo7wgRie3vwOpSrIFCH5xqdiHSvo/uz\nSQ48rQ67qZi9Zx+tcVl5CReC9n+rAFnY5zUvqmyJEjGdJpdIZgotdi8u2dEc\niwZth3Bv6bNPngs5CPm82qE2u7+0CFV0eFaODMXbfLES63WzB7EOdME+S2+v\nQJu6mH7fnj7O8A+MABDXS90q/65L184ENt6ikmolCMEaV4ec1Jo6d/tLRj9o\nWkZoUE1b/UM4tglnpl7S6cye/+onANV0BFdF1GbUZOyTfqdnosLi3HO3Rp5s\nue27w/q4iIFytOGWfKHOYfsDbsk1SjOIQVWCsQRwJnQ/faQf5NdBUkbx3UJ8\ngEu6Ppqc10TalTHhUBq5y5zOK8qU+GE6EmbipKux/bGsAhJhV9e8SGysTvuj\nF/B/\r\n=+5Zg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"a76cf4c88d787cdd20847c8433d80c4bbea14f1f","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.2.0-alpha.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.8","@storybook/client-api":"5.2.0-alpha.8","@storybook/components":"5.2.0-alpha.8","@storybook/core-events":"5.2.0-alpha.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.8_1557928859917_0.36196734285552057","host":"s3://npm-registry-packages"}},"5.1.0-beta.1":{"name":"@storybook/addon-knobs","version":"5.1.0-beta.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-beta.1","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"e6c0732041fe6e59071b30af7ba8029c1bcd99e3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-beta.1.tgz","fileCount":76,"integrity":"sha512-1qxFrbt8YH5CeznKGtxBvcuFhxGnwpHspZTBSJHvYWRa9CdHwDWhRwyD7NpmwFLfZ5D/OpxM1CSu5us/gsbZ2A==","signatures":[{"sig":"MEUCIFo2ik5lptA48Awli4pqfJRbPILYCdwOCrXcMwZQvo+yAiEA1fjSaTsEAAdCApE6jDF1lH+JJPEg2RE+93ymJPkf7Ds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3P1CCRA9TVsSAnZWagAAKVgQAIutbuLogUmZKu0D573x\nogz6P+wdgdm4c+MelwnZTqgYciMuzqDW8CDDPy8K5NRu/LWkYGnZAzRGWIO6\nBJf/HoYhgCYa76oaNAYMovZ9qyIyNafPFh7kdjKkamcxCNcXCARbWvP/ZAkU\ntkCgYBVxa86AbUjU3UIqtciSezJwRF2Nvt0IwQw3IbCMARMOuhfsPtVKIwVd\neNaWRzfj67Kpvm9aw/p9gJDXAtCyMm8kqjBw7R/Sn4WW8Crr36ntBZgZ1pl8\nqe0mHSQuxWPSDlAkpOsddjkXfAyusa4B65rNWAzTWTCofzL/01Lh+oNNtNb6\n1SzD+5uH8UQAlll2B+ziZb0ULpvXNQsXzAW+8qCOjBud543872RML5X3o/Zv\nTTi7DyP5Z8A6LGm8E+xXTM5Jb4Ute0Vue690roHi3LyRlghzer/q47AFxAfk\nkgVFcL1dxK32YsiDn3D9q+F/zjAmPq7PknH/8iIB/7tdiyhzsMfK7FiPJale\nVcsLRhd3y9VF+hnMVfNiQ/WAHekbCHu1e7kT8LipZc+hocpjUUqD1wTBp/Tg\nM/AMWg7GfbTXImZ143lQhD7wHzLUJ8Cm2KzKdpLDJNtgoTFwR8m2VcQBSAio\nXPaYLawxYlrbYaDJjSCyO9MLLX8Rera9GQnCuPAvDSoKxEB2JH6Lh3lpvfOI\ncORQ\r\n=GBL3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"e14539f7127f8dd8e4b9f10aa7d95fdecd86de2c","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.1.0-beta.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-beta.1","@storybook/client-api":"5.1.0-beta.1","@storybook/components":"5.1.0-beta.1","@storybook/core-events":"5.1.0-beta.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-beta.1_1557986625529_0.18353820213660166","host":"s3://npm-registry-packages"}},"5.2.0-alpha.9":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.9","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"a782118070b5c56bd92e54f9b5cbf44f6b613c48","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.9.tgz","fileCount":76,"integrity":"sha512-9x1lY3K5K8CiDVgt0N7YA6dIdySqVdIQHRhWwMyaC1OaRid5cJZMV8MTHjtlphBK0oC2AC7mIfQQIb8Vd6o58A==","signatures":[{"sig":"MEYCIQCDpIRydX8uLrfLJJuBir608FSpD0Tvv+nNhTVva/4ABQIhAI4bEgMge3CzYEmLxHlOfWWz0VgFXz3BbRw+acBCsixi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3ntxCRA9TVsSAnZWagAAtFgP/A5+miDlP1cQRUUBhK39\nMcqgCBT+r4KnNxAy2RZuUJvzS5si9M1m9SYk8TtBJ8oWEvlQkY90iejX/mFV\n2IpRmN/ex+dS7vjxpPdY15x7qpaIBZMXvQ7/DsRdHqydf1cE0bYlvPCTGmSN\no8f/yt2+teUYezYYSExCFeE+s8qHlc3nhJryU2KVxoL0Hxwa3cPEGQJsXnbO\nN6H4w8RBtNZDsIwa4VQGhyHTvwQGp+yBbh9aPlVBOb2EWTRECX93OQjazwGi\nenLDhPIPzU2S93dmXnEmqZd/+k+29fQcg7FuXxEi44XZn19Xqp2uUf5xkIeX\n1zgTrerX3rM25z3yXnWKo5hyaIKsTG5vEIimVtwoHjceXgNoCiitjxgdfAyh\nASQ7XvrlViUQDVYF/0Ckzbywd7irknUteH85CV6kbYGjOf7ES29LIMCYzAgo\n6qNmzzVYygrnBMX78ERSNAjX2ZJeQpq6p784eo7Sz+GFk6EVNVk0J59UTAru\nE70s809c2RCHRj3GxY3aK7yt51o/LguBF47H5p2Hmo4KNjMsLL3W5R+zc/ro\nFyyAXKgsGPWWCXlTajxQXj/ys4XycpzZ8Yo5va7bz2BVFBpjM99ldLbBORNa\n4vOgIUaGTT/PLQgWrDdFrwLhBazcP8dn8UdSXL/mL7zAbOHPJYrnn+8XMzlF\n5/qn\r\n=9rza\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"aff1704ec9f9cc3be3093a835b367542132ac2c2","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.2.0-alpha.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.9","@storybook/client-api":"5.2.0-alpha.9","@storybook/components":"5.2.0-alpha.9","@storybook/core-events":"5.2.0-alpha.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.9_1558084464990_0.46524145521684335","host":"s3://npm-registry-packages"}},"5.2.0-alpha.10":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.10","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"561c7dca32d98a6537393c8d6b11dee521336661","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.10.tgz","fileCount":76,"integrity":"sha512-2XpzuynhV8UmHpMtOAToBN497nkCOdyTY5MkT4kKxkFbOiPdojyb8tPqCa3u7Mvj+jjt/luSufTw1FzFeqFPTg==","signatures":[{"sig":"MEQCIEUaWnUdfzQ45zlJLshnj54hsR22mhMXd+GHbLuWHtg0AiAlSP4ii5CtZXafQ3+1sYwJeLuREJJHmbBwGQiq/y4qgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4lxUCRA9TVsSAnZWagAACkoP/izHkNbtjf35xwvI2a14\nPjtqi9honobP9GHNSmzZkCLdJ3B8XlkU6WXqYmOJcLuIhLRGg8P9FzsHUFB/\nr3tqIV2jI65N+/3oJHe110G2FusnS3erhQaAyaAGUneB23uIUbbImwBn7yzm\nwtyXJtF7ysv6fOENYpz8IyUGMDMPYAqPQ6VFZdZ7KLpmBbhKhzsbGh28ugCU\nkl75k/xdlDtK3eri5zFyy1i4tpLs3EZmxaUq5anv1COwBlLARoQ6miZIUMA8\nnmvLss1ZhHsmjEPGaKD0fqulSXcLdxKM78eclwC08dQbU0n9H21fFN9NzYqi\n+qWhufUu6pPTK+IsbzKFhiGxlZ4FgO5Oefku9+48cCg119W7DQ5g/hTC3BpT\nk0bHKRDIABtVh0Iv2nLPMvsNLKuPuudKwU+GVkL6ZamrrxEj1IV37QhiDCG7\n6RnDNdIwQQedv15n8PSG9nMsF0gLW+ZCIxKy592eKXmvAScCSVbpLRcFknrv\nLs1ex5q90KonfCgTyctMe3fO3kt6Wsl4C7PVhsTK9txP/8z+MXoh9eOgmITq\nzu3RmnFgKja6b5qztNz4xszjh3Wxxee9+48fYV/dbym1wYJXKYgckvdliQWk\n0pjNvFydHqoxNyJdrDNWL6PaSekBw8RpFR1aJfAbOq1s8ff8v6VRQnsNx/AE\nHvQn\r\n=cHPp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"baf523d63481300143d255ce4211092f90ee4190","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.13.4/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^2.2.0","fast-deep-equal":"^2.0.1","lodash.debounce":"^4.0.8","@storybook/addons":"5.2.0-alpha.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.10","@storybook/client-api":"5.2.0-alpha.10","@storybook/components":"5.2.0-alpha.10","@storybook/core-events":"5.2.0-alpha.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.10_1558338644075_0.5067556417778745","host":"s3://npm-registry-packages"}},"5.1.0-rc.0":{"name":"@storybook/addon-knobs","version":"5.1.0-rc.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-rc.0","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"18101349b1af588cc13e0a07706fa040996fceb3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-rc.0.tgz","fileCount":76,"integrity":"sha512-q+nU7oq8+IYx736aI/RLxTB/ok+2bcbJbFJH7fUqq0Lvl6U4DqUwfJ8RyIOFCpB+PABbUsB231e4L38y/dPWew==","signatures":[{"sig":"MEUCIEDB5td3pOfybOzY09RzFtVT0bidNLRIBYXE3s+PcVP3AiEA7zKXGjcNXTKUTN1FpZAX7NkXa35Y7Bum0r7/KyzSEIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc492jCRA9TVsSAnZWagAALvwP/1Q6HvljQeLolONlBJKI\nl5pGiP2kIdjL55Ea6OzkT72ZG4zzjvdLOFhrhnnHTcEYO5Ef/0NnzIpVZq3T\nsE+selBI9/xt49w4A+kWoGZnvz98q7wiZaPyogUNHYnSlGPnzD7UjnnuKZq1\nLLzzuXdHc5vFRAjeZS/uRJgV1mXK2WahnVOs8y0h0V6AXSgWI0CQFUBmm13X\nNUwlvYinkEtPLguQlf0KPaFZI27mFjkXggnEwYlhMaRqXpQzFD+5CIrQUfOS\nPFgXUOO/G8ikelOppiP96a3GeImcRZwbAbb/BHngzB1oO0XWj7umtaJAC665\nnhQHP4YRN1yYh2f7xU8bhN4kQqVNZdrSLotVQuzEUyC9+jlOE3I4dmgpWmY7\nQqxkOM5jbEr02uvbuUQchYBD0dDLrr+HmdZkAx1/fBwJv0soOSvuwYLFQCUe\nz9JfkZ5YI5iT6d37/HxHStaK58+fSzHUwI2SvEAL8jOmhcG4oazY2mdL9s0O\nFF0f6223i/AAJPuNgIyIRThJ+Kgl5g02BMqk/jci/OL7E3TJoKDWsG1YWrkV\nyx2FJXJzEVRPu2mU2vRUop70+Tn/oTkZZ1iaOojtzKqMxLYthPYKCQjkT6k7\nlyroPEwtK+QkCDzfezg9/JqsYguCCE10J/owyzf5KId5RTpr3IMPQKsASvTI\n0HHf\r\n=ngbk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"35ec834e893384fe1cfcd1fa008af619de2e9162","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.0-rc.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-rc.0","@storybook/client-api":"5.1.0-rc.0","@storybook/components":"5.1.0-rc.0","@storybook/core-events":"5.1.0-rc.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-rc.0_1558437282563_0.8951932285024791","host":"s3://npm-registry-packages"}},"5.2.0-alpha.11":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.11","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"e9af38a4b4b0a3a4cdc311efb3c0ffe1c0d928fe","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.11.tgz","fileCount":76,"integrity":"sha512-B4kJD1s/r+UHGZpcU7YWkN5aH9+SwsA7MgNkC/kdkCEfnNgqVxq/IXe6TMcpgIzSIx47gxrvZfnxw03/VDaskQ==","signatures":[{"sig":"MEUCIFwmlzwgpluxS0gAaFIk0l1yJUWZ47/90mdTAVZgjZgqAiEA/P9/ehfikSQcDoRWNNY0EzMZrjf/GEJZ75Oa9NQCGDI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5ASJCRA9TVsSAnZWagAA8sAP/326dUW3IY/WINuHxt6i\nfLnyYNiVREnikK4lMEQJD/2wUGErGug/scMZR/FIxEd9ZqYGAaNoWGiIA6+W\nvvmozC7u/cc3PQnFg8354SMcxgRXcE4rIYOhBH+8hmqscT/OPoBCMzVzcydj\nlBBTJTDe3c3ZEcu3I3VG8RwHKuY94jlNpaFkkb4ezrOZwsl8j1glkNuZGu8N\nicIoOyPiaXFjrQMnXG7/tOstmpBmi7/nRynNOOwyzCokm//O7wVALBe9Pzmo\nKpKE/lYpuGlkSfJjvjthtattT9d8E9yBM5L6zKYE/TPopV4Gd4kI9YW2J6yh\ndaEWHv/dAHZZk6ayhFLSx8NTzeyhiYWZfPDFpXXUuWeEdwxB30KVyzIyHSdi\ntiS+plZneLZE0GUswyros25zgDFEZdZxRNQzUd3VLMUPsyN9xfxJCpLCD5pc\nGpwRTL0WGn8b63bT8woewcU2FPkr9q0ANEVBwyInUvXfKP7jQPtjxSFr/uA1\nM6LoiLfYQMs0YPnxJURGW+2H7x7ZMQgzJ0nddF+kamp52r1yt9A3SHSiYU9w\nY+Zxj0dBPm9O0r/F8ve7W9EpluZl39v26rjAj/Klwx43ujTw5wrjbVwTRj5F\nOd4nkE9duGkorhccY53zsB7FIYFFzBEL4gYVHKurTAFuJY4TFT91ZNFVdjrx\nu4oP\r\n=VMAl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"b8c79460a0acd2aa1ea4e8c254d3c5e0376323ae","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.11","@storybook/client-api":"5.2.0-alpha.11","@storybook/components":"5.2.0-alpha.11","@storybook/core-events":"5.2.0-alpha.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.11_1558447240296_0.8657297832888668","host":"s3://npm-registry-packages"}},"5.2.0-alpha.12":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.12","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"48034f391efedec5d0e898cbd1998deb58d03bdd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.12.tgz","fileCount":76,"integrity":"sha512-YBsdhECefY0+PdJS0bCc8Jn7ukLQNLu835HUtTbCFv8wkhzWJAR6yqJGw6Sr2NRSlYnjUX9mqHGIokHhXo15cw==","signatures":[{"sig":"MEUCIEanLdmknRTy4ICDCNEVOMePL0WzFmK2fIZkYyhkPd6cAiEA0yQV7n+s1XBz48r7BTQWhfmzNXxZDlZRItyNfcoer+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5B92CRA9TVsSAnZWagAAGdkP/A5322hO6EIzljwBJYdK\nd/JHo9Y1EWJohZP/IyrsVHy3k6+aunR9eyr6N+axwmzxPzOapsI5W0HcyrT4\n67UxUycQip4zgRyLeQU92IRpiYZ7FkcsFtXxf2AX/u6+Z7Ubt4dhSHeFnypg\nc0QSN4tliV4w6IRtpiSJI2oXk/YOfk8JkHXwOogZE9RyvaHihpnBz46Eg89e\nBFjMAGSe56KmCy3DDIbQOgsRNGDy4F9orQKJe37bnMgoV7VVMgvkepBJsHc0\nN/XMX/YVgqm6pe1iR3IDX8QObxk9/Dn7O9rxd/tEz23U8lrGuTJ2zm0re1ph\nPf1wrERzBwyQXbR4ZUccPcV4HGXRI2nIjQt28wVP7qUL4bfSQCKAXgYiMm+O\nAOnkjlufHDqLNJFDlOpxgeTkmqGHWLMqkY2LTJT+g5XvhiO/GiHesW/JzwkY\nWlKPq3O/+1w9+Gqw7GMwKc1y4Q2yLzVujQTvBEiv88dsWjS/Tnc6IpNr4AqI\nmXKd+QTQXEc+VNJnKncKuwlchyj3FQMbhGZ5QjPccDmWQLRiNYlt586qZcqn\n8QzrYzUEbuHfU+MCE2UldjQ5xwZaHNChs7n/j0gHRSHW8RymQgiSdU6cpU+B\nlECQYKaPBxaKqSMFtC33pjVa/aUHdz9rxm+MSdunBnXO4gqIVEwYL77ubS6s\nRJfL\r\n=3v6I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"46e83a902787a15a586cb495aa7f090241b40607","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.12","@storybook/client-api":"5.2.0-alpha.12","@storybook/components":"5.2.0-alpha.12","@storybook/core-events":"5.2.0-alpha.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.12_1558454134172_0.9325694334887007","host":"s3://npm-registry-packages"}},"5.2.0-alpha.13":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.13","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"cb27bbeb58f331e969a40b83fde28ebda16f9873","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.13.tgz","fileCount":76,"integrity":"sha512-FoejmVdBgwqtE2d7UjbYAURLvaMUnoKSwXCbNqltGL2i1y4kQIkE9lgoftt9zSP3IaamPbeehSFHCHGT0Iya2A==","signatures":[{"sig":"MEYCIQCvGerAvMPZsKWo6IbRNKHQqq1MF5nT3szbajWtUCW6sQIhAOHVE07iDfQxIkEJvI4OKntmISLjx0o8g+G4PBac0HqK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6ImLCRA9TVsSAnZWagAAKxIQAIqXUJmAz6J5K6+x0b3k\n+L0ibtj3lUzv/CA5sCGNBZ6U+P4cWimf2UWuR+iDmmjEwBBBwxKRCOJq1LSd\n399kS55d3PDacQ5i/mrjS/wqodK2ZBa6cJPf3XGxPVxw+AmjxizOxGe7hJay\nAAc2hGHrreLKmC4krXj1uooYMy0Zwqff3RfKdhIhOuXWNxURimYsjrgSLSf9\n/JytG5bQKgp2U8ctWd5iGAWFlvxJpZyfNFqzvTLOd0F3gAVa4OatdNce+bbD\nmCti3CC5CvUNB5fDfMil0/ngwW4LSnO6LFmUC5HdImRX3sWLYQyHc6XMTH5a\n6eW98aBwkO6Ns8jBDvZ80irf21wRhNke3hmSH458uAuiOhgcehuwd9Amb8dX\nkUGP9i51LkRlNihO+Y9p7CD9b3J+EuQRGcLkEc7q6v23a+cf9edqldf7Q2mO\nvY8Ui0VSscz507kxGIGU1G+nYeWyqTL14ujwAnPLFMEp4H7YE475UXtcvk5u\nilJRBb4glFbAaJ1nDg44wz7+XKdE8vmvS6rmj0xunwsGQg16Cz/ry/90hV3N\n4zibE++cZAbs+mMEJehWoSnzcgHxC5oFLflr/ZS4Bsp+WNQil5owffFJBJbB\n5dOzhCzSzgOkeXTh+3km7ylUNJsycJgL5tqbptCG0YEjLoKYAF8jTvsIVBOe\ne3gX\r\n=kLtx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"66371e3f68686434bf0683daa6e21f9cfbad7e2a","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.13","@storybook/client-api":"5.2.0-alpha.13","@storybook/components":"5.2.0-alpha.13","@storybook/core-events":"5.2.0-alpha.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.13_1558743434399_0.025073462644660927","host":"s3://npm-registry-packages"}},"5.1.0-rc.1":{"name":"@storybook/addon-knobs","version":"5.1.0-rc.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-rc.1","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9c6b0fc3b72c38f3731e3dcfcf6114a8b294747e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-rc.1.tgz","fileCount":76,"integrity":"sha512-eMlpmFKKWp4IOdhC8dBBhIN941jPnypOEBv4XgIdfDepnAjmyAEotrSFNWMmKC2t+ZOv/ecX1o9M8pw28nHTGQ==","signatures":[{"sig":"MEUCIQDUAozSbLJgPchXJspLRAUMPlufMLpDn0cW6JZN8ULhLAIgB6/SPp1KmkLCmYDz7OBLLPA20/DhJva5bbxbvluVvKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6JR5CRA9TVsSAnZWagAA78QQAIUqFr1xZ4d3x7dCShro\nLeVTfenGiwcxFkQZP/7mf/2FU6dRbCiIxC8yj5paGtgWBnNDWDsHB/cmYFrc\nJpbtYlLaGrDCDDsrIuJGf76HILzu6K8BoxUKROFN/fg+z67cyu9d3ZRmSY7m\no3Vz+mXPzOHWWpEWGN3ax9yJkZHOblat9biB9GWXnoIFULidAvSWyyR/DbGZ\nP5M4M8Fp5cnl04We4fc6g/Dh98GP3II5dhEo7Z3zOf7sISINkvvcDzYPhoKj\n6WUf+m2OjEvW1JSmXscwhuMrl6p1rw2joJgg6fL2f+QYOgBXfL8pvDP1LPzD\nEBe+tjLwPWAYpd6xN+24/fi1IFJ262TKVFDj3GlPL9itE92Z71KqsTNAtomD\nL7lUgtoZkFl4vZXK/w9LEteIJ7ekyueMp/hK9DOkRpKJ8KDZ7Vu364GkHTXx\nMh6UIal8K5uZbnKue+0WAE7AEBt4Q8Qi0yrOPTE5WSg19V+jbQzT+qrbCfLk\nEEkohXLZhSkh0JxADzDImLxuSqrIolusi3XYFQP5DeJ04EQAEreocFa9fM8o\nM9MUx0GqsxZdRmteoUMgsBqMG1dlz0V0mHVCPu1ABlEZSvFz8AT7+NawKu95\nRm5rtegUu9jfq/EitGOwSK3MpJrJ9azSat/uSMCBOJ0FWgd2MRLnfeLOIeKm\noeLI\r\n=wyeU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"aa5c2245346e74a12e331fefcf5a358466773d28","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.0-rc.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-rc.1","@storybook/client-api":"5.1.0-rc.1","@storybook/components":"5.1.0-rc.1","@storybook/core-events":"5.1.0-rc.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-rc.1_1558746232471_0.18049842567861196","host":"s3://npm-registry-packages"}},"5.2.0-alpha.14":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.14","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"7025f7253c92c42997a0c6a1cafa314e2ddcf828","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.14.tgz","fileCount":76,"integrity":"sha512-wqTIfbDh4jYEyQR9VWT1enyu3AjeKs86q+O6jM/ebXosqeWItrUlg3nMqulRFa00nrR1yjLVeohyqYMO5fkpAQ==","signatures":[{"sig":"MEYCIQDwiq5vTToo5q9f4LtXEr/3VY+xpu0DYpCV3e17M7yzcwIhAKIn66n25EuoLaTnAQWNhODAuUQ/ElbxjBN7enRXvcOI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6cMLCRA9TVsSAnZWagAA6eEQAIhgY1P4AvLOMHHttA84\nEYDgVkLTYk4lgEPMXAKclfr5TOdYm88E0Y3BTr8R4kW1KmI3jdaEfM49V1PE\nK/peUQmfZzdVdoi/GWX8vurwg/4+hJ3KfQebMbpMLe+SfJT0mLB/C+wvyTIj\nuodWB2/yu3HA4ZVmjxdqcct74PKRpf7mTg/PpcmEWR/Oh5Yc/A9q8lJAvpU9\n4mNJI462DxxERMzQgqxLJp/gKuiqME/IlDJ7LBPHxftsMirMAZR2D5VR4Se4\n3E8f3HI2FkKRp7qv8hIoMmnbOfU8o7fS86pAhyXVL6ETOspJS0jk1lSTUiEB\nI5tYeWLBD6SatmOPI+9BBSvVovrL2naYPm24CkM205lk0v5wZbg6dmBWnMdo\nzcoGwGPw1BmaKKztszHb/Nisye/FMh3aBsdMxRDmmd6kFefdK1Z+TD4ZUVE7\nBQCCxYEDc8y5T8AkdGAGASZe3sk8pgT7gKNe2hk7lj+ixBnnJyWP5BYY4MhZ\nWitqW/3aDSgBmeZBndHOVh0TQvD+ujfSzOYYzsJxuik0xc1W+/HB9DzXH4xP\nHV0andngPhYwhFiGOZxHJlPzTV2NOq51HcKsKa2LuRSPVoFSeFARlVl6vvkW\n1TJllXpTEZIM+c9e70fPsCmaFziOEh+qEXLNmIgVzIjrRHLcvAkpYsNHrNqb\nbUHV\r\n=/2od\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"b4af57888aa4ea8ce0190ad5b530216523a648c6","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.14","@storybook/client-api":"5.2.0-alpha.14","@storybook/components":"5.2.0-alpha.14","@storybook/core-events":"5.2.0-alpha.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.14_1558823689964_0.15502197125260042","host":"s3://npm-registry-packages"}},"5.2.0-alpha.15":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.15","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0d8b99b765566a20d7c8838cbe9aeba2831a320c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.15.tgz","fileCount":76,"integrity":"sha512-1JbkyBTleSYb4rDUel2vva7ZSTVA/swczrZ9XKMG0X7SfMleVM4aYYdMP5Det6zOTv2yEjNvcCoTYOhWb6caIA==","signatures":[{"sig":"MEYCIQCgQJrODV1djxChLMs1kH5JMwAfGL5Zg5GqDR5X8MuVgAIhAMinSx8+EPAvuxQVUW1gbzWkNWq4wUaI5K48DWTxGX1s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6eGWCRA9TVsSAnZWagAAeMoQAIaFW8ZRW8D6ldeS0JMj\nbLHD3vYzGGfVkWoEDGBUsIA/PRqCFEN3s83Oy+JEb3x7/5hZm6GhYmfhMutp\np/TUIULpUovrPN3VTygl+qF6W5PS4mev3odsjBFhwWpPzkmmPx5cJhUkyGKO\nbh/hJdSgVLROZaYFCO8aCu49QNGvMV8sgIz5mcALHMKZCge000XMBGZGAPo6\nstLNCMC5w6qfLGQGYQPMhXDLKlsmP3Kw0LImUOiADXa+PrXipKG6A9G/SlAD\n+Zta+HhpGlQ5/k9edR2Uxa4ks1A5bWH1jBFgf+96K+z9yNa1j74m6nOE43sX\nGnkANKYrMIBErfb95KBSuM3dBLN6E++UdG2sTYlbLGqQBwJg/C23BTWnRLyC\nYJhouKILVZmnni+zTwT6+aSdPthUWp7t0Sz9OhQ9NOTmluaqxDUtRKeIs7md\nCuORJCN16pABeeoLYGcTTiLtkzRafFmzzZdZ8lrRZmENJfwa3PQYgDvEoU+x\nZ7oafl/9G4zRdAPQKSydXwdQv77gCLnGPLELTxdyyxUQmxv3+S7bED7cCHtN\n4R/LcPeuHY7/X3+UddFBIino/z/KH9gatvivRAXY+Q4kBS5qwRhUtfKuEkDc\nR+fM0UZNxoOLn3qgrDVj8+PX7MSETUipRaN4r/E6cXTYeG8m5M2YyWsKi8ne\nSOxF\r\n=S6GL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"27ef09fd6de24ad2a221a12827c5afbd5851598b","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.15","@storybook/client-api":"5.2.0-alpha.15","@storybook/components":"5.2.0-alpha.15","@storybook/core-events":"5.2.0-alpha.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.15_1558831510392_0.9563873665556766","host":"s3://npm-registry-packages"}},"5.2.0-alpha.16":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.16","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.16","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"c44da5b90e1b78d31fc1c00dc291eee0ad9aecd8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.16.tgz","fileCount":76,"integrity":"sha512-a1E2iT4wouFY5TIm/ZmjDjyYJ6jAdalHuYdQoSpi8a5Vhy9mEdirI+RI0w6aXu/nE7XLbuRN+O+p/9wzHYiunA==","signatures":[{"sig":"MEUCIQCX3Fc1e/i05xv0UE5IuHOIUglO2BkgXZhDpo28PiPX1AIgDi1lw0/BHgBW292Embe6Ol6DoCbX6Ky0i5PFPJWHBh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6i7sCRA9TVsSAnZWagAAcywP/0YtnJ3hj5XjiQXrzVAq\nEJgykAqToiHHs9dgDfdG2rFzIgkK/REuFv/xdH5rsY6QY8zcwAVZY2A8JQSF\nG3nqvI1AK0Uw6NVM/F2j+NteKLI7/tAqeIdClJ48bBkaQQrbcqZzfvcdHopG\nP1jGlGoBuX4ssac/VEFYruFo9rc9el4EpyF6oP7wpC/koVhaucgXSZ/yl9nw\nEuzDEKw8/YZzHOhCg2fpHOUGw1QTuU9A40wjcUyIaJViD7f+bNFGtS3+r/xR\nCLoSOXO2IUsKy9Hp+2IAAAIkhnuDpxUl0GYaU8nd2aTErahWlnFT4MyKChBe\nVJ2IBKZ5o7Ym6U62O41f9wSUaGO+Ik1QZuq0C0CX4yQfydWS/p4Rw8oy0kpw\nncrDYBOG+V1EI2T+dgsQoSuOAddq4NjwOj38jbPKL/6nNq93QPc8B/bqfAMr\nF28/7lSO2ylgN4jeA+FhnlxItUkgg3Cw2nSAik7R/fh4OnBiLLMKM98X9bJe\nCt6qM9I6OogZvYSIm8LmeTCFKHmMVgZ7KPQXyJq0XdZQjFVpOrfFVR5fnc3n\nBe3H5xy1xJ6ArFt6Tm1HSGMxPry3UERjCUJT3D3VfzmGCtZCNvjcxxAzzsFH\nanJyBTLAPJjIvZ0nxdGAPhsXyA4xxo20j0WTDxQXcnonwcSiJQ/KVNo3L9IP\nA5Zf\r\n=VWwt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"a618ed45a45a03d9691ba6ef0c931b0b8b2ae56f","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.16","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.16","@storybook/client-api":"5.2.0-alpha.16","@storybook/components":"5.2.0-alpha.16","@storybook/core-events":"5.2.0-alpha.16","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.16_1558851307832_0.6721304469337286","host":"s3://npm-registry-packages"}},"5.2.0-alpha.17":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.17","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3f6df9458da86f56e921405ca204f5f5d7013881","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.17.tgz","fileCount":76,"integrity":"sha512-WnNgfocAzg3FkMnQBvt2ZaKUycyGbg7olpTbDBwI2ROI1Cy8JX9in+SvRuwGVw8a1P7MsN8nxRzBc9S1J/sHsg==","signatures":[{"sig":"MEUCIQCiI3c79/hRHfOWIMhrQ6gU9XF4hirG4RHcRhTATTGCMwIgfN06879u86lEUXk0TJmvIEBzHzdkQHGER56p3xxRxfQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6sWvCRA9TVsSAnZWagAAcLwQAKPL9PnPW3js1Oznq2z9\nOiMLifS3gdvPd6O77EBF6JKj1fKjYiKkt3LrESCzF7VG15kjY/u5uJDL5XNW\n5FKBEQrw95vu/BcYdMb2S4Qt3g5P1J5KSGDx710NURJ12JhVSmPxOmSR9Zdt\nq1pudlUouC9XqJXUKlbNkjJoPT8XIPrWjCzeHYd1YIoH5EMFJMmc9GRQmBmT\nJg9BZUGidBI+a8UuD6oVZYYAdAsqFoODvKMuygf5HS9NZYD978vyWHwv2XuD\nDXNjsjvNCWdnlvVyhmolos0m1zHv/QrEbwKfhLKlTffTXdbL8iQ20JxFmJnx\nBe3Eaw5lEmHdIh20N+vXz/CQpjefhgwOdVKJOrd74HyWV5Cbr6262I19Rvch\n59hWRe+06/zxVoO9ldAjF2UuenF1W5/HvOVztfNHdUqX9wug6ar0WLP7uAIF\nRV0Uysl9Mi88km0h+pali+9ntHYyFUdS55SNKswvxws4k4MSOney+/zLsKEa\nbRZDHiIsleXb3n7Ex/c9I/l8SmguQ6scoNLL90sxwRkKQ47gwTb59/wK5Ubm\nAyiCNkAL87GgGHSyKIYQB7VZoN4HnYxdYj+B4Z7cWiYIqQoI3/Cg5RCuTOSM\nN+PY5HR7bN0F7gj9BCaCe6+vcGFJyJqiaCl3R1BclzwzZjKXfNQ9qT3OjCAj\nvU9V\r\n=bzgf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"28620c882bf877d421032d94e4ca8fe867e5d5b5","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.17","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.17","@storybook/client-api":"5.2.0-alpha.17","@storybook/components":"5.2.0-alpha.17","@storybook/core-events":"5.2.0-alpha.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.17_1558889902772_0.7546159304293363","host":"s3://npm-registry-packages"}},"5.2.0-alpha.18":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.18","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"907c74d5b4b954bb80da277c2139980e18dd0a97","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.18.tgz","fileCount":76,"integrity":"sha512-iIGEy6qi+ClZg+cbTe2JR259u9aXcYa77EGysK5HczSyJ0BFkvhzOvGe+KuhG4j9jUR5NBhjPomgcirXbAEU4w==","signatures":[{"sig":"MEYCIQDbYWpzVJFtqPbHPqYoGdMOCQsXwDKd/WDBb/8ozmasMAIhAJxWsN5hV5Gg/+GdJFKHPWnrM89Gdft8vcCVTad8J6Jx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc63giCRA9TVsSAnZWagAAevMQAIBWOGHafFJ8mtP7RLuM\nq2lWvm9QdslF6/f3JDlXdcaySi1qwF6lN08SPLTAt/nYN8gB0B6iOWtih3jn\nzsBDWT8b7F7ZSAhVqr7+0ANZZJO1aT4xdFMJntnvlL5T7h6bB6rRP1DA58Zd\ngcITw1nMG6J6cPydotM0kjJyz51xtGBKgSBg3Pf4NT6pXOB5OJqzgoe5h2mW\n751AUgik32kHCJCfdv1p5PbgELqQlIQqs7TcawANfrjKIUW4mk8R7G+xYGyq\nrClwzlV12wyT8bq5PxYlAVWmte0k/EGxbBHlUbMOC/SNmyHL9zwymBxirkGH\n58dd3OcjA+et4PUxn5qKrSdtwgjH4bdMIgQysWOLqV/VGQVeyvCm/yFA9DfN\ngeeC7W+hvGJMzRRGy85dqJae/Q+vua5R2G+cW54i5O1fOXHiqhuFlh5Y0l+p\nGD+dXl3mXEb+M8067Xl9Ua8oDKM9vmOPDFbg2PmXKjmqTGBntbVk9vGRAYuQ\nvjKk9bMBLoCGH+cOvtAlrvo2Kqq1wsZFSPoMB5Hl6a0y3rfbf84nhEFjyr4l\nrCiCEYWetuiJReFdudiQwPbbyX27B8zNGEO+i+cSbgQOlP0ULb4fJRuwOmjM\neIygE9/hV1NB7EPUK3MTlHVGPj5HeE/pu3s8AJEMCDZEhTuUUdNUelAuIx9c\nYwCW\r\n=HCi5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"4b325c9ea18b29a48ef5b7384b7229958c688136","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.18","@storybook/client-api":"5.2.0-alpha.18","@storybook/components":"5.2.0-alpha.18","@storybook/core-events":"5.2.0-alpha.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.18_1558935585654_0.5863115802845023","host":"s3://npm-registry-packages"}},"5.1.0-rc.2":{"name":"@storybook/addon-knobs","version":"5.1.0-rc.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-rc.2","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"9b8206eadbb7cbcf61d7a70e0b4f76941dd7ad55","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-rc.2.tgz","fileCount":76,"integrity":"sha512-ILJqEnpKmPISL/EImBjzIt7v3QEvbFjAABgv+ET9dbYjelnuaaK3DZdXbm0FW5Zlh/TT6quRvuLDDiw+2XaS4w==","signatures":[{"sig":"MEUCIAsI57hjZetE3cgeHR15I5IepuXaUJ/I8xsx4czS9mWFAiEAr+p2FsjwDE7FWum6pRTf6VYQ7keppeLhb4qrfqmVXt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6/ItCRA9TVsSAnZWagAAPd8P/j4VqnXcuJCyF9dQdIfF\nxtdCNjVEtUk1/hrenQOtXR5CxGPltbGQZn2yq2JKPleo9Dq9CV43lvMNILJ8\nOb+CLd7Z0c2Oj2NLrQxU1RM24kgN/3sdQFlE7mZqkz5fRYBbDjFPZwXgGNUs\nxDKePBxLE9GVPTB/PuAuUHu5egPhlGdvF/uRWchSKKkUjRR9D/4uMrmS36a1\n/tXuRmhl2OVyXKVaS2Myf/7xGy7I6gbK8ZBNgCkgHHdUEF0Y4+wTGhbTcjM8\nX3M0hAyEMKY8TwijJmDrc6N6w4hD/IaOlGXAhUQZLBlJn1nJet5zg1rRsZNK\nxylCkihaOpDmLdDbH+wcLQ11D5xuolesv5uH/OrmCpma/65GiimkfNdptVEO\nTAa3LsILxXGRpf5aBoK2TpNfuknxDJWAfFLK2Yk/4E026ih1eLP8F6YTWSeI\nTsgzLLt8EJYGv+CSSWPhzlgE4Wt5ZkLnavMOQYDysId70nu/87oNeoKSJVR1\n7wMuPNsRPejhOj9kIOX40rKkYPRQ7zATvfFpeDQs7FKIqfhpAKQ+zmgVw/QB\nti3XuwSxlwbV7mmnVCD2UEccON/0KF3C7DNApIIhH8eYo9lu/WlLb3lUeOJj\nNuQqBOroU2yG50qz0mNHFwUQEO2UP/d82FEFm2TZvBoPrj8uLhVykRnWYkMI\nGlFg\r\n=MBpv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"50bd4c3a8619ffe3a0e858619ba88c9bc8ff08ba","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.0-rc.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-rc.2","@storybook/client-api":"5.1.0-rc.2","@storybook/components":"5.1.0-rc.2","@storybook/core-events":"5.1.0-rc.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-rc.2_1558966828417_0.5707951524413111","host":"s3://npm-registry-packages"}},"5.2.0-alpha.19":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.19","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"aadbe180936233e545b60722bd6f7a3f012413f8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.19.tgz","fileCount":76,"integrity":"sha512-PH5dNV4I5HSnNfBDvYnb25NAuU6LLVlW1bOMD/+6XmrwQHPvGjFVZA2lpfq8Uf2On+cQ5v3Tlzl1Nn6msvffjg==","signatures":[{"sig":"MEUCIQCpM/pf4QvRyGUqhdIlyMCKaSvl+pupcwHZDmMqKXia0wIgRIXz3MPKKoIkQtlZB7kDWEfqdhBjoiNtBIdPN2Cby5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7gnnCRA9TVsSAnZWagAAjO0QAInghXAswQwMVdsxk3ro\nUfdqQaKRCzuUUfnbUeYH5uhUIsVKTMPx4TBE4z+yWrRkBXh1hjdoToR1TQ6N\nAUPEIhLpxEmQcabVmwRbKDQrRZ0SKAYBraRIoh6/IjCgd0q2Ui6nw7xkyL1L\nOEvarXQQ3JybY1urj1GxtPOMBlzcrARxjLPhgCpytwYuxL/KJaWlYV+tt1lB\nUJvk8/NnWMn4jyyfOsuF+fwCXmK5C3WNGYyZ60luEjj7nvrNyU8BCE0YJdvd\npv6C2O8clTjrnvIN8O4AV0C+iGhU6yHDbCRx7RObYZqvKzyGwgeAXuN/xhtr\n2/CBBE/ny2uBZxxCsHf/q7w54sH1kIBo6o7eDaujTcb+MMjl4uRG4RY8KmJj\nUkPaxk6HkIWjDiSeEP5+cpWeLNLtmTGg7rq9gjArRAGpS4PbqI/S4NmGIde7\n22F1St8z/JKVJsRF7LL/ZSVJcf8K7Qy7gHFChMDoNHaD4A3BpLdfJHlux7gY\nPxTE+pMiW6kcBdaYo7ArfNfukLDDv/TDA3+sKUJ4XFYsdifFgPY39KPC1n2R\ncMcvNyAKdynS5lFvpzP9pPWHiB2eLFnxawmDNh/kHYkSb9RhJvFKAY8xCiI0\nQFpa3iFTs5pJ9bg1Ge4/69iBfi45LAeFfvThvs6kHwfG2N5p68/oDeY4N3dp\nOhfY\r\n=9scd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"f0344d69f59e1fb556d9dc39df1f476ce7c2292b","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.19","@storybook/client-api":"5.2.0-alpha.19","@storybook/components":"5.2.0-alpha.19","@storybook/core-events":"5.2.0-alpha.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.19_1559103975348_0.14084594267198702","host":"s3://npm-registry-packages"}},"5.1.0-rc.3":{"name":"@storybook/addon-knobs","version":"5.1.0-rc.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-rc.3","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"2085aa415fa19bbcfe436af8857c4de9ad45c517","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-rc.3.tgz","fileCount":76,"integrity":"sha512-y4oFksQp4k8oBdxRNpldWk0S98vguuyWPtRQ+Otj9tWzNgY5LyggM3GbzB1DN6zA5adAbutfB9bhiIO8SBDd5w==","signatures":[{"sig":"MEUCICRDv6EUtnGxt3FQhGw5j9jDWD98KjeDaBvcQx9rmwqkAiEA76UkKUO3OPq9gQN+DyeF02+XLQHI4lurEzPVfJDKH3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc73alCRA9TVsSAnZWagAAfCwP/jX8qL+tF7X7uGTFrs/5\nMIxTI6wiLE1CPqoqd/FkFA0kiFdybJ2q6lyAeOtRRjerpVB8XBuzrBnE0ZRc\n0DCrrp4dekszKS5PShU2abZnp5VETiefP2hYU83H0oWeeWVQFkbcUrr+wpct\noyUqXgQQt44BRE7IsVr1ZTt+NRmzuWfXv/M6fko70Py41niEPrM2iJ3Zahd4\n34EBw2fZD7FDjHcjhf0fAW8E3AA7Ylz5vYf5SLL5re5L1ZZ/d61I5G8klA+6\nKBwnl57B2R8Sk7wzNBqmvqsVUAfUutKsMhepJjSrWybRJLWSN4TZR+B1sSYd\ndkyig9dOyesrCSnO8ndemwtQS5Vh9sj93kMadmC2uOCMpCMx9aTZa4PdC8EH\njE7WjuYo1nh0yx9NBk5ka+AOYBFRSfNoMl28yuptBK2lD1xAPtbdyD2Bvv6P\nxTSCp9wJ6uC1J29eZcXfvezaSlMFwrUS7oU3MVonfqkAReljHeVPKwz1qkvN\nKwSAZJSJ1wND78mCQAsEOc9P0mlS95TKT5rSkaNplvJaRgc0LE+gDO7SqX0J\ncvxNnnW4i0jZ1CEQGbjLb42949UmLArRdhJeMH33bLucb2+iz54fZewmhoDq\nnNt76p368VF9TYMEHsNrB7MuRqR81vZ6xiwUG1ZAlIqcEj9DIcxPPO/vIVHE\n/TN+\r\n=tIEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"a589ab39871644bfe44c779e84e9a9fd8e5717cb","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.0-rc.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-rc.3","@storybook/client-api":"5.1.0-rc.3","@storybook/components":"5.1.0-rc.3","@storybook/core-events":"5.1.0-rc.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-rc.3_1559197349015_0.3078002127548036","host":"s3://npm-registry-packages"}},"5.2.0-alpha.20":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.20","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"f57d6e503f089fec51cb241897b515a538f44744","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.20.tgz","fileCount":76,"integrity":"sha512-o6KyN6N350H+37KRtONDhj7JHVJauIJUf8SKDrdu/DOBfn61AREgLdNfHZHj2drwwZqJ0HRl7L9Ul21ctfBkvQ==","signatures":[{"sig":"MEUCICHyBIpYrQ8wPfVL+Ww7ySZSFP3DmvBmAgl8gG0tgYK2AiEAkoUeMnPIXJj+q7IMg2mEdgSm51ysR4CwW76eNDiHJsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8jlJCRA9TVsSAnZWagAA0y8P/RZoY4gjB1SrYRFlaO/A\nKNwD8zGP+0aSi8/nBXB5g2LJ/BC1pscxZF8EPmdy4kkCZ7parQOa33zEFLH2\nOBR8N4FQ4qcGD+/IPrLQpda/bYZsa8C28ieaFNFvm0AYLGoN6OawT0BK8zvj\n+mTfVziPXFVUmZnQpIzKA07FZsk8OCzTXxPP1axkkWnebjpka/kFdLv+cIjv\nDalSzglUBl/SQ83q18AP9PeF0fg0AfPJPAuhiuVOf8BnQU27fCaJWusKCHTR\ncsQocLHRr0nHHvqN8WuaFDaJG4izjfz5/2sW9uOXz/79ea2ivG9n1LRMhouf\nMB+1w6VJSJbRZCC36Ymq/TV+pbBW6xRlxM02k7/YRs3c3BKZ4YO4haP3xr1Y\nSzsk4D1ioDmqwEze/pOWhwp8PgIk17MktP0WoG7KwZ558hCLvyQmxj+MSkIu\ngpyB8WmdOcpI3FBSyBO2HHVNfC9kUxM0BJOb7dCIhDnv+hKKEq7g+T+xdExM\nYlQknUKGieFAnN4H3jNJxd8cEDi30MrbaaGS51gje7wxVQTi4rl1V3HxfmF4\nirSsfTwvi1CA+YZ9NGiJrXiGTaHsC1Wg3qSvhWWjeRYKoXpiYhlGP5jCZyE1\nbfmJvTIFxUho+A66qgWCQ2rY//aqH/MKUjEzHJAxApEc+v92r/5APYL2Akco\nPyyH\r\n=Zk5Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"f09222ccc015223ac613892ede16c084b0d1cc97","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.20","@storybook/client-api":"5.2.0-alpha.20","@storybook/components":"5.2.0-alpha.20","@storybook/core-events":"5.2.0-alpha.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.20_1559378248538_0.7014559640495901","host":"s3://npm-registry-packages"}},"5.2.0-alpha.21":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.21","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"3f0fba403a8b3b1201022688713a40301052e851","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.21.tgz","fileCount":76,"integrity":"sha512-TfAPKwN+4anxDOnCXfyxt9bn/xhwYL1KHTaT6hJPdKcX001HbjCaEEmEnKZqtyfsWyvqNgaFGjnMu2fQNWCwAg==","signatures":[{"sig":"MEUCIC+un2rovnTcCQ79kA4m3tNM961J+HP6tXoNyFyxePw2AiEAt9hriZeoUoh6L0BElxlhZ4bON3l6XgmkSqCttLezLVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9ImfCRA9TVsSAnZWagAACvoP+QGeApH1b7EdhDAAYuhn\nnebNsIS+b/+8IQfuoxiBrfUxNmdTJHx3z9jnc/QYTU4hZVfmxVzVi4WXm+Z/\nwzlokQFgDf8PmYI2ohx42w8Lf+kZFaJYs5GBmh7bzBknrs6Fa2O3H1u98JVm\n8rJMSXWvqlRqNrY4jAhmh2Vi/W8yy0J7smeJMKK92ub+SSfCtrBuu4rdQ0/+\nXGs+ImPolGjKPdoIh5k8NQPDbnlznyzfCptjSl3Han9lBu6hUvEvpW6bt7zA\n/lgN9OvGfXE9tGNCvh1xSSwHWhtFX4aMGVTa3EuJle8inqYxvDwnwdcauI2P\nZN1OjrX0LTyJzbu11MsOpet+e9GSYwBoR3hu4n8vuAZ4bP08luyoVsNQyYV5\na4IsGio81lrgK8iGU0oPJJ7oy5csuDgcE9WWdx/ZCcPKSRhcniDdu0FDs3DC\nwuoKaROY5am+GmWBTBA2Fa7C8DvNK2oobWWDV7abeAUfdVsM/o4Z3VvYg7/N\n5VnLzfglx5q5dmeqLdweze4ma/9O1QfxGrM3MewdTkcvlkvHB4HeuTwX79z1\n0SHJTqKYo1sZy6h5ZaJ3axE/+vGLzb7oRGVmDVcCF7csMiBj/TBK2DRJyD4M\nFkXixpcXLXXvL2qf7F/SWg2HW4z0vO7ibho6Ith72uC9P0GFatL4DUXhTWT5\nHntf\r\n=kpFN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"3bc4c3ad1758979b1f4c832308c59457e188fef6","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.21","@storybook/client-api":"5.2.0-alpha.21","@storybook/components":"5.2.0-alpha.21","@storybook/core-events":"5.2.0-alpha.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.21_1559529887103_0.12948386991783378","host":"s3://npm-registry-packages"}},"5.1.0-rc.4":{"name":"@storybook/addon-knobs","version":"5.1.0-rc.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-rc.4","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":"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"}],"homepage":"https://github.com/storybooks/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"06f1a097a87af8e8047c20e7224e4f39d6f766e1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-rc.4.tgz","fileCount":76,"integrity":"sha512-NicSL42CaggBr6iw4c0vs53N6Q2m6XM4MjlQAHDiCSy+tCCjhzqlfcWSqpXLP1HkzOBdCH1g3JWD03/D+b149Q==","signatures":[{"sig":"MEQCIAU75h5wAv3D7LRJTW5ZIyuC/a22V65hbYAJIVqyEbdJAiByOpXQVKoY/KHbBHCLvA7nx3mlwKmX+JycP9cDcNTeZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9MFcCRA9TVsSAnZWagAAjy4P/jmzvaLuVDd9ezPrH8/O\nGzd36y/olUBKfIfHW8uQodGP2xKITAaSMl6391gpiHiTQhHDf6BaYsqq2lTV\neCy5iqvIYBy7LVqDqOz4i5lYevxoUJbBvSf6yx6UQS1Fuo4EeL4VtdI8+uPh\ncU38pNHBbx44DtNkrdTPpZmX0W1PgF/XPu6XmyiLbWpQsnwLBvaw1DUUgxDe\nQmHdPj3nNxEjwUnF82r0AaSW5i0D1pFWCGeVWsHK1i3vDKufVUkJmgCdECuL\naa41QkR65Vgb8cfz2W/xJBjBgpM/TF4lOiky4UsqkKKlTpP2rip2TfyaKe4L\nU0lTPOkCwFqYMkosMssreiad7IX4We/cIDKSNJ1t1t4Jb1PoOpQ3OxCT/P6F\nhRAAaNF3rIiEE0nIJMBlm3sERSmcVRZW7dYN3tgQLfwfvXWTA9DNX7xAafs8\n/kZEBRjJplAipd2LzSxamo/ZbM/wprViSzaiyUjoaTTsXNkwJCT7R/Vl2Bz2\nUw6TxkPB140y8FYMhbjWqt/B5lpQQdLyauw7moJ5s3U/wphoWTgeCQCfi0R/\nFInNNBRN/8o8s7ZjVx5FjQV1VYf3RCsLbQoOGa/IHwe5ARJsv46mbTgWJatc\naVRAZRCayDGkdspvbE6qB62vwIx/p2BNjyINNICymq9EQ9DIbdw/dwgnWUbY\n+tQS\r\n=n74e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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\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":"1317bb14faaaac1bd45a1f1e9f8dfd4a765bd74b","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":"git+https://github.com/storybooks/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.0-rc.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-rc.4","@storybook/client-api":"5.1.0-rc.4","@storybook/components":"5.1.0-rc.4","@storybook/core-events":"5.1.0-rc.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-rc.4_1559544155997_0.607543669234482","host":"s3://npm-registry-packages"}},"5.1.0-rc.5":{"name":"@storybook/addon-knobs","version":"5.1.0-rc.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.0-rc.5","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"01e971b92851c8d775703b7b638a7cf30e3202b1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.0-rc.5.tgz","fileCount":76,"integrity":"sha512-F67IMBFQLwHQnuJNk3e1mgcIEr2o1PgT25qV18kHY37kZpAs7H6oZ08VEZ1srMv5Fl/mxCi1jTS3514aEGfyWA==","signatures":[{"sig":"MEUCIC7zho81AMsXJ7wTHMu0bFizzotIiHYNtIgshHAasZbKAiEAgK2HUNplYbXEpZeGiwocP0hDxWDU5RAxzcQSkfLduIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9rI5CRA9TVsSAnZWagAAC6kP/0l+hyLmjuNys3Tt23wY\ne1+o4Ee0S3smEsesrbqL9t4Zl0jIMKUn+S5yUxSJWgUHi4INOSfiFDEgI/tg\nrLszbh6daD0/sS8kp7rg8n0PWDb/G/KMLDJu+7yGM+VkMpYPy/KNB7q9At5g\nRPbZznCgHpOjuILDCsICNCZ8rmLfeLz2VW7JlMc6EUPD/8lbLShqYnNXU8hO\nH/fvD2+mr2ZeoIMnLiwqyJ+Jn8vAOrJ9cR6sBGSw8VuQ3YDw2kWPwM3qNlIZ\nuIW9NDVT4bNyg+NqeojVh5+01tMcGdZzWnQarzQQVshGeTRBgyYBQKKmsjDX\nFiEuIv3QdE6vPfIztNE5Fm1W727vwr5q9dWyUiXQx3u8u2yZmVJrora+OAUs\nocORvRjtFfXUjoqAeiRAif+NS12eZ5ZV5IGonc58wjUq+KqlVm3Znq2fkGpl\nI4z+wQ3ECsQRFLXhPvSlKYFNJsymhaNqGNnohSTvGcA2XUOuTyiwIILsrttv\noffSADdeDv1Y2w5OKSgX0kYqgHnphkFss3ytGMiS++7S71CTqPOqrdFWmmI8\nQ6K5g93ypiAZdbrt2R9KU3mZtxoFbjawK70uC7D+D6SFxTdTO4+UKO8/IiOd\nGb7cKALnG4Oqw1B9oYKkWbSd/lCiZ5HV2zb9poaGYc5NDxvL9CA3MemvmbRy\n7TY/\r\n=wJCc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"70d6fcdcbea52d08011d0cb8d0e842740e6cba31","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.0-rc.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.0-rc.5","@storybook/client-api":"5.1.0-rc.5","@storybook/components":"5.1.0-rc.5","@storybook/core-events":"5.1.0-rc.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.0-rc.5_1559671353237_0.14172744060516207","host":"s3://npm-registry-packages"}},"5.1.1":{"name":"@storybook/addon-knobs","version":"5.1.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.1","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8f29e4e75723ad6d5160427207e6e03a3ae1e095","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.1.tgz","fileCount":76,"integrity":"sha512-S/65Mhawx+dEG3jiDEc7ha09tFmDkUdLXOvF+9i4MZLlCSg5vXX1IHk7TLtxbHTGenemgpq2GSiQu0K0qYAhIg==","signatures":[{"sig":"MEUCIHBEIZ17OnCShv45WC7npoohkDV6ZIZ9QPDTfEgO1/anAiEAs3SVgl7EdMtCF1KFbdGYXQoqAV4tEOAc3SbX4jI3/EM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9364CRA9TVsSAnZWagAA1RUP/RCeSJWv4cG4jDJzoHLA\nf2Mhr+Amqy+RnF08umPVJLoV2qBOEyV+My0192e+dYc1OLrxMcU6xvXnlZhV\neYC6IM2/X2trarr7RwsawWvcJl0KuB0UD3WTCbz29xfCBUk7MtdjdTM4XGHk\nPugAALueQWOR/pwAFHwVmEFQ09EIQIs8AamJ/tsbNxEU3FwUSqq9w9zjOKWf\npgOkC0Gg30dxYnnnzd4JNdwBdkAHLN2M0qi0yluDpbxVs91GaB1SA/Dr5iwq\nb7Bv9tfsho5Ld9+Nte4vHWfgS3nbGS+UUFC2Z01NndRONrYlIbDTqFc5WRcY\n/eMh54YC7CSuSZ3IFmjpHy+PXLm/Ab2cyTRSg6ZOxMGCBc2FLCW/SWBQ2svh\n6ACxEARmiaETtWp6WZ4knKX3gnfXGcwBM0hUkOoHkuZOGm9wmuBTVD6tGZAF\njO4ntFUeTN9Lgb1+x71HzYR8m4R2Vze8XjzUEvs3zgsh01Epgz8yrPaA3vHI\n+2qTkgag0B+svKPKmP+c4Cebxw6Y03SfAGhKYdH3hEdWSQUsQ8xHtkCIxsoP\nicSew4AXPKGX1QzKyhNl9Wfj7VWhe8sWerNxM1fp/B/c8DqIUle7Idfg9oXF\nmppEEaeWqtG5OnHCLuPYzpApj3iOw4Bfh09h/nIwfBJ8wxEdKP9h7c3IY7fa\nsyOt\r\n=uyoq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"43dfe3f55017d35238df63781ed53113fe5c3334","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.11.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.11.2","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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.1","@storybook/client-api":"5.1.1","@storybook/components":"5.1.1","@storybook/core-events":"5.1.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.1_1559723703477_0.6332337983398313","host":"s3://npm-registry-packages"}},"5.1.3":{"name":"@storybook/addon-knobs","version":"5.1.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.3","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"238fdd72193c1936453a6824570c0a9d240051cf","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.3.tgz","fileCount":76,"integrity":"sha512-ug64vIxA/Ly2lc3LYIrOvy6Cq3qocQu4N2lZzvy+BY4aG5aYmgNJupVjQnQ6qLLiYJsGaPyjG5+74cudgE5Nrg==","signatures":[{"sig":"MEQCIH76lXXHz8lvDFtlZ8FuC/OXzDgDxO2AKfbk8tIQFB4YAiBlwMEQr2pn647h148++SRjZd2eT0EELy5zQ9OA0lRNfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+YUlCRA9TVsSAnZWagAAFL4P/1GrOkSSBHWD40Kd6tI3\nvhh6+HJubFxh/Z1HEXxOP9e3NVDZWTuHXY/sZu8Y0C7DoR89fl2pV5G4DTBc\n0O9ZNT61AQO3z+jXY53RGyY5JwPMk4AwmWn1HKPDkgHxXkZS3eYL/yMj9bM/\nK/h4Ty17zIdrzXTCK3Xs9vh0OD9gP/VUF7KNAqBwLYq3reuWlSAmGxeVEHDR\nmyQv6KsUSt4Zzssako11vU6xlKWRSOCv2dquadxOtSR/wL6upcSJP7Zhew/W\nvpnKAnLftYRD+f3anGxFnpAdjGK+uS1/NWc0ySwm6qpGr64LHGzD+pIPEwpK\nHbjY3tT9dSumbCV2VYXdVPw5YACNTaDlUHjDRG9L2ZFjqrpslsscKduKdloD\nTzYVY/18gkeScQTmbmvNivWv8tnLqAMdk+xmiYbTAM4IDjNVFjQUU6UJGzn+\nmQFqyBkRTAb47IhtKjFAkdhSEtIN5C8Fr3rKPoPNpbgQcVxB9RPTUR9YtDV/\nGwreD2b03I6a+b76Qw25+jL2bEvDrsZTZzb+6k+aSQsB02xBhQCj6J0O8EI0\nVL/k7tijXSkYAKzikgNvt3e5qGcM/ps6lJSXdahs0apMxytC7ogTiMxa4HAV\n4qsAm0B8t9497NHJ/gCx+3VxWH9DoG7YrFfFAviPbXggMk0xJ5W09UKnHXI4\nzhgj\r\n=hhKI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"bf73c6760a15000e23776bb7973148b3a73bbe5a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.3","@storybook/client-api":"5.1.3","@storybook/components":"5.1.3","@storybook/core-events":"5.1.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.3_1559856421191_0.15359455851189696","host":"s3://npm-registry-packages"}},"5.2.0-alpha.22":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.22","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1448c4762c4b18f8653e0d14a413d79dfa9a46cc","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.22.tgz","fileCount":76,"integrity":"sha512-zE0MiyCan8GrxGTSav07yOAAYNsGS1H+Y3PSz4JvzhNw2odeegd3e6DUMtxRgqnT8l6YY8qPZbA4tZYmPkkwPA==","signatures":[{"sig":"MEQCID1rNi/qAbGYlpT8znAxtkh+b+kQScaNtvX5L/cSfb7lAiBPM1Z9M6/JachHCDax4wFa6mvuU2KRyAaQb+RCnu72mQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+n5ACRA9TVsSAnZWagAAzy0P/01P3YgNBSPk2RWVspyH\nNt7xeUvtr1JfULWWo+hto0QJUQaEoXSkFPMSHQLdqk0trusbxXjrbZaNNe5S\nai8mtin4HBJkG7GzsLsPg4z5QO2ZnsFywDPe4BPRnZAf0mc6CcHr1I8GWYDq\n75CbLjoNkyywb7WxQB+OBON7hr70mf+QW+bjmTWGa/d5Z56gMfc75xCZGPPk\nL14hRVfLHgiKcu0qt5JQyJR2ceOoU8G1J3ui/XyR96aI7stIcasLVzaoa0rU\nk4rjJZ9QA6aB1D4MinkCj6+4mT64VpyVx6cqOHlNQx2qeiC7Ue7slbhnAL6Q\nny51va+POMcPXIygs1WQiQWjkENFvZwhFtnj5jMn7q5ZpAFUHhi98s/65oc6\nfNXDuNFsXu2q99WVuVsKokdVVAhufJxb+K8lIbaUycllxrmMEasndRwkuDSZ\nU1IxHbKyP7hhWRL463DhjIF1cdYwXr3/EJV3c6Q2zocpHHJ/EX68IDLMvcHT\npWGOVrXUTS7H6D4ONoBarhX8CtJXtCogHCDdYjv8H29aKObbQXYaCAdW9MN2\niZ3/vibyg2mOojZ/b17+dHLmcef6cRoA3RmrugR6MswW8Wq46HPBjMs21emZ\nx5pDwi4QQx76ggjkO2Mn0g3NP1HZvmlqf6TXtKtuEnLqdIEbISgO2OffXKT7\n1YPK\r\n=J9AT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"286ed8a585da272ffa34d3a80aed4b775af1f627","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.22","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.22","@storybook/client-api":"5.2.0-alpha.22","@storybook/components":"5.2.0-alpha.22","@storybook/core-events":"5.2.0-alpha.22","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.22_1559920191716_0.24678758132367684","host":"s3://npm-registry-packages"}},"5.2.0-alpha.23":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.23","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.23","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b1da31d2e6aa065fd2e0658d3cb056fb21dbff21","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.23.tgz","fileCount":76,"integrity":"sha512-JvPuBzpnykB+EcTZRv9jyxlcvBPxE4EgdhJ4K1eUNk6strGlTJLr4YcculrYduVhTvLw+n+foitNZNA2tQ7+ew==","signatures":[{"sig":"MEUCIG9OtX+seWWufr7P+5bu8AcZXiZ9CTMIpaSr8vtcpbrnAiEA7a97faDA1cWC8eLgiIwJf4dzKxeQjpCQOwuaGOVdTxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/yAVCRA9TVsSAnZWagAAR9cQAJuCKDJe1TyBIFhmrB3x\noBe5IsyYKNQmbnGLmQvlbSCbcZEf4STTdPlLVuGSF88OQFoDHBSBKpoAtZcf\nrR6k8jkF7zgsBBUrbmfLcbSKj3Ld8ypb6Q6PRd5+GZTyUG5U8E3uuBA4M+a1\nQYYM4yzinaex3GhvdaIDorPnjYtXN51PEFTi2203mtOPltGZnXuHzLWFba6Z\nTP1W+ACQPc0lf5+q4DKAmJHbZ9AzABzNrV63VXYul9LvfMp01A9hbBEL6lt1\nzPO05sIvmIRRZ1qI/Q7x+/YSiju4HbyZe4k6QifC/PnrvqZgYPeC3iXhLwPY\n1yApcFk67Qg5mecYSJ8L4IrWPuJX1mkGBBNCVCR34fdEtSQJOeI012iygksv\nqGP31w+5NbovQKY/HJQYYr0Sg/qV8o9eTsj52HP6XUsdtnXsqkRp6lD8p5Ll\nmdRpGxaGrVWvYNg+TdCaJt6aZJ0Hjk4Vp073EOqSSrO7nC/vRSU51qGynEJz\n2DBKEeVhNQ8iLvfJ8I1E28Fo4oY/osZy1Tg+0iQLcf1hVgE0a4opFBHE5jND\nqWuDKrTxGQYzapseTPJske/eFm2yJH/MbjRhOG9YCRETBSooSxx60iBxuow7\nSykoQCgolvre4KYMskJuSdevcuJu31C7rSe9SPzDcaxgi2zIiBH6VGOArS1Y\ncP4w\r\n=W/d2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"57c2036c455feda62d12d52826e304260177d214","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.23","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.23","@storybook/client-api":"5.2.0-alpha.23","@storybook/components":"5.2.0-alpha.23","@storybook/core-events":"5.2.0-alpha.23","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.23_1560223764568_0.1419979040734758","host":"s3://npm-registry-packages"}},"5.2.0-alpha.24":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.24","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.24","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e4f476025299c35449ccc492ffabc1f64033a863","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.24.tgz","fileCount":76,"integrity":"sha512-04xn6yGOcwf8t1iSPbPdpRXN3rXN/JxHzQLF6EXgY3zgi0NElND0vNqSlcnSt0Unv/gD3Qg1jreH7VI0RVrMRQ==","signatures":[{"sig":"MEUCIBjeCpelzp5N1wRGIe15prZHunN56w+Tp/jPvcUntqN3AiEA4NBDMxGN0/PmpWGECmRG59anYD8b49zjGt9fOGknGyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAezfCRA9TVsSAnZWagAAPtAP/1sVfrL1zkkAWFsnFTyf\nJntA9nfaFPfzRPSWnvbomQq+cS5NxDQ3Amqa59jegsMxA9mbrCmZzBI7h4t0\n5yC1k3hea5MKiWrutXSwrmOIcxWxY5haqGf11Wxy5BGwQwkDRVqii3yLVawJ\naenR2nVoZGYjBKThUENZ6Zql9PHgxxyELy6MR8bh3CGZr7JRXYh0r3rX3CJ7\n/9N+djeJiL1AjNCcQ90Rc1aezOK6O/9k1gUSrfobWgX3WnCb3HCi5a4ej660\nbIFKHbk4hGo/R1xqKKKEvCsxw6t4GxZ8u8nVPoG2kqGqkV57BcJn8WoOvKRz\nPHImuzOKGFR71FiHd5rh7uT3mB0O1zXYN853jZB4ao0xBxki9gGxTiEm7SJc\nEPKbGKhIzO97/QhP+iPXeW7Tk1kfHXMlVF5qYw1CpCArZKQLBTHFKd/x+lIy\nLKVITMsGA3OCo3REyuWZq3vj1Hm38Q5Xv+s5flg8Ze/2lUr2V8G0RBbQG6qV\nMRoUTPN1ZhDhJQQb04F3qUoWDyGFp4P6bMffIOkZ7ELIsgIuxw9o9NnSMmS7\nPOzjEwMW0Jzt8MDV3VqvLNolJ/FSRpJlYjCdw6CqGiGVsXnzUjaFDyhI+EfO\nnQ/vxkjuebYOOW1vBAvqyn3zjsM/ee/cKB46M6W5QC7hzTbjSgFHAu/W4wh/\nRzOA\r\n=H3of\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"64b7eff80642c641c94dc4fd1218d69844107e95","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.24","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.24","@storybook/client-api":"5.2.0-alpha.24","@storybook/components":"5.2.0-alpha.24","@storybook/core-events":"5.2.0-alpha.24","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.24_1560407262735_0.96059350639691","host":"s3://npm-registry-packages"}},"5.1.4":{"name":"@storybook/addon-knobs","version":"5.1.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.4","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"2bd7af24d6461c1d0be88d0ba05e3a6243ff9d79","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.4.tgz","fileCount":76,"integrity":"sha512-vWTudIxVfvN1nlli5wVOm253SWslYnnKAHMtEDkpxKuE2VQ0JuUynD8n/7MnKeFhzwAOaPFJ8H/L16WOn14ugw==","signatures":[{"sig":"MEQCIA/RZ2opRacVS3pef7r5o3H5mhCaQ/PBaSdK/QsHk5jqAiA/igU2N3NkRy8izDwnvEMi1p9ceqfzg+zovPpUPiRWXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAffJCRA9TVsSAnZWagAAnmkP/jnkNomrQben7SUCEiT7\nQY8VY4wOiXHfbSDPv6ck8X7ZugL53ZmQQIPkOiwubiaUZ7tH2W+3Y+T8qq6N\nAHxlw+dIzLtM9Fe/311NyzNOARnAPsunH9R+9fIqpXCfuBr6uDrXCIZmyYhT\nljJ6oQ7Q2skfRdpn6ZK9hI+aB0mz3sTmsKLjG5JD6K8QvPNMKN/6Yyc7JJ5v\n8Xnmdh58VoeSmcXNbesXB5iJZAG4j4zM8pq55pCFSwinW+WoMut4ZnkeRZBL\noqq5kyRqTt64/kvMz2Urd/vYzBiAcT7kFjndFSlGlzWH69Lig46blkgyp8bL\nf1yg+zbdV2nlLJCi8t+a5I8S56mxBb5h/odiUoEvlIkTyu30ldwjahIJpdD0\nAZ4o49pdbT5ZBPEFD9K6+uPLGla4S/9d2+z1gJ5OmG0Q4gisdcBRiWNjfe6U\n2XzkR2nLAFbcW2sPvNpCrHzG8pQsNBj9ssGLSx/ng4f/oH7GPDPjWoJtuwwR\nwNm7Pb3Jdidhvq7rp7xeHeRN2kbZn6OY+/O3MDk+bVW3k9f2YgF+LR9QvWsF\ncSV3eRHIqex6joS+fLl/RYkzDFz7YKjIp4Ile17n2s0pf/m/Gor/b6FvtSOE\nKebVyoH7Sg+2lNYOP15Nf3+4pArVrtBKt3HzIplxyQmc1L8Iun0qZNReeyuh\ndIkH\r\n=1pmU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"6d3d4fafd2888b13d2cb8eb1aa987cec0100775f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.4","@storybook/client-api":"5.1.4","@storybook/components":"5.1.4","@storybook/core-events":"5.1.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.4_1560410056872_0.38098602278174076","host":"s3://npm-registry-packages"}},"5.1.5":{"name":"@storybook/addon-knobs","version":"5.1.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.5","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c36f16344811a31b7e77bdb4f12c2302154777ef","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.5.tgz","fileCount":76,"integrity":"sha512-lgDI6c9E3nx0kB7odvY+6I+7WZyc/sH2mKLfwJ1jcTybPBkpxte/0wpnMTgy2L1G2JNoJb5ElRs2rMMOcJBsiw==","signatures":[{"sig":"MEQCIFrgMW9MOsZxMBNWzUqs/bb8wBkzTs9giKv6NQgdXtRXAiBQsN8fqWQS7NEv3rsY0htwP7NT7lK3Jg1643WK8wdpvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAsobCRA9TVsSAnZWagAAYV4P/3AHEqip23zh2qvV90qP\nPIpDLAC6N76qtCgZfB/RsAqVRF4ajv2knRS7UsR9Rm2eAV+6S2/L+Y5Zefh/\nsHVG4uMp+3qqfMmvcSpQEVIzsl5PQ3VTuha1jnvO0ZF3/bsChs/AsTtc6RdE\nPRWzoCkNJ3o0JVzyEUEzB5fVkDObuL/JA7jKKC+qwe1bysmm8zQap6t8ZVjk\nSf4NY84dRWNgI3T+ASIPnlf5XGsojc9JL+G1p1T73zgMrp701FMR3iC72XQB\nx6ZpTdp+KWFHTZM4kY4XuDLb7NnQmi9Dp/0jqUFccb846TvBtg5NVcFq4zI6\nfHnBagFoDuGgFXupo6F2oOzI48qsq7wqjWQY3SkKtjPAQqK4JnBH3RtpvuIr\nCgzeOuB/JQF17goVyzdvB1RsmjrYxQHQjhx7XR/1Z6ZPRlmP7lLPNSaMNeP+\nTBVGdtT1NefR4n0aKv8PueR1rn1IjAH43ydgr3zYAucFaxwo+WSOZKm4TYKT\nbXsCrGxhPoaQWC7Nocek6um6z1jjHBwHKdynjtqYKbJXOc9sxgdF5VE5ONH3\nQ8kcj8Iw0xt8IQjdVIj7S8VTc8dAzHxJ4U7ev9IW9fib+7G7ulnWgdGDTfQA\nHv4HsWXvXgSLGQcwEnCXsB7rBQDrkpVjSbqg4Rd0rTYKJYniA4Fpyv2vHRn3\n/aN1\r\n=veVM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"12abddaa2f144a65e0dc915939c8e3ab6dfd062c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.5","@storybook/client-api":"5.1.5","@storybook/components":"5.1.5","@storybook/core-events":"5.1.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.5_1560463898442_0.49102635580851106","host":"s3://npm-registry-packages"}},"5.1.7":{"name":"@storybook/addon-knobs","version":"5.1.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.7","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"729ffac85596e40635104d64df9c12c306ec8a82","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.7.tgz","fileCount":76,"integrity":"sha512-IV3SBrJTwTU09NPltwh45mdL4Ygx6nAcmxNy9EYnqud1zxSM34vi50mUhMqVp8jKnAIg6cihC1NlU/LpTyOdew==","signatures":[{"sig":"MEQCIHLnZ/QmiB9WIAio89mpfMkLdXlWUtVqyaXdUzHKp4UoAiBbOX4QwZtHZ4s2GjZSm9Ggxue4wA+2a11zccEFAZBUtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAt70CRA9TVsSAnZWagAAFS4P/2tPkAS5Balbxho3HZ8z\n7x0o7R7CQgSHpr6UK9CQXXGeie8mDYjEsl7cJZ4c7XTK/dEwTK4fKWN3QUbV\nyIZ83RHzLs3wgADnWFOB5NkPi9FDQPSj+h7aBUP/IC7GbEmt5GCKzHOwxLo7\nkO7lDbb7qHe09bqaN8VscH1fyMnqA0jRaotsNXaomOMY6YtEgp9Cq0sIB0w3\n9ijfymDurojzpYE/SUxqYCC54lANB0je9li25OgUqzPBl9xI9KcWJT90F7dc\nL8V0UODfX4B6Jjh4QYChQqN9AAQPGz7xMG5rSqqyEQmEOTbYtlDRuUYvCQ4m\n8MPPPeOUa9Nl7lDcJdY5p4ldKHrhukkmqHRnuUIOybtQwxC04AkuEeBpBX98\n/xxKyu7K6jeVlHFErGkQ4EKN6pwFq/mryM8TdVuB7aeS2mVW1kabz6lpJt/1\nXLmhWzGPwjOAQeRQMNOkfWn2VddTWD5kTlyF9F6oVUEDM9DsftHggmsJ9RuG\nCJB9FGTnYI2JVISi8/KGl33VfuINk7HB7OStF3M6V2mKzw2dqcOT3KyAo6w4\nVWurI85fj+zbGx6EXJIZlJ0ASOyy0BcRcltwEpzetAVewUDw1SxDw3tHOB2X\nBk+XqQDOegpBEmznrm43HR/HNToW7fimLsxvoKs9/ulILziFtplqMTqUeauO\n/Kt7\r\n=xl5e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"4c4c1a9fd7461860299ff70ce1e548536a912664","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.7","@storybook/client-api":"5.1.7","@storybook/components":"5.1.7","@storybook/core-events":"5.1.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.7_1560469235906_0.6484696627719697","host":"s3://npm-registry-packages"}},"5.2.0-alpha.26":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.26","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.26","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0e725827a9d68641245f0fd62179cc91698bbcb3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.26.tgz","fileCount":76,"integrity":"sha512-36+aevBfBcK8ykX8faF/DoW3TjuMIaOepIe3QStC3JqbJzQttnUZDc3OIrmP78mthV+C5r3zJLmpssABC7zBZw==","signatures":[{"sig":"MEYCIQDGue5eNtCIvyJqsUDTTIlaJnDWSjIhcFYspd/zt/I4WQIhAJFTqz+lcSqdm5au6FUvBU4cwtZSe+ezGp9/zUnH7M2B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdA4+nCRA9TVsSAnZWagAAqhAQAIwLYlgQ5qV6zcBlbaAX\nZAKEQS2miXx08SVdKob8wHxNApVfnnCH4fCrLuTsJt2PgRSlaqUQ83KWTQ8n\nQl+LiimSs/BMPNYGVE3QfpOkkHjCs6HySDgvmOZgO/cAr5714eajt/pX1S+1\nPyCANBBSbkyYrbwttp/ulimGQ1tWiA55mFc0RfAc93WSjseZCHai7pVK/mK8\n2XLD6yl/hdj3/wJioajydpTTqQ+4KHAAo/Q2JGL826+Sw6sO/+hePWuGZnnA\nlbwtpRY2pi/36NeX7fkwxz9U6Ng1z/WO5rjsJS/vbFuoEBKtc7CfVoCgIDnF\n9/z/EMlbechcLlIkQ8SK7dXuuQjX4sg7xUnJyzdWnfFkQOJYeclR2arEiTB9\nvMUw7tvG4usZ7O41AQpUFPPxPphjqkIiiNRlzAnALZtBXWah5ah9XMQigdKV\n933eyeQIaOJWnZZjWrCElg6LQpyGJoulOCg229MPEcYVKseFj4Zm0TIr8mJ0\nw6kwXk3dzm7C1J7UArRGLNeywIdygAhSyJzr3HuDG83tuISePmVwfVOTuukY\nY3Cuc3zcPKhaWf66wZ+DCtfLa3E8CLS/z6xMpaCnDu8IopUbMf6WC/DkrC4e\npc5m/y7XVREW1Gm3QNi06DANTTQCECvB74WY8aRzmzOQ50mC2uNYEPS6l57G\ntVfA\r\n=VtaK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"868c48042b65ac987e1fa0cd277fdc96f3dfbc02","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.26","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.26","@storybook/client-api":"5.2.0-alpha.26","@storybook/components":"5.2.0-alpha.26","@storybook/core-events":"5.2.0-alpha.26","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.26_1560514470944_0.4048180132993582","host":"s3://npm-registry-packages"}},"5.1.8":{"name":"@storybook/addon-knobs","version":"5.1.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.8","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f0b7cf1e14e647e2030055a8f9eb9e09e595fd5d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.8.tgz","fileCount":76,"integrity":"sha512-GCcjc3iO8YQOKdOaA1pr4INzNA3gU/0qIpYg0En3CbNH9LodfBha3l91G64AH06rCqhAYWp5D482kptKRaFxOA==","signatures":[{"sig":"MEUCIEc2POjVXmlRTDLTvXcpQqMQnhhKJ7yP5wjiMRXDzGUHAiEA9p78r8ggf6h+Ow+fgnibGaDDEFip8hogIISKOKJDZqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdA5ONCRA9TVsSAnZWagAAnvwQAI7WpqDWoR1TRtzW7PRo\naKQsDttM/AT2rBNXBYc64fgHfRkCEHyJmmlP3/jXPzoT7pi6CPX+kgRL6YOO\noPiHqUFsktaxNdGtDc7yTYcQZKN/31Wp1uDfp38XS+OnXoPKu8c3AkJaioKp\n3fbPqU20CXLmal/mFemXDHpC4HPMriMfcz/pTaDi0kADW4XvSABUlF5coLJo\n76MqTjuD4YMt/XYruhS76wsHU7fp1u3Hs4mPhkIE6hf/fk51jrXobOMTSFrY\nAwYPRzsNoa+TLlJ/1/NOsyVgRn4YKMbaoq982nqy9YK86RzoWHsncc5Xrh//\nOX73Ape2romXwHePC5ITuihbxlYocUxWxhbq1U9PMRXwGHqyRTQfu1397LcA\nqD3EcnZ+jkQFZxh1k5o08csXGd5A1fWDUQFqz3kai+l2my2uGjDeQF+MXDdt\nWFNKtorwKhBGIB9tDqhHFhOQt1BV2Dp41r/2jDsQWSuHXr9qYOeDjew+Z6kX\nbUVdwhlgMoeRUBmDUvlieyjpWXeDEEblP030OxpyZFBsDdZr4w6l+xIoBxrq\nULGMSSgrkBPe17H3pFNNy5JwXFR4b8CbGtczgwdp+gxnk3gaiFKPLNAwq0St\ni9fv8NtVnmNStYmTR4FHYmxAOq7ZcsQsTYbjxrcUwJ78xh/QFycSCJaCYF7c\n8VPf\r\n=6DrT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"d7a96f899bb0d90ef0b2ea7a098df9467bd90670","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.8","@storybook/client-api":"5.1.8","@storybook/components":"5.1.8","@storybook/core-events":"5.1.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.8_1560515468821_0.926008273632309","host":"s3://npm-registry-packages"}},"5.2.0-alpha.27":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.27","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.27","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b8bbc5fb8646f55589dac1a7dd032ceed4822d71","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.27.tgz","fileCount":76,"integrity":"sha512-bpN39+vOwuJKM/4msKYTWr7e3dEoTnroaCnLzZZvA+uv5JZ0s05GLWe3tcKm46ggsgO1N0ks4KRGG9b+uxBZGw==","signatures":[{"sig":"MEUCIGpCiQq1ZKLiw/vzQyS/eem8SFHNmYQL+WJMA/cZsY1BAiEA8bKWBAIjRhL0WexYRzXH/wDxMYAeQ39XN+qe51by7TQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdBsksCRA9TVsSAnZWagAAqt0P/38YIOXdymjbOzgFGU5U\nbj3HmNGmldEBJqSArM1iW/uaIE32pbDcA+WSvtDMfq33jRFrf0ZfDS8T16kb\nlmIE/x2Lxe5huVKpL8ZJED64Wf1yp0nedAxSQLvTHaUqIQQD7UPbNDD9xNgP\nxR9IwMS1k0Fda+CTl48FBBjO0IHB7MWH8od27EtLna4/QW0KBDrswLNl1I8L\nTN+y7d2fHjfiMr6waqHMTqW9fwqhafwCOpZoqISf4/k7eb0QDMvqXhhvdfxF\nqDIul7uLy1W4qGH8+E0ZsIwyHl2ec0yTm08nY8FM54XQytOV4OeySc6XFsSQ\nRAQSIGXiukWcqk5O5+oNTdR6H+12OQcPmrxhFUeIYJkfDDXrQLKpow97Y5Xp\nqXocUrDPFiqtMzCbo6kUhcKp7Qv9tKmuf36OXJY0Ms7t0TNPBeWyRQPCkD5l\nrxvJ2YGiv8AfHkpl2xQkNHnBiATDbkSaghw6g3P3GPDuJCqYGy9ufyYOa1Io\nYM4i4w2qdQhvWopHy4HxfcQ1zTgADZ/Yeg/jpa4CfTCZnZVz04xGJiZk/FQg\n35gNzSTQYG1Q6IHU705UUidND3GORG7N0ayerGXWLaNZBE8+3aeX+4opeG0s\ngtEcTBGHaqXiAOKP5jJtPHYF+37qq4/1VOSDp22JakYFn6eMmsbhs6/oAuMq\n4mLS\r\n=jy1d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"ccfd082e797ae50ee6f45e822f759051eea949a2","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.27","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.27","@storybook/client-api":"5.2.0-alpha.27","@storybook/components":"5.2.0-alpha.27","@storybook/core-events":"5.2.0-alpha.27","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.27_1560725804181_0.14073325884832855","host":"s3://npm-registry-packages"}},"5.2.0-alpha.28":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.28","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.28","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"296110f3b1d1e6e726c7e9724c9a000fecf227f1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.28.tgz","fileCount":76,"integrity":"sha512-PsECVfB8WgFZn+P7sZTvd2RrCyK8+ENXQBizcukzUD2+TX8IJfqLYVaZqIvv4fa9qrxhBRubKRGJUG0ZF1MCfA==","signatures":[{"sig":"MEUCIQDDUAqzwWzBmqfr5KzVLVzHVhzKT4jW1gIfIjiFD0PGGAIgZPq31aDmuu7DusI5sfANxk4/dupbnhLTiWiyLQZdSHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdB6w6CRA9TVsSAnZWagAACrwP/AqYM9Ne7fjgo1bZnSHW\n/EVfin4oFHHF01N5VIhkiMVa36SjUMPfEQAxUzEpA8Ejp46+gLKbgTKMX7IV\nitQj/cifMWvGDqf4wkHNkzsxShCJrtRmVl62XS2pUF2zsq5R/xDoJHigy7JN\n+YyKSlxb3o5uICjnVe2t6QKzCKiqle1AufByH5luVq1d4L2Mkg5T17y7diRc\njOCk683EWRPn4JNi3aBmzYyjp9MJw268rot6K6H8bCBNB/weV99OgS3qOI1e\nxM8YdU6CCJQONigvChzfg1jXBLlsgxDreSNeyy0JSnE/kGJtK5ejqdVyhL7Y\nOeyJU74Rc1fGFHpiR7DMj6yIxr+gFr3P3wU34SXb/8QP/PUSa6rv2XjiknNx\nMEvqX8wzcOvgftAM8ostLkHIetGZwCf51A2op3SqY1XxEtUvkKFhGXDsi7bQ\nbgo36ClplI6k37Z1OnU0TgZINZJPydfsWUnDiixIxZmhhU5cYbyLMmvqV/4j\nkl4a6r86ezwxkTQnvWZM3EI68q/9GKQ5Ja+Ab9zyq4iRNdkYamDep8LLqYhe\njyErzpI1v/Q/udTGOn1xlNYqZsxjdz66HweodhaPS0MzWw+lEL2JZpnItVt2\nNr4+unRgvA6U3HoXPRLCjYX1TKSzvSwNyJ5MqaeOSEHAwf4y0WDKTuzld2h1\nG+zm\r\n=8yYS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"f4576d1118d3afc4b588f97c6070355515dcabc4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.28","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.28","@storybook/client-api":"5.2.0-alpha.28","@storybook/components":"5.2.0-alpha.28","@storybook/core-events":"5.2.0-alpha.28","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.28_1560783929827_0.9025092067224276","host":"s3://npm-registry-packages"}},"5.2.0-alpha.29":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.29","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.29","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a9671af493aae3f34a93a9d732468c57c3896e70","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.29.tgz","fileCount":76,"integrity":"sha512-LtOkx392Do+WOQFnNa8oFf6wU2kBSx+4Dol+Citt5z6yx/eCmGAl98qHKrTWQd2KwGcZf5uZIqufvFunxcShxQ==","signatures":[{"sig":"MEUCICXrAQ4nghbe+uwTVB10jq7qewLxwgxjJdox843MVowsAiEArhNAtOBhf45LQWjGFpdFuLmp3vylQ1QWG8txd0R1+Rk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdB7FoCRA9TVsSAnZWagAAIqsP/i11GR9+tkJ90SrofE2y\nwjIHVrp6u4EZBd5roXe5tOJ+tno4ZK0e4LeuKOPNxh89r6gff59IoQVPtxgt\ntotp81Yg37ei4WPYR3iXYOM43ZpIMqa9JE6A7PuU0hXqk7G5baon/MPj+pXd\nAk8w+7X0uzjPo17xl5HA2K8aDfU9Hf45U49NCd83D5fqjooQkfzzM7n5+Dsm\nOpdmWqTV6KuJllKdd+KAhjbkKLd0ZIZ5leWLg4YiZlKsQdmZQepZcGFa08rq\nc0fhvQdq44eQ1JsshvMnS1oxY4ZV/Oy3KO+KbZl75RsGDyfmdRs++5LR9lN1\nleJer/MKyLS7LL3z6q0ptLmAXtiHyiS2fy550Ef616IHBXDlf2iHv8q2AxNm\nYdy2YPz1CynO3bVHoYsvfUz5zds6nKW7mAwmZwn+wA+8WhKGNcarMLBtjlP8\nffVF9+0Uxs4dKT9xmQlHmSJ01LHGWgnqcdI9SKUaI8sV1jG5B9XcYRQCz1m5\nb2hGlzcwRjs7WKmgXiLI5f3g8gW50rO2CwtMJVhuEVHuyfORIJz62/JfZuim\ny2y+SPYcjI7l//MaZzAwjbngnegR4bOW8GcbRzvBliyqGez6wv8f4W5C7yeG\nrl0ue6Yzrn/yXXOpyriizYezyG5NZ6SbMI7/q2+1iSTXEEw/b12M9zZ8wGeY\nYRHf\r\n=P0bC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"113beb6a0a39cbca06d6a57bf6983948e9bffd55","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.29","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.29","@storybook/client-api":"5.2.0-alpha.29","@storybook/components":"5.2.0-alpha.29","@storybook/core-events":"5.2.0-alpha.29","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.29_1560785255833_0.3807011078312421","host":"s3://npm-registry-packages"}},"5.1.9":{"name":"@storybook/addon-knobs","version":"5.1.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.9","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"74db07fd644b41e63274f8754fbfb18f43d4cf01","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.9.tgz","fileCount":76,"integrity":"sha512-7/bICMYtR9CaTqfZX1kT2pBOTLZo3HxeslyQKWWsWlNElV33Ym2d0PPL5eS36eFxG/ZOp6lQWIFhunNnlmP5xg==","signatures":[{"sig":"MEUCIGhAOTFQKgfthPmRlfpBIZB4k7D3D+tw8gBkYPKBdbCWAiEAg2N2Ogd1oLWtSebDAJT3BPHcJteS+3lpbdU+86ZyS2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1322981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCtUZCRA9TVsSAnZWagAAnpAQAIYQHsPFe/LTgGaap/nu\nrkC4hXWXrsBybcV0m0VNVWA6hzADkFsa1QRggBjhu/Ik3ZiiPOHMBRJ9337w\niqIwP8oI/fU20UYojii/+M2ot7PvE5CCb6UEV/3Y74ean+FrSbALg20GJSQA\nCdFV40ywDnJSlyu8FpNZRu42vMbgWvnY9adTaPX0vb0XLkJmPTueSZQhdRW5\nf6TWdEEMsULI+M9KlUJKnzWhfOswAoN2U4LEteUUwtJyudYWoS6iIjbKjM6H\nCOcACI9MvxckwQICSQKzckxSJT8eVdnmVP9DyGh0s0E9stMk7nYYcdGp7XvN\n24UNz0jgJDdF84nMUh1HLjogXAs+H65MX2Y1Ci5G7+zPUgj9yyaf2s2IGPus\nrEwFBvWxwrAAwHsiJMhG1WC9BG/6iSsPWj46scfGmR25hCUeLfI+nIBFxLdX\nnX8RV0WEj2Qc1ZkNFn9354aer/x+HkA8/8mKzk2XiPde03vfobJIbSvBsjr0\nheOwGKDbyOy3b3lehDaDPXQSdLDJCchj4L7HQO/QR92UlSOOBlm7ZBJe/+jD\nUmi9jLR78Fm4wVPj9tyUduc6MgzpOCKwh9FuD0kDALYEZw5+KAPfdzC1g0T5\njgnvCfrkBdfxAHxbAGUfafwHzB3zq5hOekICjAHix/SqTpFkqPmdpFELK8uK\nIFrZ\r\n=xPmi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"e211b3765e57bc7cc32b8dd9579d86ea03a6c5ee","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.9","@storybook/client-api":"5.1.9","@storybook/components":"5.1.9","@storybook/core-events":"5.1.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.9_1560991000352_0.1055191988936579","host":"s3://npm-registry-packages"}},"5.2.0-alpha.30":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.30","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.30","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"30e92a5b2492bb150c80d2217a55b1978ff56f92","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.30.tgz","fileCount":76,"integrity":"sha512-Ttrv2O2kNNdgWJBltyIkd+Np8ocqdLIJ5T6DMnAxrS1KYTky2UzY1SipZGa+p+Pg+QD9CO94TDh8GVTaWigdjg==","signatures":[{"sig":"MEUCIQC44My252jHu2o3IwVUPE5ekSssPqX58bCL33VR2Yc7aAIgUm8nGbGIHfhC6b3Ld96SZRljU64ZnWB2iFFQYfOJKGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEhLCCRA9TVsSAnZWagAADlYP/AgN3025qaXfjGL3C6nd\nmxKkmhbHXdVVqZFHTWyvX6IpAUtxvpVNjpnM+TTgEJzKaICqcZxmRgXAV26U\nflVhFPy2Q//BhwEIlBVfuRhwKkrHA1tVHc1ySwyIqTjuDe4Rz9saBBK1mSn6\nMqHq9GOiLy1gGP45BsH6O4jeD/tb6QkXpX90c79PNLDNiVYpOsMV+m89Px7Z\n1D17AVeaIiKUe1FqGBX/JVgbi6KA4vEyVUQV2CyuWnUK1Rc3XJSAltw+PGqj\n0DXrBUoyOGNV2dtNU5qeIJCLVrDdVG1lqbyi1EVNn8m0/+Qk0HMMG6m1ZTMx\nhEcWx1R7g1nZ/xSdoUVUWY5V1rnoNK0ZjUBkWa5vVsU+nFIfyjtnMEYTBhVr\negD0fPhqRGMvUlUMSfYDpbi7il61EgIiF9Hd0IFsq3An7EYAdo/2QIquj28G\neuCI+/nCNxABRO9RyxktbxuZItVD5FeRKD/5ugVNWmzQ4RvkOLp6W0LCNpRt\nk5g9zLRIMrSRqOXzyRA4potfZRV5JDDGOOlnFwLA/I1b5D9xqLa2pzy9YO/n\n0zm+j3gnhmVGkwRPePKIedTzGrHuWXASkvkHfG8HCZgeapj3f63ceRDNn4jn\nkovX5KlX8bOEnVliNurNYIi3BtHKwv5ejhCoxartmqNwv6JT4oLnfOyfEJy9\nyAs4\r\n=C/7L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"e5e0aab372783c76e8d1209df7240f4dc2cc57f9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.30","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.30","@storybook/client-api":"5.2.0-alpha.30","@storybook/components":"5.2.0-alpha.30","@storybook/core-events":"5.2.0-alpha.30","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.30_1561465538233_0.5347034283653729","host":"s3://npm-registry-packages"}},"5.2.0-alpha.31":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.31","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.31","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9e92432bdeefb1afea4e4f2a5ef870623f108baa","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.31.tgz","fileCount":76,"integrity":"sha512-h5Pf3VA9YBT9w/pVSS/4yAkJ4DZdoa6+vRI3Z1J/QsfvbxuUxa8Zv2BNjRWdi9E1QJvZn6P5WP7bHz1z3181iA==","signatures":[{"sig":"MEYCIQDfAfURFMUFrutvyo8GxxGAByG6N33m+RFVv8f+vcLHmQIhAOvjLn/KANxy5ApLxKoWbR1KJjdxhLix7KtP+kvC1gZg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFEe7CRA9TVsSAnZWagAA1GkQAIw5ZTGwMx0259vpDwoP\niRg0Ev/7ieQg3WJ3XJxO8B6WOI5sk9wUW2/By9Z0kjJE/e0Dr48SKXHgNVla\njBmFBbQG++ACvWmltuuN3XKAN/uY+27ZoeMVJ7wASoxt+1EkAoFcIbMCr92f\nCgGEu1P62JIYbbKwnloXCzfGrnWsYv5Vpj24sIEhjc55qxfWXMFgwUDOGVT/\nhfIUaI2XDpdToiacabDCFb9Uk+eEBnIWwSTnpIEv8S8nYRXTNZ20YkVCLpUq\nPwJWn8H8B0sL5OyDklk9EEqN4PSfdRdaRyW8DlLrmUb3zY2V/jbaUiSF+X2x\nTXrmR1wtYS/fWm27Uk/oOyH6xfHLQFTcjGo4Usc/70U4J4RY6+3u2pJcQinu\nnviOwngC6p5cjdYoEs0een26po7IwrAGi3dmXycEwayjeLWAvBk2kVhO/R5E\n3B6wsE+Pxo4CKki6ioeO62ikzZDe+hucY69Ty3425X+F3RiwXerMI1hOyh5a\noOeKsCZTxiERD8j9Orxj6pkMr31mKHZiIqtplnOtFj+Qx0wGAfpR1UbZlhxs\nmjXYO3rDNgsheeSPXad4dYJ35BM1OydHL7J85cFh+9MZvpEEKBAi3TU1WVyV\nm6bl++1FyrUyqqPfBYrEl+YXeyTdOGUXvqiLahDr+R0/C7+VURsadlEyxtX4\niLsJ\r\n=CyUZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"d6843e3e5ec041832f281ad53dd95965f8de7e61","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.31","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.31","@storybook/client-api":"5.2.0-alpha.31","@storybook/components":"5.2.0-alpha.31","@storybook/core-events":"5.2.0-alpha.31","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.31_1561610171131_0.8057673573298798","host":"s3://npm-registry-packages"}},"5.2.0-alpha.32":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.32","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.32","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d5a9fc02500bfb33e1317bc1a20a8e543d395d48","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.32.tgz","fileCount":76,"integrity":"sha512-d3gmqSk819IlnTMFWtbsTmBs8Z5eQ2S70m1dp8sH62GrBfQy/yEXuv1yzvUHwvJbqK87So1bUduBoK7XkYxX3Q==","signatures":[{"sig":"MEYCIQDM/tNyJnHt63Y3V91hKxSNQSoj6MT3OLGo1IKs6/xvrAIhAMHFvY+jr6W0Eq/VN7dUw+KHeCYEEuEp/Tya8O5WbGEk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFtv1CRA9TVsSAnZWagAAHs8P/3/hJAieDT7I/Vbj/3cw\nKEU3dLsXTvEBIVfM5atUeJVFmreoAkbJ+zulSFH9GNV3BBr/xQcvZkXc0EzY\nWwTit8z3w/qXcARRg1ttFJ8vrOWLew7l1+YceG3nFZI/HaJIp9r2cWZtGqrg\nOYV89v7F5lPhWe42NMmDZOkfi1S0F717YsAMTCjltt5jBEWPw4dcednl3XNs\nVWl3Wf1ugmiZPaV0Nz+RZ3ceHb7n+v0bNN/m0osCYlkZUgjF8RgGLw1TVQyt\nt36FJkKU5F+qJTbhppUJiNPDwhIgKds6M2EXYytyQ01p+rzZoe1bfjab4SyV\nL0auXs7P6j0dQi+6uOQAiNmCuemO9oWRnAX9S8X1L1MOZN+2W/HVhvH0jILH\nag/tjNRh071NW8RbPLcFQR4XbeXrW+P5wYJckTIE0eyvjF0FM8WvQLgX/CYm\nULfMdi+u1ObAhTT+z899xEvkJ+R7hKQKKjE5lbn9nf2umAyxVSBQDW6WNnyu\nmj5cYoajQA1+Qyumfb58d7NWVUWPSmOXSp/3Pw/rn1obAUkr9XUOdcK09l9Q\nl3mEOXTNcKADBhi8GSIj8SjOznFOQnkc9JftuuN9vyoeU64Oe5Vi8IT6xRYG\n6EFbl31IQhFuNSbeBgnZutC3QqoaUwhRX/uQ3XsXx74ukTfzSX7A5xFneF0w\nmm9A\r\n=kQUI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"298866f7372d24a9914a8ea19091bf222f090e77","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.32","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.32","@storybook/client-api":"5.2.0-alpha.32","@storybook/components":"5.2.0-alpha.32","@storybook/core-events":"5.2.0-alpha.32","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.32_1561779188985_0.5484765644362752","host":"s3://npm-registry-packages"}},"5.2.0-alpha.33":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.33","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.33","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c59199ffdee223f4c5a1f259caf856d923551827","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.33.tgz","fileCount":76,"integrity":"sha512-QOGCPwVPSVwc6fDtLeP8pvo4aMT2AVeEIGrJ+x5+tMOBr7AawypuYQW2BuK8iejIOQS7i4MiXdBmHnUEScrIuQ==","signatures":[{"sig":"MEUCIQC0gjqqg840iMzRHtFmHQp80aq3KvNDbnuJYTcXgJl/YgIgNRGGOPjd4ONcjhz503Oihk9++Htxl9q0170VSMybdIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGewhCRA9TVsSAnZWagAAtbkP/2OWRd7dk7ghfz1crdLN\nbJSaLTe73f5SWWh2uCv6Qr5So/vTMsLtZ8C2jGBGZ7qBhMlhG4d+DthK2JYY\n77QDY4pYeHtBgMQIAXOT5ExrgyvblF/IzLqYUyRu4+yuEId9fPjw4sW5opAr\n/YIfmOlR1+MW2SWpZk1q8sX+HF+2YZH/9IDnvw42Zn5y4ofzznOmO9oQsd7E\nHVxwrRI4A0mvTTvCporrOo9CHIzIslOIg3GjGpmb+vyipVLmw9WEwX14UxMg\nzhz13Rq2HHjn9KEIdoJ4dRPFOs4+Og1VZ/BM2eduWJptO7JRmOsAC1cLjgYq\nwIlBaFHB6YSNAB+koUEFf6q/Gh/LLb0QWzyLERBHHh1PlBTrf8TOnXNazi1G\nhshnCB8qJJCVi9PUaMCADJD125UzLWtzsNpvcgVgwjUE7QsME9S45TbDptIX\nvBGzmJm+1kuwl3vDYpu9JnHlG8h1ODdFiljY74Ko2ERV5nsKZ3MsGEULxNjM\nw6Gfn6oTVOIMsswJV/yJof+8UOOaMEBCGYRvEjaaCDLBz1RfHBSUqj3Nheud\n/NDHASW41bRkSqxzFbPKnI39hXg1NXn1+rwDdUN0R7d234r6s4dd5ovA57S4\n69y1lvziEUSGNKEwx1skH/Cu/nqn9K/IQXZcVc1Z+mQjmdVQAKcE864k9L4L\nivRi\r\n=5UE+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"a0561d267a393bbdc0e9c5e4114fbd07bab54618","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.33","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.33","@storybook/client-api":"5.2.0-alpha.33","@storybook/components":"5.2.0-alpha.33","@storybook/core-events":"5.2.0-alpha.33","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.33_1561979937000_0.5652322039636555","host":"s3://npm-registry-packages"}},"5.2.0-alpha.34":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.34","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.34","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ef176a6ab4349e0571729488ed6dcad8413d948c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.34.tgz","fileCount":76,"integrity":"sha512-rI6QB62o3a4vt8WwOvxycVnJEP2z9q/M1un08DJQUjIRAskrgzTavkeSvbFvLFKpqKXnNoD09rt4mgwudgqW7Q==","signatures":[{"sig":"MEUCIF8uWlzAefrWNnfpTsGq+GQ8J953aU0sEE9Jk67qKdG5AiEA+Ad5xRy2AEmaF0ONxbGPe/q0ZqTOAwYWiFlMbdZTE94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGrXmCRA9TVsSAnZWagAAVHwQAITdAZ5GAEPUYQGvnPEg\nYRB1GrVqt+Ior3tOTkBfWMQVJWdMVy28IjiomfaHSwxp7fy5xV3I/mvwpK9M\n12taJ4cXJpIHJb6R35ae+EEbKg3iyeHDb540nv87bQU26EU28wWgvgygqhkv\nTsuuOQZ7cn13EKfDrcCH0DMxEskHjfavPZ201I+ppk9vschInhyxSiCoodvz\nBDzPxIo7YC4BN2W+chY+QHvCtqZJ0JQyrSlh7/IN3ts4BOs4oQoDL02o+tbK\n76ow98wjVvCDZjWmHDh3xxd9cbLFp+WVkW6/NDU0/AlNeNhqeLtFWkzUt9DQ\nEpiiG1rMieg3yHzxnfubeBFXLqewzR/54iIdSXsl6cni/UWNb1b/37jeQ550\no6xNj0bOn0ofPjFaGnEy+5kvSFM1OOgTGyDj9Jp2aybGIeYxSk/VFor8qOyw\nT44LXnEveV1AJkDmJNutRJV4xYnB1WusnWb/txbdgWu/bPRG0KhOIOIAd+2H\nZ2d+xH9meqiK8p9Jeq3/5TzqzB7dqs0W1CRBoRmA7NOb4VR2Il2ISz+ovv5W\nMclpB68gIBW+cv+OsKvb8w/BFV0vafEoZ2revHtNzXBN+ZT0mXc7VBAY2mgx\nnhDlzs3bfLoOClWHDqnOcFnHERVfkbTKpyHDfUhe1g3Q1jcKE443RlyCGVLy\n3eCY\r\n=S+kQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"367f72455f59e5bddd0054d421a05f3ba04f0424","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.34","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.34","@storybook/client-api":"5.2.0-alpha.34","@storybook/components":"5.2.0-alpha.34","@storybook/core-events":"5.2.0-alpha.34","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.34_1562031589230_0.49314189616463255","host":"s3://npm-registry-packages"}},"5.2.0-alpha.35":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.35","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.35","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b0cdd041c52963536eec7fde4661af885d125ea6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.35.tgz","fileCount":76,"integrity":"sha512-Fe4ifiQvmu6laiNfh8YMXFrTpbV9Eid/yzGYbR7rhtqeJJbw1B+Xu4+O1dtiSMmfP4gwlEn1GaSogvbTf0B2vg==","signatures":[{"sig":"MEQCICyp6ObjyiXIbDQzJTkED8TXo6qTY5vZY7wbp1L3LU5nAiBh08oCi6nLkEuNZvg3z8BuahXombB0/ewzs2IajOQGRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdG4ZACRA9TVsSAnZWagAAsRUP+wWbOkFqqaXvctV+eHzO\njD2w7G3HSkR3sS2p9awBea02ojQqaQatpaS+P8lNY30Tduny/yNhPUmEzbXY\nXw2PqS8hEfaVMZ8K9LnUuVcCj3nEOTVNmPmQ/B9kk3w+oxplnhG7Y2mrMG0T\nGo/G+kxGJ4sM09VuIYZphE+378V3YWbLi1JqwEpbK/TQh+BlcE8U7emJl4h0\nPQ4c8NYqFoIIUW5D5Zt4Hk7nb1i0WmHNz6PqF5BRPYkOyGEF4o2CcBA7shtO\niUMQqyzxwkk8+eEmMEPR+vuYxC8d9qKjUCj4XNnMJGiangaUlS+4Th+sFAR5\nGXZehjzYOAWG+icXdX2Z9790vYYqjmgPYC/h7LcewhZh/quvAwXLJP+akH0z\nwoFV3IkbhOtAhlwMyZVTnz19NkH/xOBXK7BcfQXeUP42AZTB+H1wgZk3n/6N\ns4YTphuCwoaDXz/EM9pUYrbs01gg7C71NKD/n8s4LCz02KOsdJUHvFOwHExb\nIytU78WtB7SKKi/HfUVdCw5HEozSI9WGJWEQ4SHp8C5/jEKW8Xf4Bn7mue3t\n0X3o11yMhdQaYMAwyxNnhTWlUfLlOWdxK+EOBuwt/Zny/6g8SgiVF+oaFCVD\njSsCjtma1obnX4RhiJAV4x84VsBVHNqEBmXMZ2/Kumt7kSm4bwiYEGPZrMrJ\nZDpl\r\n=46tZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"69ae9c7d545e18d782c79b73a6ff3ea613beca75","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"10.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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.35","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.35","@storybook/client-api":"5.2.0-alpha.35","@storybook/components":"5.2.0-alpha.35","@storybook/core-events":"5.2.0-alpha.35","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.35_1562084927697_0.6015844015805312","host":"s3://npm-registry-packages"}},"5.2.0-alpha.36":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.36","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.36","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4a8db3dcb3b2dc4532ede244b95460c3de7aeb76","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.36.tgz","fileCount":76,"integrity":"sha512-kZDvPCh94lPcjqKh4Xuj7Z/4wtNVYd+4JYvq6Limvui/jIrd/zxwfymoijoFudJKRWpwauqpUuPWwly5R02iaQ==","signatures":[{"sig":"MEYCIQC77LG9uzLBgrXaXtu10tiAN5viengbVsWOEPM+0bQXPwIhAOIsnVkg3cljn6TSyXvM1z1eOowwjGVoE1KwwWA6+m7e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdHyRWCRA9TVsSAnZWagAAGZ0QAJzAeMO3iIP6+TKLBELn\nK7F+86vDqB5VQhC7I2FKFaXNnD4+qBwZkcOpeXplBWnFI+qCDY23trlVYWo/\nmhnKYYe+bT8mZY5pUWomDXtUeyIL1AD5QZ2E5hySboRo0pCKf6JvSa2ukMiv\naGhfZKxU9nWZhaI1+bfW74imx/SiQzEobe0cQVB6S6FCXIcFOl9KCN7Oa6Tm\nTlyEo+gqNRmWUwMQZVkAzwtoKJ8gr+xaplxHOQfULqF+ply++hRA2Kn+EnSl\nPjtttouqix14IUkrrhW2zRu7reGWtOLrVhWyjFm9ywf415wuun4p4d1rE4Ed\nSbwOac6FVI6MHailnlyMa9uSGmTegCbW0roT2xXMpj81sQlXvn/sCtia3fzy\n38KqBhYgqEqQnUccKiNq8rYJPQpcU/i1DZ5HyW9pFQVjSwX4IkJ75F0WDx5h\nS9q+rv9oKzG3HJ6WhAtI1poMZyFasBBsig/hJcLt/sWTkd/nUAHIqEXtubxX\n/GaYKckkw3AkcLg5hgNzr0mFolaAF0/L9T6hFaFyhuDluKmpelWFbyw7D8FG\nNrHOqcqgdtXVLT91Y56lamPuE3V6hJqgjy1ajY8z56XWTjbsFmEFZzLn6IU3\nlphdRshZlKTceOui4munWIKPgqV8xJIcAmgDmXLqXG7pvr8WqnBWs93fXtuU\nN8ZA\r\n=z+cc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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\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":"65db79f6ece38afbc56d28abb37f5eb21c40a5d3","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.36","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.36","@storybook/client-api":"5.2.0-alpha.36","@storybook/components":"5.2.0-alpha.36","@storybook/core-events":"5.2.0-alpha.36","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.36_1562322006064_0.3918225049946116","host":"s3://npm-registry-packages"}},"5.2.0-alpha.37":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.37","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.37","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"bbc1a57be2fe2e70bfe8324512a4ae365bf83bae","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.37.tgz","fileCount":76,"integrity":"sha512-txVUfn2GKTTOYv7ttIwzAfvO8/pcw1QrrRP4A7/ESRPeFSGldKPfXLs7mt+IPbDoA9379yH71ZM5W/UTIPLHfw==","signatures":[{"sig":"MEYCIQDYEpFASt8aXHYNDUa9uCwXv/dqQGMh3C4Hm8p/doIY3AIhAK2mqMwN9gaa6fxUTHXpzADyOFAiiniOPWOetudJwCca","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1323824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdItBcCRA9TVsSAnZWagAAWUkQAIFWStbsb1YFUMIOt4VM\ncvChUPY/VS00ljAoWWeJpETrM1eVAP5IMkZ/jgmpnQ7uPvxafSwK0qsCfzJn\nFZYRXZlFlz0ccyvZVHc5XhkPOMktMmq99UoLn4mh1AefCJuSiw+K+a6fPdaY\nt12+s5265fmANN+Dkw0nx/Int5A+3ERRKTlPBOxShpsnmtNmzuleIuBGb6TV\n+0oTxAQjkSJ8+mWNc/b/adHx+xoWhnL3D4QDE8vsbG+CrvLsF1ukmaOWVlQs\n5U2sR3DaemTNSR/OjLUcc93MO9c/WqGSZ/OHisPwbwq2w/jbLrzi7IhuCB35\nAJuULP2XiSZ/2LLFTm2fgloWTGklmIvINZgzpsYj4etqTQt8QmHXBU0hrENA\nU241oX0uAGV5UnLjbiCwFEOXyRP7b8twXAoeJmvSr/QHvby0Xn38uruztv6y\nAcx6bX5v2NyXdz5ItVvvHUSTVFXvDBusTFWLWEkS69LbRQDYU/oVLvyjLnCg\n/La13m94UhNDid/7Rg8lwkW5Z9tXy6595VVayHwuTFPm3GSaqRK+X4eTnlaB\np+Uc/xMXXr0mwI+dyZAIvjrljSpwp6TQO8IvCLr8se/oHs0SQgXE/XpesHTT\nsyYHPAbQQEi1112Z4Ou4JxiXCOV7G/UVDJFwLDSZp0+6cQ0YpVMu/kGZvdf0\nQ/UL\r\n=p4mD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"8d82c6a62b4cb827f759e292f053f2d8cdf428fe","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.37","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.37","@storybook/client-api":"5.2.0-alpha.37","@storybook/components":"5.2.0-alpha.37","@storybook/core-events":"5.2.0-alpha.37","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.0-alpha.37_1562562651580_0.3316831056184353","host":"s3://npm-registry-packages"}},"5.2.0-alpha.38":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.38","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.38","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"dac2158cbcced762a8be0ca0780931014c071d81","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.38.tgz","fileCount":103,"integrity":"sha512-EtMQH8+OcKrRGNL/zn+3Y6YKSO4BObGeup3HFWZljy1xTKKt/vkvkoHv33bPF9NAQ2UPrlF8WZU4bRJzg+MUZQ==","signatures":[{"sig":"MEQCIAi7pMYuqR1b+6JF9uldZrFCQEf6rHNMCVfVrRZeU5lGAiBGsDt6gk2RM0DjQvJEz4L0RVAaS6g0CJiQB9YcalYVng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1366993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdI45lCRA9TVsSAnZWagAArd0P/3P2GI68HZLN90V2HdaY\nxVXasPj076YKQ+NAZa7FmqJ8ZmB6PQRWCye2nayucH2J51nKQeJbd/Gog+Nq\nFpCutDG6+kw5xDVg/vA00QBIU04hbwqtP9iI6PSO9N/yqCHBk6U0Afcit7i/\nPtg0Bb8cdzxP13Uc2YCocJXCFPxgSs9UVpQyZSZz3n4U5WeX7TNEGNw+2ePG\n15XzDVKSnbMmpasd1laBSqWrCaidt3INL/qjNlBmV0Sb8wfvgylJWkZOtJUA\ncZ+WgOPkE3AymrEVr54SETbod0n+cCwlISpt3AQlNz7jZ1a2cY7SSc427Xun\n18wwgBQLyHqBmMwm80KSkDtOqI2z6zKjYfQO3oDiz6cUSpGWUaOtIQv0y/YW\nQLjZKzWpFulhcqdEAvhiGZGad50i5lKvA/HeKIpo6qDcgbV6GS+H7j+gaSr5\nk6yF8LQwdG8U1Y8N+0wYKS5MmMIayCzyf6sYNqSlOASCsgmnGNcdjc5e6Gkw\n0LsrzYFRrMjp/sYHg9ukTq7y5sx/pD5TVqqS9epj/1INgr2o8zzIYIid8hHB\nAZNzvPUM1NYtYSaXDbV9edJ9IjilWM2xuG66c3FpQbmtOpKwQYX6zWX+UHDl\nHTNsNdy1ddEZzRKZqJx/dXXclXrPN6xaUJQj9+ImAUytvInLG8q+ytaGxafy\n+WRp\r\n=toVo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"30078af6de38ce9793a46b1c50a3e378dc70225c","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":"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":{},"_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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.38","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.38","@storybook/client-api":"5.2.0-alpha.38","@storybook/components":"5.2.0-alpha.38","@storybook/core-events":"5.2.0-alpha.38","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-alpha.38_1562611301319_0.1952265111345204","host":"s3://npm-registry-packages"}},"5.2.0-alpha.39":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.39","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.39","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0f029333b550d299e2c2aa5b180aecdba5249007","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.39.tgz","fileCount":96,"integrity":"sha512-+xBv8Wcf8tCZRTR4uL1SbtYpQKlGPTQ2WiX96B2TuDmb5Rn3cXfa2TmlpWs1hLEm6e1LPEq16i9wadZh7GrsaQ==","signatures":[{"sig":"MEYCIQDzzT56Yd2p4fU8m4Pn3zAwNU5uTQbbXzAHK0QmQOrdyQIhAOEg+YLoyUpw5dhH2XbIhlXOy6fA2iNSH9GNfFLlpxoX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1345686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJVJPCRA9TVsSAnZWagAAxxMP/jk+kj1P9ZNj4nwFcKKb\nDbtPWNFuBz5mCsHgQEgon7CiZ7qZrLL2IullQodCGW9K6JZ79W41obpCbSpc\nS+JQL+7Wc8GLJRvaV+wPmNJA7l/uFW7HGuZVWgvywQtCqaYAT250R/nXTqTN\nOSAp+CXKOxlpMUT01euF4BW2FakTlSGdHfnFcR6itXXaqeraolyoZ424ZyQP\nDbzr+K6z7uqhydeBPWRn6l/kOLSDzAC6fLFNqRBdz8OrxUXJEIQXnwKbGfPs\nq6Nc/XYZfkI2RPFA2gcBIh8bRofkQfr/fnYOZn+ogKeZdXVEmhy9WgBRBt1z\noYNdLeZI7uFSATNcySo7nv8aAAfjf+9wwwkpdJs2HSQzK6RYTkv1wXxEB1Fx\n8iAoQN81LB/UA5OHlTzXv2MTe4/JCyhTotZGIATtc3O7XAdyOH3f23h/wvRw\n1+QY2e0eCgpyMI0HIqsb9PqoPBWg2D29miKoREuFKGbAq+So5LZ2sKPMZFZg\n/n94ZgYMOnvM3HXpOjB2l3fuXtqcVY3aZd2EQaM6Lv+s8QR6AbFFZ7r/zYv1\nKkYsRDBkxeIfPeV9tJcDYU1Ke3gnNNfXXu89/Q2GO+Vh4AYx3HXfsewTdJ9f\nQmdx7hvwixIrK5kflLjkj6yEsExWEmNobWPqKpTCw4yeJd7xKu8BMFRcYj23\nTDZm\r\n=EmmW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"3b17da48003c5b242b3c8505dd01747293fc4cc7","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":"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":{},"_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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.39","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.39","@storybook/client-api":"5.2.0-alpha.39","@storybook/components":"5.2.0-alpha.39","@storybook/core-events":"5.2.0-alpha.39","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-alpha.39_1562726990960_0.9178185355702437","host":"s3://npm-registry-packages"}},"5.2.0-alpha.40":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.40","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.40","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"79963dbc538cca4b88a39de4245b67e08f9c2324","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.40.tgz","fileCount":95,"integrity":"sha512-KCWHeH4x37z/Vqg4nbYYZ4tbznNOugVxQTQIYP0Hw6QxbTrJKkrVf+bNDl4dryPaB28su8o44mjzDHgG0zvT4Q==","signatures":[{"sig":"MEUCIFNV1SxK4uWSpHjvQj4Bf1SLmmHII8DRvP0PSNIqt1PMAiEAtaFYPnyYvsDt8kv4V36Hk9YDpvaOqxo+qlzFMh4gvr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1345556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJeXOCRA9TVsSAnZWagAAipMP/0Scge+9Berz9evAU0fR\nHD4HeZuAJ3lNDhQOtX11YFJUM5xs1Uv9r1ScPu4/fA0eLKsfIqOnmbRI11Jn\nxEiIeml88JkWOwwAfX2vX1jpkLt2+Qo2DE9xQRLa3e766TqZ3eSbXiVKCZD/\nNfqggUPk2e/Bj/9VxpDESdHTdSyDN4/ftbAHD64NDOABcxaD63VL9GDt+CDU\nE8p4DnV4LCsA0SIEiABfiWYG3/iKfkkdzWMj9UCwR+/aFWw9jkVhShVPAr0C\no+gNMWnc9Ay3RPQd3iWs4eHpnf+dKJTm3nCGsDhA/gkza2olj6aH7wz8VTTP\npKJfpQ5Btv/S5lxbCD5WVV9ufxXh54J/o8rUWwcgt4bRrcPikTf/7XqzbBBY\nvqb0RiZgDJJktOhqhNcxKuA33i8099VZ0XEnazSePQF0W1YeHSHTIYPmgEY0\nHBHCDjrqf/2CmdIWnTFoPstuh7bVb9C606s7bzxd5qh+azL1gvuJ87VAC4si\niBXFUSWcByEE7yzcjEgceiyn213DqJGl/zMONqgqSrKGu+0XmXxcw860IOod\n63OoAwYH3pn+dIPNvdvIDWap0+z2MyKCfc+YqMexlVKbPIFv9N7L7edXZGBX\nwTvH5WrD3YluTJhrXm3AYsaH7gjs8GasNTUMn8g+wLkjwr1fxF9dT99mYhJe\n1CFh\r\n=aeNd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"c41dafcbfe4d4e87ce6f6663bae2093078d2ef87","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":"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":{},"_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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.40","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.40","@storybook/client-api":"5.2.0-alpha.40","@storybook/components":"5.2.0-alpha.40","@storybook/core-events":"5.2.0-alpha.40","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-alpha.40_1562764750131_0.5715417008780206","host":"s3://npm-registry-packages"}},"5.2.0-alpha.41":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.41","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.41","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"df4a005dbc73f7d3b75a5dfcd6b5ac7553a6cd00","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.41.tgz","fileCount":95,"integrity":"sha512-sNwaVj5QYVq+elyyH2Noy7FulCCJtoIDGN7dIKlHe+jaXJvbVkZo94Toa5rpQI5hp/n2H08EntoQlLa2ITpPwg==","signatures":[{"sig":"MEUCIQDl9KFn3JXa575U5mAG6Gb3noAD3KZ5P+sY9Noeu8MCwgIgCoAszGdhW2OP9dzfVjXAndtWJUO0w9QalaYQ993lpcE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1345818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJn3eCRA9TVsSAnZWagAADZ8P+gIIug3UA2PYFdFF+azX\nGHm62FhoBYpiJX3Czx2r2OvoPdv4jQBtFznMfguACrXzM2GX2YvMG13inCS+\nwIwxvunKaya80A3mE66iGp04QGOlCykNZHZIO37MO0e3ZYiOO18KXeLo+/A8\nE6q73dZDHDBRNDQY3MBi6oGh8/r39xkbOkXhNdJXNTpVDa0ENRK95dheDSDZ\nVY+mo6zWGYgY7HCYcFGNbveOd7jrzGrlA+DulicYMOawFT4gJw0rVmoICY75\nSGGLHt3HRi/OO+BmvW+5sxVnV1dWSd8BP0vsY4WvA1NnbnYQReEeIPjvbAIH\nOVpQBwjttI8NCVhLBJUtzuUCytofymAFNpZtCY4kOfqtrNQzN31uxlnA9JNZ\nJsGjmtQVjkX33mC8QiPlk2p01nzetab1DZ5tZwXXMc6bQAOoyrQoLkOGAdqK\nsYhokGLfBo82WA9AhhmZJ2DfNjpILH3Vfd3mSfKhj1lT/0MjSJap08psgSV/\nklUNcmayLm9V5mU+aNIH5dfl93Tqz7rp5fRfk8814u/Fl5EGBtMuhuIARPxk\n9Kv7RsKbKRlQ3H9HAoZ1OcSpb7Y+b17FZckSCLDZ3tdn9cJowhWyZP3gzQ5U\nykSw0j8lGN97NgY8qe2Nw4lULnjxrCHYPCpiVrB1w/SLwpGhAoOpnb+0RR0O\nTy2E\r\n=4EIy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"9b21aea75b615a4673a14b3ad2963d0fc924eb9a","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":"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":{},"_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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-alpha.41","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.41","@storybook/client-api":"5.2.0-alpha.41","@storybook/components":"5.2.0-alpha.41","@storybook/core-events":"5.2.0-alpha.41","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-alpha.41_1562803678202_0.6834101741018541","host":"s3://npm-registry-packages"}},"5.2.0-alpha.42":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.42","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.42","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"23d1b8f7ec2fe4c17fb5b0e337609ef6955a8360","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.42.tgz","fileCount":95,"integrity":"sha512-WKiwcJbYDb9en0Yv0+j+TEWHlLcv3TAMa6ObIYDWXuxHvSNb7S5vZB1F/i3DtsF1LpDH5MhXoevNz3/Nmrhd1w==","signatures":[{"sig":"MEUCIQDToJMit9JQQdRDXe0TEjAz+9H9BCzw5M6yZikbWEvRQgIgAU/bnJX27KXvmnV8rv+ZBNoH8Yh2ThCL7iCba6N/8tk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1345818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKAIBCRA9TVsSAnZWagAAcoAP/3wyDZLzhywK2S88eXqm\nLzdj3sgcEini5QxnjIr5jbxO/GNTJlNYiq2onRla4fYOmLL5dc4ZOob3Q/NW\nCMVjI04QbQdxkn63rf8IDFZNMQDrrgqKF8aptnqJe8nbjqSdO2npKS8myNvR\nUgWziUwxKf/KqNM8KUiEdclGkMeFk92sarm7duVt0+QyiVQVZO+x1Kxkb54c\n7tkJJ8kDIvmL5gOjTSb/SdZFceHQD66IGD5fFBIGx2U8q8s+qM2xJqbSACuM\nrbxGdhIDcfAtsHn7Xj/9w0Qq35DB+fWvTrSPRF3u4jTadxohJ/XorpiWGrbR\nOS5OZSFZ/gAMvQyK6QquSdXBWTP8rLOcS/4Oz6JuqOrfM7TWMMbvws2N/uiq\nnPya1tnAuCCT0Y1Bv2FfFHTIdtUQqTFfi7AfRLun8n2nv8KGOgv4uTSFBiOf\n/zmXSnxuW9Y3tXXtVe9BsbZw5sUQNNJMohS7Zt+HOkN8U8EYJo5CYwGNdUrT\ne1jIIfcX4tgei4BG6YiGJOhUqje7TTOvMhnfyzl/Cl3iLOQ0HfwwonZEaih9\nYstBfs1wpg2638CvFSkyDBeBDxzJXuoRnNwHv6XrG0/zEc1kzVFX/BLfvfI4\ni/i3UOo+ITTUsof+VpSKQIYgid84NFkX6DzMf8zaPTxA2kM3pjfIJ/JQyD+6\nm7nm\r\n=4gpG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"b6ae7280391f1d2648b6a530dc1c8629bd0ae51a","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":"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":{},"_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-alpha.42","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.42","@storybook/client-api":"5.2.0-alpha.42","@storybook/components":"5.2.0-alpha.42","@storybook/core-events":"5.2.0-alpha.42","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-alpha.42_1562903041057_0.9027341758485821","host":"s3://npm-registry-packages"}},"5.2.0-alpha.43":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.43","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.43","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1ec76fef319f34dd67a82b9dc3ba145e06c21b0d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.43.tgz","fileCount":98,"integrity":"sha512-WyMkcFkOdxdkxknzxS7n/qRVphDycBSOvaFWPcc/mjLXozM8PSbXlAOV75LGsQRAI3fGxvzpg3Mqtt9EAF7Cfg==","signatures":[{"sig":"MEUCIQDz79/ZitXU1cfEoCUjQXvk72/4tQ+b7B63sjRZ16Ra7wIgKFFTdAZiNhtgfoJ8GEWFTeIJvzihgo4ia0lL3JFoVLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1348028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKeMjCRA9TVsSAnZWagAAIeEP/jgtFdVJyCDr0Lqm2r+l\nsaC8mjYRdcIzfA0Uu7LFxZd8JnWlU1PwEVU8J/cE0125jmFk959CL5apD0GS\nI/r0A2tYBg7M3fMWqR2bmi3Te6EVt/OYlIoisHZ/4STCSmIKNek6hzILmIbm\naIbuBCmLVZnwaMul0Xa0phy6IjUNLUlA5dT2s1apR6CsgeNMuUxHoZLGN0lu\nr+JHhUTCp0xmi0s1iDq5L1UG1KSvPLcqlcw1CmsTKqh6qPACp9pz+QoqCX4p\nj/RqcKft6298WJ9xGYQSR4zp+teamAfpVj6PysghRctHrXaO2KRt0E2tGZXN\nlPVcsiI5jq0PpEz6zg4XlxOmP47m7EN/FsbR0EQSXgIA/CgXVhKISwuu5T9C\nkBWqK+vsANn9xw3Ap+xkkFYrTngRgl+isb83T13tVT7ECu+ProlW4WZF8x5e\nxeBf2ZCpbmUUg94Xqq4ESI/4xU3Bd1veMm4nywTXFxA23MYYr6sLs7wT9VDI\nUdd54zF8JLOp61ZdfDK1nMG8z8t6ytC7+UVfBfx4jSceh0/mm4bp76v68lmI\n1Ke4K98M9FufY+1/zz9QRpb6c/4ZeKwelnWmvcydXFLNekKMBfgeLHZ2emxN\nbJJaREO/3ITRRNunzeuSbgrfEIX77KUi0xzly96jgqmEbChfhT8+nbyNo2uO\nCYH1\r\n=nAcM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"2cbb9614f1bf8ac711ab2d8155d6f12befe8bdda","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":"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":{},"_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-alpha.43","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.43","@storybook/client-api":"5.2.0-alpha.43","@storybook/components":"5.2.0-alpha.43","@storybook/core-events":"5.2.0-alpha.43","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-alpha.43_1563026210344_0.9254706188443502","host":"s3://npm-registry-packages"}},"5.2.0-alpha.44":{"name":"@storybook/addon-knobs","version":"5.2.0-alpha.44","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-alpha.44","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c7ec9a8fe1c39b6c73b989c09eb5acc59e316293","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-alpha.44.tgz","fileCount":98,"integrity":"sha512-oNC6PdT9cwXJ1fULaljDCXug7H5Kv5DrcUFExj/u0NQk6mHmI6D62msVEKnntqMeuYco9LhXURWji+tkwJJSSA==","signatures":[{"sig":"MEUCIQClwmmkq8KR4w7RjMWIsdt69QH/LNO5dJJNKzP4iYR/yAIgGhmqDeYYyZJlJM67qjqiF9J948TAf3KcRMewn4oFG2k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1348028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdK9j+CRA9TVsSAnZWagAAdpsP/jAFtfK5xPVZLT6w+kjX\nRItBhIath2eBnahO39dqZExjagSZDWx1Nj7CZyOkT3tm9vlhEzCvBHwJUEeE\n4y1Z4MDamLPgFhqzmBZoi/XIxEfJbSLOqOAn2Z57VDEflacJXNAWJmdTS7vO\nlsZs27Sb8u7n4B51PWKNwY3OzD1sCwQxZ1ZV6Hfet/U5vrYKz8/wirrkYs1K\nYefz0gC5sWuN3MY6tXE0Y7xpoow5En0etOw69SmPRqUHJE5EXD19Qd8TPNDi\nLjeS4SvKcyMFCEIb7MFyVHwwmCeh2JVMkeViZmdhWdiLSlKZiTZqeM+gNz4U\nrQCPNEByg1nEbfpucMT7xyjowsJirFxKay/hKvaAFq9ay9zmB3I1ekjb6Ndi\nvH738BG+nbGfj1VuQut0wnGpPiNJMoPYhqVerOa8w6UFylrjvvE9Zparrsqj\nPAbvPfA3lw4KZkSpF2cwk8qCM71EQqvkTpiBE21r5PHfqt/R3WaKeOGI8Xeq\n3Utiuwh/OSHLFVBk/HvFPnBd3DhLSmdA2KR7UMfV83GxqM2mgv+nZPs+ihbv\nkCIeq/MitttDoW/4mrlNjKGCdQgRNCgfAZWhJsWnFVqJUyit2L/M0KM/BM1k\nLRMia3h5L7OtA42kH4l2QpiIW3K6YY+RCZJc704DKBjyj5rvEpICRJjVyBry\nfaP4\r\n=kKfn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"f3487c68e4d171d88c9ea66fc76802279ef75dc4","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":"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":{},"_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-alpha.44","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-alpha.44","@storybook/client-api":"5.2.0-alpha.44","@storybook/components":"5.2.0-alpha.44","@storybook/core-events":"5.2.0-alpha.44","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-alpha.44_1563154685936_0.4832828184170954","host":"s3://npm-registry-packages"}},"5.2.0-beta.0":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.0","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9872c6b4b1b17c77ca2e8fb920a6350f6db5052d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.0.tgz","fileCount":98,"integrity":"sha512-gn4SMj8B41eOtxHUNKeeIwlUwIbDN9cm5ywTVq4tJ0xbky0p21zEVrHm+5MLUuCcmGDWgLQ5oZEtHadJ7wmHgg==","signatures":[{"sig":"MEUCIF6RVGQw7IIN6fLmTUgS5YbvF7RDnPGG3na/7SDbp6nzAiEAqnp3mhUJF4SN3kZbUDsXhhGzv9OMKhrWLxqHeS6s/+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1348016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLHh2CRA9TVsSAnZWagAAwfsQAIyfYTNTTW+Dx/KWEpZw\nYWhhickgKPl4jnYE+3AFVQabkTS9fHqsUQlhFvuNN/MRWZ5aPiDFWiqmZY4o\nW9h8x5M1qJaFhY9wAPzJDVvmXeyUYpbmwjUF1dmPnFrAWIK8SgMYFnr7LcbZ\n10Od8Z1Bv/1BaMIcT+CclLWhCFBhjkiTyPzDE0BVP3TThlbOKstwMacfhMEj\nfwAqA7xXiZJAmpc4sIxqIS9C4U+ini5Cdh9eeMCYBxgiVMIXw5LPO8581bnC\ndDvT+9PJDs2uLDGDM2WvmakdipHiZgITT9UnBY+rulzheJPl9SUbrBQEuID9\nRgWQW+aa0vtfAquiFtKQZ/f/lIFgQTScDWjpNqTA+i32ElDftYMw91H6PMse\nalr6DrtSmtUdVRGz9ZAyh84iw//oU3fpacSNmth++a360UTahT4YA9Rgadv/\nPSAt2IpZNbiFuKkbpFq5jUpdtNReqCE/vSNh7YlagBFYqyk7gc0MXOdTQFhL\nLV6WpEeyd7WzITBnuc/G3q9e2JnzNBQdgWEK0bW5batcACbQt345ZmidTDbv\n/bQ3mz+DHgId7hUMdRer97t5kDFe81XN1X9rViwV/6o17DoMycd/RGB9DIGs\ni1qGJ/QcSLzZl7K2i2vPEto858Thx5ejaGO6DKJx5b2OoThVXOe5AW2OQs7v\n940d\r\n=89hk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"fbf724f2a1efac7a33e66713fbec1c9a6af0a7e6","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":"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":{},"_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.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.0","@storybook/client-api":"5.2.0-beta.0","@storybook/components":"5.2.0-beta.0","@storybook/core-events":"5.2.0-beta.0","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.0_1563195509545_0.534108293733284","host":"s3://npm-registry-packages"}},"5.2.0-beta.1":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.1","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c151855ad94de2625ddb1f46ca6387dfe6cb262f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.1.tgz","fileCount":104,"integrity":"sha512-1TAQROs9vOwvfUegUslryQLgey+jGID1RNMU2k+CBweDDyijuYXHktvX1XBCIy9xitxS4++B5xH7BpsC2LJsqg==","signatures":[{"sig":"MEYCIQDMdUdxIQH/O0kdFpMU/yZwhItROntLrTCzJ33m9sta7wIhAPDZya2xbi49d2YaKOeeoGTN395KrPyGcG42oKzH+0yb","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\nwsFcBAEBCAAQBQJdL9ZWCRA9TVsSAnZWagAAs1gP/2oXY3ZGq/Xfw9i+zsSc\nD93gi/hfvM4FZtBnzayK17d6CLLzEq4ty0dz8yzNlHz9nVU0RqWw6qJVJs+K\nSPPB96411jsGYLZIw4WA0VWSDv5blwtChmY62S2rwaW3nPuTrsdSaUASxg9d\nOgT9NpKPd1isLT6SIiztK6xnfISH8lbagLoJ+8QbzbJ6PdrEP4J9tFxUUHHG\n4h8RRF8NFcBFnf0aBgCajOCCqhyHRyPFUg71T16jsL7e3htT1eXH566qoZ3c\nSdStMke8rAptrosXQ7iiz45IkoTvxN7SlTND0P1Xxu882r0c+2wqZwVIjRse\npRKR1orP2YJ9yhCw4nA/jHFxbRJC0qUiCQu4oM3E9cbvTZE9P662SV7oGleD\nzfot69T35JsYjp6lQp0p6wZzfYr1c0bewR8jkhh1E+hYpadCZw8KlpOdrLx4\nHKNSftjQ2PWvluRp6sUOykttkNqyXQdpqcoOb208K6ek1l4fDHQDU88ws1CP\nprOPuPv2RP9orMi3luwYO5RNncusglKytRZrrbIfTHjwgyziXQJBh3NVbJmH\nahuiuBZiGLCH1OgMEMzSQ5F6AHS145NgY0S4xSS8hPBsXE2+d27uHEP8HkfJ\nn2K2mtQBEr8biW1oXOkesNbYhAouHbZy3abeyd9b8MKEspr5x2kAagKaJPDr\nOcNi\r\n=r5pC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"cec7d5c2825c520d4fbd6a31d7f5ceb54d84150e","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":"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":{},"_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.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.1","@storybook/client-api":"5.2.0-beta.1","@storybook/components":"5.2.0-beta.1","@storybook/core-events":"5.2.0-beta.1","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.1_1563416149358_0.26387565888123476","host":"s3://npm-registry-packages"}},"5.2.0-beta.2":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.2","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d4bec8d8ffda93048459dc6041c6689751f7658d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.2.tgz","fileCount":104,"integrity":"sha512-AENP6k0qK6BdvTBIolAmTlOZhhCfYzjItPpl9r1dTFbHhZsfz37ut1XwfvvWJ4BAVJcDfjVJeCAVUsaEHI5a5Q==","signatures":[{"sig":"MEUCICibO8YZStpZIUDb8FCkm4JfV+1CswBxsmJEHfHno1DwAiEA+NTRUSt+eyv5Ea+9GY8VivwOphw3buut3dvVTac0pqk=","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\nwsFcBAEBCAAQBQJdMIHJCRA9TVsSAnZWagAArmMP/RTqtHuFGGEzAwAX6uno\ndsOypBDmi7Eyaobf3RTP56uIiD9rl+6LwZdrQ7Wrb8B7QpbAD79g6xfXCCaf\n7iTZ64xGK0HHX9m1rSiFJj9TE1LdmDv2L4yIu7tr0Hfzsf485UVXJU02Jo+I\n7fHOO2LNEUq11kz8eVY1RmJGJMZ9eCKT0+GirKOdMzmZrMr2tJJ8P9omv4x9\n02aCfpIDLCPlcZI1ap/uQGixCBjmvMTTbDcLjnOHpHoRUqtrPDM3uRtQU98J\nkei+i7bUyo+yKsz8askhCiM39SclA2rukz0qdz3fCpJXAuF3Ut45TPLZ3uTd\nHvxJdVoiKQZ2n+PGFoPT1UVOWdEQPVWOp5DETBkH2G0oE/ZnY7SPZzHCFodC\nV5bDFdVWed6LxFAhzU4wODZBYFXHEXDnZxldkPbkeOsIFgWvQi4mOsARy2gB\nn54Ms2TxZvTyw7DPaAos2JYIqz17G6JsdALz3OwMoPfj3G/Eq3sbjs5wHUUN\nKR+htnLEIBUmZENg7V1uRL+F+0vF/ysRnLXTuTCNqirl0yg6KAYXzVqUkVzm\nFjn9xMmE6McQyk2/bXMGjHfEXxciSFpIhoDiRDmPxDXm2s8pHOtsYub2iOCg\nzBWuMHU5EUlXS/fkazwkHKV2J/LirWtzHNFNR3xYXkMaoY+BiUM7JN4vJlfC\nG/Bu\r\n=K5FT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"d597cdd048644c70c05c9c00bf0a999dc1f5b545","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":"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":{},"_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.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.2","@storybook/client-api":"5.2.0-beta.2","@storybook/components":"5.2.0-beta.2","@storybook/core-events":"5.2.0-beta.2","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.2_1563460041026_0.4122233906921575","host":"s3://npm-registry-packages"}},"5.2.0-beta.3":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.3","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0c01d1e711224232186017bcaae3c69046fad844","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.3.tgz","fileCount":104,"integrity":"sha512-dHw2UFhuoi2a/iz34kqFKnxVgYUAosW28VLmQdtog1/TO93JL+ePzsgmNJJYSq9H/aaROZdP9hXt0KorbGVUDA==","signatures":[{"sig":"MEUCIBQRiPFew9SjzynJDp4SDZNEgcgTtlF9H9I6riGpJKb/AiEAwdGMDgNBRBtHk0gOzHQK0GhGWpPYpk0/Dal7G2H5UKA=","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\nwsFcBAEBCAAQBQJdMbZZCRA9TVsSAnZWagAAitQP/isPUuAsW8cmdhxXw/xB\nky/3rulPUiKgPwej/GU3lH95SK5B4+212N6zNNu3vqQzrfe4rUIfWsGkBm6g\nFLfBQL4mSy2Cmt3zfCgWBfNpEAU1h5nGj7/9aOrsJMjUWVcOt+hxWmxha82m\neJWc5yGVGCawu44+n9TJ+Og/qS8jrrtvwpAykPmdoJFB9HeR3B597nLcsLb9\nOApMY1+LtyPwC9U+B316NvC5U28bzGDswnvBMteT/l5sEAETI4t50p5uFrDw\nbdVswprXn6S4VYxtPNE9ywo9BItZzcX6lJS9p5nWCBFfrydI9hBnmAmHH5Bc\npQqE/9LydGOf7jjfxhueWlqt5anpiCjKHA0UqAngFuOO0zEcyTwssVsqEy9q\nrVDZnFsMj0KHR6zjPvXgWDPw1lMTmfRXXZPkCKCaCUqxzPHrXNCDP8Ki3/Jn\n7UMq3GzDLHhpPGx/Ho4IiTzRghunE4+1S2PAO5/IPZ3aOiBhhQmKgV3Tmtju\n7tCyOKM8tW3dhz0yaamM0iAAAAnzeApVrwKwCtMqhnaO1aAAXZdnBVPBY3mA\neTxp6FN2L5h8NOxnDBGUalH9LZoUcuRC21UO05PS7TIDq7XufFcDCN9meiNk\n29hYbcOsOFdiassmsLpyJVxroJel9hVcqVa02U3nwlTqs1tD8GjqtXDrlC5k\n6t5k\r\n=hCjq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"e788841935adb431c9b9acc2b23ebf6410aadfb7","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":"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":{},"_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.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.3","@storybook/client-api":"5.2.0-beta.3","@storybook/components":"5.2.0-beta.3","@storybook/core-events":"5.2.0-beta.3","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.3_1563539033144_0.5801753447100868","host":"s3://npm-registry-packages"}},"5.2.0-beta.4":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.4","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","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","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","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":"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":{},"_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"}},"5.2.0-beta.5":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.5","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8e84975f5274396e5bd5f56bb5b6813c526f9f57","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.5.tgz","fileCount":104,"integrity":"sha512-zH7DNuUhdmP8sxLjvp9eFei+4gSuWo22Hjab1kJgCuAayEoyGo4pGHN4IoaZNhN/bjaco8kFi7JjMRmOh3cIdg==","signatures":[{"sig":"MEQCIGlJNin/p+K2XzHTVZzdLle2E5SrIMQks2PFszqFLuCzAiB33H7Nfl67LKAHT5kUZ4DuMlCQjw4V5+5qidnHYmS6sg==","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\nwsFcBAEBCAAQBQJdM8hvCRA9TVsSAnZWagAAiNsP/3kUr6zx1VYajfb1Js8n\nKtR297vQH3SdRJvqdAJqpG9s2Mw/sCNblOpTKaoUv9fs3H8JpJlheq5nc88d\nMheTIbaMb8j6/n0aZ32Gfc5cSINmOoLdjdWikFIZJu8g4Ss6tkNVN8xmumBl\ncwiicy3Qm6axheT9SpS346I2jt5Q+AYpIEQGcRvaWiNuwLK8PRHfR1p/1VLZ\nq1/P8vYjJ+M565ErY0oKgLThf1byEJjaWukMWFy4bOPDAKi68F5htx8+7bqG\nlGEYLp1rFjLI8qRmLH9SG1emGtrjB6LLqITszsdDtNQaatRjYyPAlsd1rFaQ\nuBq7HPUgdU7TKjUxybAX3YWd/Tre+zhQ4MgGCwK9oH1OJNJyOT6GdJ5P6qlX\nRrIuJ7kFw2XyZCpZXwyOSi1enC74I38W1agqQwtRjoKJEO5niQOhxdiBmwGg\n9z4+gt8m6pjf0RZDeSu6m6B5n7htqq+E+8y2ZOLekbOpk8iXxINVA24cQh6e\nAuG9GOLqRVsi46pjkiwcQJchptZLq8nfh4tofIpX5h6XQcPHi+jsR5sE7bA9\n98FWgUctTSRVX2zNorcZ+TMzKoMbgXTkHOQhDGHKY6ZU8Xve1IlxJavxTris\nKZ77LlfD5vmAlcAbbmPPNQk4ZJBPbJ3NnOveFdrc2c77kldUkq798FkcyS/D\nnvpk\r\n=E4Ek\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"ac9176fd4fd9df7d4c9aa3b165e73723bd603553","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":"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":{},"_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.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.5","@storybook/client-api":"5.2.0-beta.5","@storybook/components":"5.2.0-beta.5","@storybook/core-events":"5.2.0-beta.5","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.5_1563674734897_0.45488008383082246","host":"s3://npm-registry-packages"}},"5.2.0-beta.6":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.6","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6bbbacdf648045d226119b532d46162c5c1d0728","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.6.tgz","fileCount":104,"integrity":"sha512-YuoMBvu4mplY6GPa96sU/170tpZUtddOB7kCupOMfGp2ZAW3vnKcsQFqBy4Mf6BbdDXWecNntb3/+4OfPFdxxw==","signatures":[{"sig":"MEYCIQCSn0K/N+wSZqTNAuYY3tvbtXiHc74/gIGyLcn6X6UZRAIhAML63HLdrTvUlWFnEPa0b4qfW4OyB5D0CS8jcS7hD3dH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1364619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNfwwCRA9TVsSAnZWagAAV30P/3hz+n/RPSl5w40sAqyo\n6mL2orgWjxTitCwBKcpyQzlhzQtdhBlu+JVLJsRClRTJlBc3+33jg2VJpl+3\nBpQN07T60ozq09Z6qKW4Re8OMugrWVbSsSXvcjh85V7pv7/TpoDhuhzUWWnn\ngmSB3Yjl4g+ZrmMW+ChxR9T+KXncEzbkH7o+WUAsUWtnjjisW+KmTMg1yrpM\nbQhYET1VAZL8NC9Yzx5kHxiSnuSaYNxEM/NWCODtlyF9ITI3Pcb+SeS+y2zR\nmVki84v5hS5hD9/d5GHn896sJnkNFLAiDX06yhIFGEvza4XiI5DhqwKfUjfQ\nqRReceeFyK+Zye6VrKf6HAOAtjrGZwVEHh0z7ZTpZZU1jLM1OdhlIvYoK36U\nz0b4DkhcV0enQL4rquMZYkA0VGxCERrbAfnuXgCzeHyzrgd4cmNHQEIStFco\nugyd2w5Drea+xePUh8xcYEMn5J4Egm9RDz7DqEbzr3By2djSIjvnbC+mMXTG\nxM9xe9LvfC21np6cUMJOMLIzX+5XznogRC2ILnnu1ou2wzOoboECv101slJY\nG4+mNRqiW3EOWYmsHLCjL6uWJZUgBb3WJOzN2nN1po5BxswjdDzOfMdqLSrf\nzH59pZ03vcPmNQnxY8DIYX9ElbN785hD7vxmQqV31hbH/b98wWOmHjXbnvKJ\nObiV\r\n=CQZp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"6853a5b95ae9145c52ccf9241d7738283b2f7eff","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":"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":{},"_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","@storybook/api":"5.2.0-beta.6","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.6","@storybook/client-api":"5.2.0-beta.6","@storybook/components":"5.2.0-beta.6","@storybook/core-events":"5.2.0-beta.6","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.6_1563819055687_0.8082488644129975","host":"s3://npm-registry-packages"}},"5.2.0-beta.7":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.7","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"00084c44dcb9d5e1e12adc889baabfcaa6d1d2ab","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.7.tgz","fileCount":104,"integrity":"sha512-us2jQl+PKr2YOEgLlG6m5AZdv7Yz1GtZzYrjnU18jAekDfqPLD1blGB5zj41BoSECkIg2faHtMDnW57/2Qxa8A==","signatures":[{"sig":"MEQCIDJnPNKOq/WIzAXIRAkIE9DtfrVpAc4GjHavSl1M4SDnAiBIgsplBG9ff5y8gKt5JCXcoh7mmHqjKL+EfGtiFCyM/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1364619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNtsOCRA9TVsSAnZWagAAs0cP/jiEVbLKi+pgD1b34qOw\n5uak4zP6Q16Ixg825EUc9hO51KqWkD6yJ4cLeg4/Lcg2qjcpfPGZLc9VHjCS\nEf2OlWgf5yDq3sP561TX8yIRY3G+q3wDVYDFy8DvpGPJgOKEegwVfj5w6j5T\nwVIXEnTFw3enBDmvArju1mlRNJbvvU/vFKseWTCUKc/ipQSknceWkks+cBoT\nuUT89CWOPtqClPkVsHMcHB5GCLJL8aznf7cEqccb0rertftP11JKJmuWYTwl\nVb3yJdA23ejHo7vkNcEWHJwlkl5pw/OUpFZ7kM94BwO13ycqBFJ5FBxCAaCj\nkanvL+Zdf9Tb+r16800jSXB0xHGlnXiF8cFnYC0cr41AHdP/wDwjUDBsSxeq\nSiqJnWFpfN82flgp/bHr31xV9F3cPw1GFST+aaO4f9wZv4ARA67QfZVCFnFR\n4ylN0W3RJcFv7xYo+AQFZd48UYCJ9lKlCMCuP8lGcLojB1Csx975L49UsiOt\n2zeWBYScmsBIMlh6g/uZuIAT8BvFbKHgs0b81kCZxnYI01OvoM7SoFcQLraq\n5KPI5g7VcyobN98zW4d86GxsbM5B3NVMwBdwzzeNx81gyMADWzQLajkOZt4v\nIVZSaTDddY3SEUZf5CH1y6vWMK+hQJo+PxpWiUTDkn/7XrM3oZ9Q11S0kkaV\nYfCD\r\n=fmq3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"0232df78f63549ed94e4809517d23def69ec419d","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":"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":{},"_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","@storybook/api":"5.2.0-beta.7","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.7","@storybook/client-api":"5.2.0-beta.7","@storybook/components":"5.2.0-beta.7","@storybook/core-events":"5.2.0-beta.7","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.7_1563876109812_0.241161120705081","host":"s3://npm-registry-packages"}},"5.2.0-beta.8":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.8","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"52df3f489df265474826cd910dcc131c275ad444","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.8.tgz","fileCount":104,"integrity":"sha512-iB9eFIYngZsW/lyR+p3fcVvicgU4pEc2l7Zalbd4ZvD9eqMPEKUg+ip+hkM3rn4fCRuuQQiVjR2MYLOnsAKvrA==","signatures":[{"sig":"MEYCIQDgH+gVIUjDV3vg6PDopxGIvqLWASR73bNBgWsWKCbxhwIhAPx7n1YkHMHhQ6qfAIFYLqiCKJPCaAsS3cwPZgzL6EBW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1364619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOYQtCRA9TVsSAnZWagAAnqwQAIa8n4FSL+uKgvU27wlM\nWgw/nSo8fL6ZDmPeD473J1eP7a2KuY+CSYRBYixdCWmKyyEHiHXCApBrszKF\nt4cOpvj04QozZoCcf14rmEgyw4+n7fTGEnCL/cH6hWBgdpFZtZQurx3fhDqE\nIOsiO8JM5PVhEo8ozqu6yaGUc0BmCkpRfZoswLhlJ2EceU5/WjYzSK1CU0L1\nGwWmNjPGrQeBisHInNMznoQlPzrobSEYz2usEWNwBVjn3RgruRA//kPXpz8I\nIiMyVoUlH3xS5MpZ3tARFIutxqG3aiTp3pHBZY6fx/8OnTg6zHeNd9phPmm3\npr19Zx9EEKkRTtz/16hgv2tG1AtXA9+XgHrIpMhIsPvNGgvy8bkE1pL2xdF5\nLGMFtTPuFzIygA7UbnJJ7bbqaZYDH5Xo/K/TeGXxnHwVYKJGd3I5aGCNonSt\nJJH0Sr70mOIRYs8RvFdZDWwvksxxHUm4mR94xG1OQc/5DoQp1J4Kk4wHay87\nsVNcZc+jCQw+6DB9/scn+Gp1f0IyqrWbcjtLoxzbIJDGW2UeI4eoYX3DHTSo\n2VlA1ovzxP7Hlfljvg2TKbqUtZO8iAoCAVQruMJIfQqj9RBXFTX1B8Q6yU4o\nfX+h5aA74SjhZFjWO1a61CZOw6IjeQnwZ+VfO0KDD5OF/jtxwlkgFKwSpggg\numdy\r\n=MDNx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"a4dd95bb3727b0ecea0cb575aee5914c94231214","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":"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":{},"_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","@storybook/api":"5.2.0-beta.8","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.8","@storybook/client-api":"5.2.0-beta.8","@storybook/components":"5.2.0-beta.8","@storybook/core-events":"5.2.0-beta.8","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.8_1564050477132_0.9778925820312314","host":"s3://npm-registry-packages"}},"5.2.0-beta.9":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.9","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6bba7bfa017dad4e09f89ddd31d9bf30a3209be2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.9.tgz","fileCount":104,"integrity":"sha512-GnAr0Eh2eb0M6USQirqS4B37drRjB3I907ZuAJ2+b3wWnzcxoGJ61WfammdWUhz0U9zFK0JTagfe65BAhgAzVg==","signatures":[{"sig":"MEYCIQCIkqK5fCNMKw1Yx+JK3t0Knu6M+5QtUO67vi1mrIT0WwIhAIdoYSfx6UR2omaB0YN9hCT4mLdOEyGc2dOmk55bvob4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1364619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOeSSCRA9TVsSAnZWagAATiMQAKRt/bSg8ST0AnAgtT2t\nVuCsIWPyf4pTZ5MX5+9w3RF7gaD9IM7ZopiGHNp1dNBTU1Un908GHD4l7taq\nQk7fh1mB0uObGd4WfejXLL7+YDSJnManl/69j7ISAWtgiW3TbBRX7nnobVyg\nh6LWmyaRBgP86qXtoioJNdjhH3SxFYga0Tfx13OoOef+sXxlRMoJU4Temi3a\nVzn6znEc17A6WCuBkUT5GuLVyEb4Z/y8suuax/FE5aK/9h9Wxn7vegAsuaKn\nmu6ToSDO5KOkebQbUknXIaxNwe+g2lQ6Inq4lhLmS/Q2kVjb9wXVmrr1egaZ\nPAY5qUJtGm7b46VdndSYQOEZqs9/gbTWxqNyrJTintapDcuSopjrpj6aZS8N\n742qGhfp/Ykq9xKqYwDuYrnlYIK3GZaRd8Zx/M6HjzkEcSksqukRCVn5fHeW\ng75ErRkkStyyutKL8Me1Uhp0Vb+Si3Q/gD6wFRCxlFiIOhVcf6zULc2SYeba\nuyhxlEhwZ0DRxzWq2xB0YE6TAwIknnSM7qWmKmS3Ir4iZhusqK5Y9aRWsYaI\nQSVIRTgKSMDOYap4lbEqicDm7qtESP9kxYJDgV+z2fAB3TAVg5WseB4mwFkU\n2HXJKlJtaN+33RRX6yAjdm+ZYlxnF/bUnYTPoPzWeClhYsVkdD0EoqvMA7Ny\nn4wa\r\n=byw1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"7ddc50f117aaf1b81b0d371df74d27a5822a4a82","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":"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":{},"_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","@storybook/api":"5.2.0-beta.9","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.9","@storybook/client-api":"5.2.0-beta.9","@storybook/components":"5.2.0-beta.9","@storybook/core-events":"5.2.0-beta.9","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.9_1564075153123_0.895026737535322","host":"s3://npm-registry-packages"}},"5.2.0-beta.10":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.10","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"bb0580d24497329bb7f66c79a7df5dee81494496","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.10.tgz","fileCount":104,"integrity":"sha512-U/UgftJQ5iLuRqFSbynL+9NM6+HVnsWpfvnBK8dzeJUvF9GlQdl6H/uw7suEnXXcaMjgHXBiKUu8QYlK3IdQZw==","signatures":[{"sig":"MEUCIE1HEWSd/V/I5RqdQsIGHUbUOTHPMHOQPyUnU91PPC/8AiEA1w7oSxPqeRmbsC56I4v/QJFW69oYI6oa6kMaJjK6fJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1364626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOunOCRA9TVsSAnZWagAA1toP/jnJs9JLe8KMkOmsFHmQ\nAlp3RpDSZJ0g5yLFTU41siGsiJ2y62yS26ZxEFcRUPbW/IrAEWe2GiK0MSD6\nmYC07DxnP2Wv0on1XqNagXtNri7wyxIT/stZDXk43OkIqbF0tdQAeNCLTf0N\ne5//yMncop/NZd3D1ioTR3XcgcsZL2l62WFNQDpxB5h2wClAm6m/zJra8wEo\nuNHzAcnXUtlN3CBg4yrTxJqYk+v2izGIO2Ux/hMwMeVaGYa6dg/w2xMpGhol\nvpNkw7QnltDFqFSSy1D6HsZ6hyq5PJkPZvtZ8JzlDFXeqmKlhaLWk455V3EJ\ndT9pP/Cu0ivI3/vfCAJLlskKWRytK87PwWlrPnNHrE5j4PZxr4QtKzvZA3Od\n/QQyZrdnzkm/tdtGvOWBHvCRsTRQ48Rx9tH2ZrcnMkiyXPCWnYbKScGegTiK\nerGtRe4zyRqVqHgL4co7WiDbD0KVJ4Qgrd7yBt1k2uMf3AqOQb2pHNl/sowM\nIpdiv7IOu5ZM+jVq/QVQfX8juvZ+et2kO0qejUAeOHB8kYHG0woZloF+OcsR\ndeAKcWMoYvfT/IUcj2OIiBfWRYGzhCD4LeOYM590QF1T80Db/0IgXOG5Ayq9\nxBQxK9bdYRAgDlassSAXp9NUJ0dFbew2dc+D6NPOWjQ+Qpxg2w9YPgSihFUd\non5w\r\n=s3o1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"c30383e066d1c7fd4337cb2a16a99792c5ada73b","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":"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":{},"_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","@storybook/api":"5.2.0-beta.10","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.10","@storybook/client-api":"5.2.0-beta.10","@storybook/components":"5.2.0-beta.10","@storybook/core-events":"5.2.0-beta.10","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.10_1564142029415_0.9384489306128465","host":"s3://npm-registry-packages"}},"5.2.0-beta.12":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.12","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"03bd5dd715b1307a9b8d69bfa855204d5db95199","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.12.tgz","fileCount":104,"integrity":"sha512-4Y6S0ZNpNM2STwGqGx88d2nLSCNmk9KguHdDZ39ofA7YQNivQVOKPVAYsl5gtT7THbzKD31DxNEqzX0B/x3p7A==","signatures":[{"sig":"MEYCIQD5ahkJZZmg9UMi93mJhmdyvg2uZcu8HstxaMKVEWwT5QIhAP0X6YT4z8jmsD2BqlTMfQQprZ37IwerpsXf0r3rLE9i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdO67dCRA9TVsSAnZWagAAS30QAJ1mxoeorwWPX9kBb3ws\n1JVWp2fXZLVDT4wfiq/JlsvF+jbONJ6Cerp6yoeeZmHX9Idg2rKjhXnCKiJF\ni5FbIwJyzFrQMdtShgQ/8AhGev1QTlR1WLqM4u6GV4EloYhMwicIKUFHLc8e\nJw3xVL4yEJ6nlvH32dyUe32m2waapV2PvvpnOzOoE6NGH6cN8Ye4RZss/KKm\nsPnt3R2sKs+a2fO0i6ojshDH2vrVdiumtn4b3s4DNKE4JVVmbPq0EXYW+SqH\nG/3d/98l7ymnUPh3eArtZRoi150H4SBvAoc6oFSccRghitdhdG9IBPBuaGt8\nDV7Snuke17pb2lSl6lbpCBJbEV0L3yQV000Cm6+YTRWtv+GBAy/FEoa9QfwL\nsO3JLnKHjGjsdUgefFkaykU/7TEmUfYAJadd7hYHTrRUsRuBZ1XOjQgWdi+E\n6LGuAcygIsIfjfXDITA/a0xjhMaWmHhdBUVT/U/3HI0b4iq5XrmX85biTDoK\nO/WG3QpADQ2gyDc1ChZ9AuSscZ8USIQEOOJjl9EoQaxcaK0THUrQ2z3zIXeI\nwXiNBsZKmRHBQ9fMlYxWB8wf5Zx4S0yaKOAQoNMCQz80sk1nqtM/uOkYqMPl\nOCXsJLM1nxRQd3Z1jv74ncfB2HOJY9WPFc03mMAIDVD3TOj9QcbG3tknt4eQ\nY+XS\r\n=J3uE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"6f21ef46c276b7419c3214a1aa7170fdbf5aa35c","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":"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":{},"_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","@storybook/api":"5.2.0-beta.12","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.12","@storybook/client-api":"5.2.0-beta.12","@storybook/components":"5.2.0-beta.12","@storybook/core-events":"5.2.0-beta.12","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.12_1564192476496_0.41588331527709954","host":"s3://npm-registry-packages"}},"5.2.0-beta.13":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.13","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f37d11be911b65df0f652ddd5c93ba34f606b2a6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.13.tgz","fileCount":104,"integrity":"sha512-1T4q+0ofFa3MTcshmKara4auzUYnF1JgfpbQXL23MFUPAJ5qBiza1ra8gmeMaq/UlkhP/ltHNgFCLbuEW7qxow==","signatures":[{"sig":"MEQCIBDLeP1Pm3vF5JQsOyKpRP1pTZcQZ8ceDN00WNk9fLAvAiBKavVaZMFwfbwRZamJZ1ry2uAVl7H1Jj7dfALIB26f0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPA6SCRA9TVsSAnZWagAAK7oP/iDFtN4mIRSlxI9q2ApH\nk/aZioj1bIcIabzoJ25i5eaoOvqBqX4x9bIJ+lmsmslB6XZdUdPv2xXtnRVc\n8XxWeENFx3ic0Jk4QcKhv1gGgJ8BxwePHnticRg0mOq+ilfmjBqYDKz6dhf3\n+nZm95aVtm/QPUUjndTMAZuZl/R9r/ywPxvkVHVfOAusr0VFyax1xJffULqd\nU/1174xhSIxoc28nhlzhR03VvsDjbe2YRstdlTGEt+4WEvl/oXihAf7SvWNc\nQ/TGaWq74rHLImZMEbpOU+Ft0hIBjU9L8NtIzaI1dqW4AY6gkQvcbZy/Cgiw\nr0efrr3gM9723Vfi+B1qLiA3r7qBBrPgjBJTn87U5AOWxCbPNkrv6lRi2Mi3\n+VQg6NQ32ee6E6fGjKXh1NRoY1Pdh0+1Tq4tWdNH8VGwUi1lRRgWfTb4q/VM\neUb+IBj78qyg6a737uuyBAIYF3B+4ydEIYl86dynpezVA4oXl2TEzw45ziu2\n5ara9uu9bSFrq+KDmek57Q5GufPBFwqwW94YKC+MErQ5jiV+ZfdwhilXfSV5\nhaXVp6/ufkedcjlc/1XnBwlt6f1dFTXA5bj7Cqq626D6agf/HMGkS3ukqGAz\nOoFP4p6gCbsWdG0L4g0IpHTJckqlqNV6dyxCWI+bj6OHtmrtFNZXIMVHZERe\nSyyW\r\n=Qqbv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"d590ef6190895ca5370cbfa8eb5e9b5f8f9c6236","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":"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":{},"_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","@storybook/api":"5.2.0-beta.13","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.13","@storybook/client-api":"5.2.0-beta.13","@storybook/components":"5.2.0-beta.13","@storybook/core-events":"5.2.0-beta.13","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.13_1564216978216_0.4039618135650693","host":"s3://npm-registry-packages"}},"5.2.0-beta.14":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.14","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"7e55c353c7a16404e902afe3da0bc75f46f928a8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.14.tgz","fileCount":104,"integrity":"sha512-pdndzwvRr2w6jlmQXV9SK5cezEHCsdCwW6QyqXEmJGKpxaJce+TXv+Zt0zaPfi9mA+n9nXdS0UcG83BWr6FXRA==","signatures":[{"sig":"MEUCIQCyktC28kvdaD9FbVittifCmVpulebs1lpnY7WU0D4GFAIgRbWyjEOL4edAJILvw8BELPuGhje0f+/q8X8q14hvmn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPnebCRA9TVsSAnZWagAAujAP/Rt8VMedamDAUwSlnJ22\nzz3x9IGiM+g4xpRDeFFubqzcfyGkESAHE+8086oGGnBHYJJ3zBSvtjiqEp4V\nf+8SKOaTas4gCPYhgv7okDTTHS1TCxtul/4rnKC7WozRjF8cAYYJ9QQPrTwM\nZetov1amFfBgyiIe7FC60T0eokXPJr9140x7ojP/CD0gp8yX7gh/69b0BG1h\nnMYwe3h6kfdivqo0Z8lzUQgmDzK9EsjRmsncsVbSYsifdt8WfNd6BW7TDPEJ\nw9FpZiEfvjJkJUH0x4lG/Y7PR6Ui/IlhLWR1vl8hOgbQUklmhyRjk3l6k8UP\nHArpdNqPqrcE/Y0jr2vQI7YYyp0IW5yg281e6LcVj9SW9/1a6MQSay3Ua/a3\nxv3qexAkWYeDliKHFQODz8esMe4Q+UBa8SE2/XyVG04IVyj6cx6EOuTwshm0\nEL6Zwd6O4giEOUuiCZa2Gstw9kiUJ7OjQ0RMQfWdw55mW+7iweaLWhQl1A+9\nnJC1+ioRVWi7XKeD5C86oKKKq4gtwlYt2whK9cbxAdKW9RGCG9/O6MgtyMZx\nabAQQGEoY+xWEUAZIbtqLTylYO0szCIPOIIxlcKtErW5W+/5jNh55kBb0faz\ntM6JRZySo5ognslUKgLa/xz2g2xyn0uwx0oSmqAkmwkKq7VhJYh58257ENtS\nh6uN\r\n=5GoK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"85ac41c10c923e86a5cd677edc1cffa929dd55dd","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":"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":{},"_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","@storybook/api":"5.2.0-beta.14","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.14","@storybook/client-api":"5.2.0-beta.14","@storybook/components":"5.2.0-beta.14","@storybook/core-events":"5.2.0-beta.14","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.14_1564374939291_0.8147117923408793","host":"s3://npm-registry-packages"}},"5.2.0-beta.15":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.15","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"cbe900eee23b52b166ace443b4855f6d729162b4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.15.tgz","fileCount":104,"integrity":"sha512-gp8Y7E/dqXzzUNhZHpDsJEEb8ed6Owh9SUK43ODnchU8jdE+EAblZJdMOrcAYes7au9F8qjMrJxKgGxbMDWO8A==","signatures":[{"sig":"MEUCIQCjrBdN4bKf8ttsvHynBF0Dnds+WTb5/qM/eetAxZrOegIgXvkoE0uzPB4CYqWFPuBwNc2p29Ld0SQl24VZ2TMVL4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPntxCRA9TVsSAnZWagAANCsP/1+z8zfqrJ7TkE4SgaQq\n19blmEyIApD4vDjh5a/ZqhDqoHlIEWtsbMTjrjxbkEpe32FBEIWufOb4oDBS\nv2nISVjQBDLd30DhcVwfbrR28IDMoF5alsJBLre0rMluPEJvm2GZ2LVaiszS\neig4OJ+S+9KgXpA/8zwBMx1PalDo4Yt76kAbrRQ6VMDfq/KE00U7O89/+kJ9\nuiH1FZ28iqV9hR3r2XGXkWneZUjKdo2bHWDsO4zZIFi1GntvGj+PvWbOqRPn\nGMhMnhT01L6w1u38QaNg02vakv0qbGIC8nFmptTih6KfUtirRw+uTVhJquDt\nEho18KxjZ409+PsxFvSnNUzq1lzJ+vh/09itfYwfqzEEe1PQlTmCq1WbbUfY\niciy8ekOYg2mwf0+F8YsShzwjr/cTbmfX7KB3ee8drPPwr53XDim1w4szEFT\nARB7apxn961OEtpZFFXy5/b+RkcT9DxzIYZSvnXBV8JQ1aJkVFmH5bTVliM4\ne/GD7uCu2nfltnM8zrtR8ZXX/7blsFEc/XvExKjbj+nkf5XV/rbONO2e/mj7\nj3VYKCNvDfyhZixH4mSGxqD/WE6ffBe7mQgAsugCXKi49668jhjwf02sMUQZ\nRoAHsoQdZuB+i+KIGpZXz0ovzfV445VaTxpf8M1BavbCXfSbDR8A/MDGKysa\njpq2\r\n=Eyxm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"6bb8f167de41e5bc54d6e8cbee5f10ef9586fd7e","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":"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":{},"_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","@storybook/api":"5.2.0-beta.15","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.15","@storybook/client-api":"5.2.0-beta.15","@storybook/components":"5.2.0-beta.15","@storybook/core-events":"5.2.0-beta.15","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.15_1564375920811_0.9854501397846422","host":"s3://npm-registry-packages"}},"5.2.0-beta.16":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.16","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.16","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"dce4c0c620acc0101635c1f0b7174b00f146a496","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.16.tgz","fileCount":104,"integrity":"sha512-dtOsQPAMU9dwZ6LSDoDq/o5RdIrsaOgAD76ZOC8JELWNGRPArdfP78wRsZd7AsjEwkG1PvKhVaYF+CjuukfEhQ==","signatures":[{"sig":"MEUCIEdy5CBHPtZx+a5+nkBTbC2u8rX4TLG8ZgOsgTtj7wW3AiEA44Vf+/VDb2UbvjXP35c7UFRAEXIjglljJNyzBWNyLpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPq9rCRA9TVsSAnZWagAAnOAP/ROYvBS6pFaRKgYQYi03\n/Ew8SOO6PZL2AjwAdMP8hIFj106JH/yaQiwY/FiUydiymJC/+axl4cSHD5IU\nHhuewIyCDsnPL67q8GSdqE0rmuPnzq7YI17jFE09z0kV3DEgo4ZmHCdYQQHy\n7/blXsG+FoJBwHO8KI7GeY9iPDgKVnWdK5vjh3jVX1rpZz+jBUAlcHCPtQA4\ny1IpEtCJ+00pzcJEIOyCTU9TzLkwLV45D3O/UGI4xm8Hv6P0gFML72d1PsL9\nvVjcGa4XzQSemuGpFmXbFzQbRcQSl9QcT4xsgLBhEbkAz8W5N6+3HPdqUDdp\nhxVId7tCjkT8xDZaRebb4Ys03sOK8sWMNxRhtbxdWHMdeOYKPb5w4tGTqoz4\n60WnBaQkzI9ARGbzVy4QPXpdszvTuhxk1MwpMcSvgTbXGRdh0zqTLXWiZAZv\nX737UhoBzyE1drcJ2KRb3B6kd6GqWjpuPtSXMqdiLGhFJXYKVTeGWWHnaN2B\n9kVVFRQoBf2hfOfE9xhx4blsqOOtJSyoueOtF5ckjDEoUTlNpfITrWa1LY9z\nQXs16pUcvTP1YpPKHzbDcbLLpTeGrvcmTljID9NrnCJX6JhaIUvzKQnECLyl\niVEJLAxRpEpcLERPwBKSQEF2y2kxE7trlORv9NQVNHTLvITPQEqVdXDkbZ/n\nf2HH\r\n=39Fm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"2019fbda8679c18a3b0ddf66314c4b9f4acf1a34","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":"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":{},"_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","@storybook/api":"5.2.0-beta.16","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.16","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.16","@storybook/client-api":"5.2.0-beta.16","@storybook/components":"5.2.0-beta.16","@storybook/core-events":"5.2.0-beta.16","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.16_1564389226732_0.9616002873972378","host":"s3://npm-registry-packages"}},"5.2.0-beta.17":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.17","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9e3718b143092d87236f252004e3cc02086b4077","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.17.tgz","fileCount":104,"integrity":"sha512-wWBuKpX8tT8Du62niXAn7qozvOqbyyBPzRkbiI+BgAV06u+8m0Xdd21w9B+xDipSFgKTOOP47HcdtKI2kTH8Gw==","signatures":[{"sig":"MEQCIGPszStDdVuSU67mDCq2Yw8tYYzEm2P52CfGfF1yXwGoAiB0ZWf6l72KmiN8c8oToJOwnJCoBwBgreYVcsUtdSrsbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPtPkCRA9TVsSAnZWagAADksQAIxcdaE/TzfBoV/actwQ\nYe1FF3Lk0FlCY5sh4qCc8ZxVeM/T2eTDvhdHDxt1mOeivKSVQCduJKPPFGqe\naRKFsjPFnVknPh/Ncw1cgvL0lk1iRnpQGGdu/VNVCOu80/TIyJprnzHtjAgh\nM57WbFP9lVDdrtPq4qNgRvHNJe80DAbKhof9wgBkJFa0a/a34lgvIxNYcdUp\nEofC90wXG9M+16bYRh7XHMHzrUpEBONpZ1uysW94As701tYIG/gsiBCB0d8V\nYg7RB3FraLihdTVMQ9v/SJoA7TLSlRTW8i4n0yUEbybVg2PYEdHkFONTE12a\n8/6x80OMS7LyS+OFRgIahg9c33aCvHE97uxlT1g/GHXVJJNgvraO1GS7A+Bi\nh79lWxsUmsNQhRgpWNKhvqQOCqUv61T4RvOOmfzhzQpJ7ghe4QyEVW6s+qEt\nMT1Ee1En8+46Ogy6BIcB8WA/DQ0S0E437AqdwBMuo9ZQ3zr+NF6AVKBPS1Fq\n915ph6qJ4tbfPjyTzYBfQG+aKhnpZIzqyZzXyRIxfNQAu3cknrEtNT3cdHE3\nUskzuuzlWa9oft+S+8oEGuOACzc7osoEUXteHa06tfNmODkgAIPvGzALdOXr\nPnanBfwfySdcMGs8aDU/orI1i97K7kz3DV0X2mtLQNiNyaf3OddzmMRDNHyy\ntrVo\r\n=tbov\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"65d8502ed719e57df1deb5d8c7e0b87ab4f00b5c","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":"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":{},"_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","@storybook/api":"5.2.0-beta.17","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.17","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.17","@storybook/client-api":"5.2.0-beta.17","@storybook/components":"5.2.0-beta.17","@storybook/core-events":"5.2.0-beta.17","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.17_1564398563276_0.7703969845620515","host":"s3://npm-registry-packages"}},"5.2.0-beta.18":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.18","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4596d927b7ed0e7c210f17b204f4362fb7113392","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.18.tgz","fileCount":104,"integrity":"sha512-EcIlnjDjQKNCbDFuLSQ9/1T9+NfCT2WpvEAyOjYp+hAVBqXhOB4uW9adfOM5y37ATChViO7AJ1FpwcSI+54Uew==","signatures":[{"sig":"MEQCIHQRavSVq9HAv8tOdCiznXLjJztRgoOBKT13ZgorvHUfAiBPNKDq/6F3UXwJCP0EPQCg3YfPCNIgAMqWFlCYLicXuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdP4UpCRA9TVsSAnZWagAAwrgP/3ligIFb9rTdPityshFe\nZduVcnqq1SB9XQbb8CO0YV+p2nINoklU3Q3uMmF2Hb+KxN8v/UTueYqlPanu\n7or3mKxwJLjSNGnPYpExvNFbaWCG/VdL2FYMFAiWt4Gj3HetxUsSK28tMY6w\nRtSM0uJ7NYAxKXu5bIpe9O6d4F+/THAlzUJyo4lKEL+r7pQSV1qaJpfF+EXr\nDzrScUzBeWnrUigAF8Cqt/oJg8QpZTlSvKi2q246XSB9mmGy4jnYrhN4BPte\ntet8RClR8wj+1BSsGnx1ZtYBZ4YL1GpfFnEn6B6bQIpvusS4PLXbZevOk8py\n+X8k7G81SX0y3gWXjRC1UeWBalbon9HALlEaeVXIbtJp45LIPLI31gDQwqRO\niu+P4pzGUFTfQ3IBUoRvTgq6k2STPMSuneKY2/2JwyO0lgKYjBgi4s2Pw94f\nl6IlUUrPXY8FKeYGJXqyinvn5di+8ghJvQBs4rjOngReiKL23p+PBAcVNzpF\nvHRi0hoOH2kOKnmqjEhRmX+TE3kEwNR+3qfVl2wMHR+/Z2fG6WxDhFntSGZw\nn3pC7xL9Wmk3g2Elfp7kaWqgU1OSMS7njpFpfFaH6yzAHKm3p/mwndmYAV/L\n39dAcZUsnta8PiS5V1PXQjId8kpQuipqOQRXL66hSf1AWrCLHL5NbP6f/JK7\nWch1\r\n=bwkU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","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":"e8293faf1d7bc834dbc4c011a41c73b737fd3a59","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":"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":{},"_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","@storybook/api":"5.2.0-beta.18","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.18","@storybook/client-api":"5.2.0-beta.18","@storybook/components":"5.2.0-beta.18","@storybook/core-events":"5.2.0-beta.18","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.18_1564443945342_0.30588225043412787","host":"s3://npm-registry-packages"}},"5.1.10":{"name":"@storybook/addon-knobs","version":"5.1.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.10","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f5d9f21090e28046169a0aa0418de59bd92c21fd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.10.tgz","fileCount":69,"integrity":"sha512-j5wXBIPGQxK+guFDAi8xNBdUnyQglhDplVoC9SswkSMarqtWq02TT+OLN2VSBgpvzHmhLUW3autjJGfmwP4ltQ==","signatures":[{"sig":"MEUCIQDc2aM9pTbgk/SVIE1exbrHdnhdcYUaVWY3myRetc9APQIgGxPfu8IojczGUWPodnXKx70qOCjPkP5QRciPDejwGcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1301574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQVhqCRA9TVsSAnZWagAAB14P/A5JWiaiSf8942wG6dyW\nnq3TYs0bZsTRpY1sX03WE7XwAgYvZlAfPST1pDHFDi2UrrD4wS53v+s0uto6\nQ6aEBnkHopvwgEzq6eMF7y2ZDkS9rxU53iou2iAyJLqzdXsZQFHllQsc53O2\nD6t6TzzQQzEaCSJGQCaMGkXahlJlsuLQMh190iJFoBeyohrm47MPNkLnMh63\nX2y4xW+wBsb4ChpNAlqALOXJ0Yi39eXhqiy0tiPOZzfHd8JfRvnzLsH3SGtv\nk47pEf5uQtVQnuIiNpEjY9ddUYN2X7rv0p6aBMoQwTQ2oo9IAJcymtKbT92p\n9rKBTVL2z/PujcCSN7X4vNPIDd7N5R3OSyZP1NtGzAzqo9QYMYeKLN3hUscV\nDf8D3+/FJ9Yf1OoFKFexmf35HU7nw2wunZFr6XbP9APSiNRW0C9rxVsj8zpK\nLcocD8QY1TikDfobhjOEJ6/4vNuwIUJbgSVJBcms+sde4YVUPhJOJSbkhltA\n8zYMPRd344/YJNGqU8ND9V/FdiLo4MsxTPw2KNODpH8NFoUxN3Dfw/2lr/Sk\nrFNbOikGBuMZOMGQQcffKLLzxxPqEbonf8Kxnryox9NZgIbJpexKh9vOGW1U\nTVXhrDTOVKncazYGYs/RBde1ZMQHGbXgsvOkRLBbIM5QhPyNyUqdEbpLA8gX\nQuGx\r\n=gdoX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"000361f27f8a9c78201ffce1fac080178f0a62a0","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.10","@storybook/client-api":"5.1.10","@storybook/components":"5.1.10","@storybook/core-events":"5.1.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.10_1564563561766_0.9178174767337943","host":"s3://npm-registry-packages"}},"5.2.0-beta.19":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.19","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3fc864e4771e50f02a34b23a5101d33487f4309b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.19.tgz","fileCount":104,"integrity":"sha512-mYEvc1lh6/rsS3JYKbFBJ5UT27FX1NuF5VQJxeqvVO4N6RZUrTSzS8JP2s26qaeBQvN1WCqu+4luvo74wKxb6A==","signatures":[{"sig":"MEUCIQDQa0WLIfqRpPl/OWVcKj5FP/ciIzDzmX/wU1oOeGSXVAIgbTfdjQ5/wEXuvSnuiptm0yB0V3af1v3jb11cVIZ5aHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQV48CRA9TVsSAnZWagAAh7kP/1N2+odKG3sNWzU7Xrvb\n2HvXTS7U5r6006zSmmJsjp1FA7nWkO/w95Iv9XzGLbBJKKHyz5ZnL3i94koY\nE6i9c7XfiYeQtRc0SMKV0DNMRjEQ8md/T7aXjrve+Q3IYwiHQ2/RK/d+v7oP\nfUqYJ7DO1vfgOzMnCLKyOblRim/z/j7NPeKUI/2gdGGOaaeNkrJm6gmbXaMp\nK7lQPYALMOfQ2A6tXroJH94ctcCClX7OH4FLtZlTjK25vMQXS+n6Y8MGXEvv\n3/RwoI/ImmbtJ2ZiMy6La1Nlc3e7Fxcpu50K5PpJQv0jvOWPCXI3HdfXX8+g\n6eh1D634mbb984x4Le0vkdCP7QUMRXdkf498NvOYrJZtwm0o1fD/LWErRuLi\nwJd/2vNJxlYgOr5wFI40U/Wo8x6fM4l8Kkn3DePEQgCywhRAEV6RHRpOtRsq\n/BV0Ts03njt+rBiHaEdcOrNOPoLJwLMvPNNC/SpD7qS1RucEB5lslInMlV6R\nWsGxWYNRhcHooQww4lo+UI7mJC6zxcYF5nHiwP24/ujebsQQZGj4jiY055sK\nAcJ9txD46s9v0uLklRPUH6J40hPBmYcj5jJb86OC99FlHs1vnUcfcEjxlz4U\neQYRYnpGuZ7Jkfffl9Op82LH0NgSDeexC98WZRwJPHjHiNSlWCov09GL0+Kn\nb8qh\r\n=lmGe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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 accept = '.xlsx, .pdf';\nconst defaultValue = [];\n\nconst value = files(label, accept, defaultValue);\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\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":"b3108225d71d9e087370df0b16fb798ff69ee0ff","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":"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":{},"_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","@storybook/api":"5.2.0-beta.19","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.19","@storybook/client-api":"5.2.0-beta.19","@storybook/components":"5.2.0-beta.19","@storybook/core-events":"5.2.0-beta.19","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.19_1564565051266_0.1567776890744812","host":"s3://npm-registry-packages"}},"5.2.0-beta.20":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.20","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ac6258e48f26390aa49839537bf69a554eacd92b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.20.tgz","fileCount":104,"integrity":"sha512-bRPhD/RQBK7pKOtOB1W71YdYeDFfHfxyPkYFe3Iaey1N30vPUhJxyDkkV5zUKj6KRnxU5qOGwsLLj92gu2J+aA==","signatures":[{"sig":"MEQCIEaq1siAyn4i4HNLwqwzGqu7GGMAsR90rXL+U3a9b2lZAiBt65xQqpplsN25uXqBfxK9ZPu4ICj4YGFRik4gnUEuoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQwmGCRA9TVsSAnZWagAAL/gQAIl3HGSxPLyEvsrr0L5t\nOSgfoMxFHBZL5rPTli6A89khPhFrRM4KVleIzO50UJ+JX9eXblILv+VxBdM6\n1WCgPM9+NyD550QW4HEETbfWnKC15KiL1BvFgmfJ54cvnPRZxrafeBDPTWMq\nzHSOgTjkJ6m14r5lbJ3DyRggDDl8NUZD5PGjaqRfxCOrEwk2a6dj94WmNgOE\nB3Z/wEAQ7eCmwT20dJJrb94v1QjiymFM8J0TLOaPHoIx3f4RpvebxvrHTveb\nmeWVVdg8O2PgmjCKbnXRUMTKKMd8BfpzIg0wk1qySDMsoJ+VjuUhZ3Aqn8UB\nNi1GwLA/2H6mVC+956jU+Vel+Q+jwYD7JlO2eIqnZWCt6mzK5oxoVvEj06F7\n+V0OGmkRU4vEKDYaj2IH+uw6/A4xBKCcgYWYZjuawm2kO7PtJAgAEa3lNjzt\nrOkJ61KT1MhWx9nw5CE0c/GyqwzMEQLQiRIrU7UtEtY56y6ZHEguFSIBBQwH\nMeNqfqy0U2EZJNPgOJbWTEXlVQcuGEj/vDVuchPh+BQoxShnmI4/92p7eBXl\nc0TKaRtBysHtT47+kKMcBO44XnhHdDesO1UOVQTYzMthHRWD5ifPi7+DZMZ7\nczb7YBYs9EE+LRKguJ0I61RSUrRIqK/oef0AvgK896b6QvX28iJT13FqJUF2\nHt+2\r\n=2KgB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"49f313b884577bf619949579eafa39899670861f","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":"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":{},"_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","@storybook/api":"5.2.0-beta.20","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.20","@storybook/client-api":"5.2.0-beta.20","@storybook/components":"5.2.0-beta.20","@storybook/core-events":"5.2.0-beta.20","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.20_1564674437917_0.5472791786153206","host":"s3://npm-registry-packages"}},"5.2.0-beta.21":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.21","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ea816c94afbacaa19078013154986478355fdb00","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.21.tgz","fileCount":104,"integrity":"sha512-TmnvWiCZKa2/yjisz3ym9PWPyO4et+ilyfsRqWb1T3Y4IpyQliab4kWvAnBKEcRQpVSH+r3zuM/eVm1FIoyP5Q==","signatures":[{"sig":"MEYCIQCaXM6Pq4PGFz3dBLptkaCwWm6HMWpkV9jrAXHYEy+3LQIhAK7FrRybxuQlvxlkeD3p7P/f+foihOakMN+hH+VHrEiX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdRGWbCRA9TVsSAnZWagAASb4P/ArHTMUk/klnvW6mL/Yu\nDuwIpg4wIkGhykQQzG6Yp5gE9btSxjgn/9g/pDOeWocywBEunFoeX43kolD+\nkbqr4FwBi/qJ2818W04ZOzgLr+Q7n76F6Jg+WmvjTBdyl2XM+G1IhbgO2249\nyTH7sI01bm9Maxv1/inv/8ztid1+7g75CB/3BWrLgy9oFvZl5hKTNGu31Z+L\nuGSKkV8NFGgCQoOf9gajA4RImQ8cv5Elr6LZfJD/Ig+DGdMGk4JX4laQmEEJ\nLXgRo28MZ2E7EjfXrPQWKO0Fmi+ibfLewo+MiADT9ZynQs02DzljfvMiOmxU\naU4mI7i/a4BM9tW9vP9fm6FviTaLSxW47Wxa3vMW3WEgMVyXYBQUbwFWPUfu\nfkNILnF2jmpao87f+iPp/NgLgJ8W/KrCR0/oRdJyvRTv/RjC66ReKLKMrPe4\no+OGbRk9Vx+TrbsjNY0zSfkhAAiWfOQPQaqxPMWUCjR1WCE+NaJQ7FDHpIDR\nmMxxNwUQpTha4D97wFU6MjRhcLuQ5JmUWwPitXLn20HzzYkSmMaYKZV/byxR\nal2/l9zvwixXpDeMKLnACbTIg0l8Xyo3vbfos3Vy2Z760yR1oDPBNVsOv5U8\nWTJmslc6mhY1i6DADzpdt9GZgDkR+Pn8aRVEbRZc3/EnmfaD00awFggwKdHR\nPVXu\r\n=TCaI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"ae8baa22ef8bf019d2cee07a5ef51bb6aa711359","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":"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":{},"_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","@storybook/api":"5.2.0-beta.21","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.21","@storybook/client-api":"5.2.0-beta.21","@storybook/components":"5.2.0-beta.21","@storybook/core-events":"5.2.0-beta.21","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.21_1564763546554_0.7982442416774653","host":"s3://npm-registry-packages"}},"5.2.0-beta.22":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.22","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9d06b3dc3e8d9d0a9de123e8a6cf708872534e17","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.22.tgz","fileCount":104,"integrity":"sha512-iznp0CPB1HLmRu+BdMvu13tod+usKdtjNTTOJH5FJxtZudledRiDZw7RFsO9tAWhNxxJ3lsOrMVjyTHfWmGpHQ==","signatures":[{"sig":"MEUCIQDhfxGhZ5IYEyzEjAMFcDYvyNHRiYyxCckQaD+iDyw5lAIgYzoQwCcY4pc2vxYu2+JGJ4qwm8yBypHpJu6zTKZ4PpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdRQmXCRA9TVsSAnZWagAA5CQP/3AQ/xPqMH2+Z23Wh2YU\naCAmZBIulgZ97H58RHMe7oa3TNuBBSwe/f39rJK5Ret2Mxbyncl7Pra9PX+l\nPRV7wmLWF5U/ICkmsoRvW+iLCNOLP8cu/O8GOr3eh4Q13+IGUENjszObwATC\nRgWZUQ1iXgRcGSVxOSYWF6Vvxz7ZSUbPSW9pFFqFaNBvS2UStmZxORx5Lbfy\nLYjS5h3V2RijTg0ncH6+qMFqmMjJ/g0lFq19JhYvOo4upZE1/orCOiLE5ABh\nwriR1CkY8u4DdbLorQBopN+4gYpn8wyZTNIdQy57b9nAT9Ka4rpv1xSY5CiE\n8spg/CY5gl5OngPuw42G+d2xRL451/vpoLX7ng4H2d4cwQOOmVGpuPrPD/Qd\nBOdDQ0cmzlIIomHIClEos7FfiXcxCChuigofqn5aNoCcTjqIk2xQLFKo9s5d\nX0tEid7tMEGwila2ACR4Kh2RG8l9s8//CKika5yXRwMdS6/6W+hgtoY1A2uY\nv8XF19jbisCAb/JgGIfLXSLI2tVcQLnoWny/lGxIpDQbXHb3+sPmD4q84rI4\nWALUQNkw7iy1LQmQSBXAM5qipFuo7+rit2puDorxvBkEaorY5D9c7yRuIV0R\nsq4nIqdTmZ9SJFSDQAwel1lf6HpMvLco1bV/RpgI3hWmku/OPOqtJugZAdtS\nbllH\r\n=KW24\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"1449efdab4975330e31fdfbdf618d45c96a8d357","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":"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":{},"_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","@storybook/api":"5.2.0-beta.22","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.22","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.22","@storybook/client-api":"5.2.0-beta.22","@storybook/components":"5.2.0-beta.22","@storybook/core-events":"5.2.0-beta.22","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.22_1564805526608_0.66707077019398","host":"s3://npm-registry-packages"}},"5.2.0-beta.23":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.23","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.23","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"002d537114b0c119ac45ab3fd862bedbcaf8c1b5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.23.tgz","fileCount":104,"integrity":"sha512-I1VYDFg8ZKHbb81sG1COs5m/0hpaMninCloM/YDUqAks9zSDy0cCscCM3kZLSjIeL+HEwwhDnLW+EhLox8DPmg==","signatures":[{"sig":"MEUCIEOCN0dPREwoEVZQafb72d7iebNfk8/1No+gMW5fI2SkAiEA5//FCT9xPGq/gdUx27Zr8cEeAAu0G8CjKXcBC+ale/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSFxFCRA9TVsSAnZWagAAWqsP/1GbcSz8DIefsJH8O9C7\nx6BMX9IiVVoAwrAkKcgAUuHqkhphZYTNVTkpgoVfG0szOGWlGU/JNJhy99tY\naitoBkga35H51+PUqUn/5+BPp9rZQcDh1EqLdE6rfrt+Y19crZ/hcdq8uZrk\nqHZ6eEpcgH2WzFbYHd+1+4Drylcxkway8CkM7H27ADGL3ndrFnKoyxlBNTtE\nP1wPblv+hVeU0cyteqSV7bN48fD8J5lfB6DWVEMO63BX8pTxdgDplBrFlBDB\ntl8GZQyLXatdWiryAYtfzX6o9eihU3QyyPaRYTH1EFifHtLhKIQYUGrjI97+\nMQuNe7pbN2d58OpjNhxst6VQljwn+N0qtnPmy2hme5mMtWO7c6hWBiAiwzte\ncBgtz87THLEjwQ4k8W+1N1QpMeiAxbXhTcBX/jg9f/oeQo81PwGncMGXfAD9\n8+0n/Ttx7taGbBAeIDcdDUQsyWgc3mO2m0Nta25PKkaCcY9om2vPeAnrriY9\n5KiJ8IJRsZ4pflm2pKXJQ0OA80BpQ6Tf3RVtmXmhVA6r89SVyrz0BfdHcnVt\nJ2amUSNzdVQAFOJHzdtvIDLS2vujp0a5cz+lJfbrjvxI0sgRGi4Z5bM6I3Nv\nWF9n3sXBVKJC7uWhjxtiY7bj9T6nKpiRdUfYS53cJWqTRebPsCSU0y76fXuB\n7lff\r\n=Ad58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"c54cd126010ddc918222de12a34d45eddba9dbf2","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":"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":{},"_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","@storybook/api":"5.2.0-beta.23","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.23","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.23","@storybook/client-api":"5.2.0-beta.23","@storybook/components":"5.2.0-beta.23","@storybook/core-events":"5.2.0-beta.23","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.23_1565023300151_0.7708423123645998","host":"s3://npm-registry-packages"}},"5.2.0-beta.24":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.24","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.24","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"282119c6974a26e5894d4b79c5c3f3ede512d7a2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.24.tgz","fileCount":104,"integrity":"sha512-lxlrKdljYyQH2bCVr7JCy7xxIOjPR+bKKCPWUGoDjN+A1yBFw/wK5XhNbhqKlyplkRqNU5tj1VOx8UPTORD5YQ==","signatures":[{"sig":"MEYCIQDhLXX+GSYt97zN8RJtZ7OJIMXYwVqZ8IKRzh4xDEk96wIhAJKRzvrbU+7yp8w8HsuRugPnFHq9I169ZMYeXAsJtcmS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSkO2CRA9TVsSAnZWagAAoGUQAJSrgccfwLRupEU+d5ZA\nHpdYw1F69UB6Mu2rhYnQO8i7vyIwzruEh4j1zEdrlcZVxNl54RIy1KoZDql5\ne2ZCu0fOydJaFXv0v9/2BONPxrY2GJQTnAwfZRdL9pJKWxPELR1RuqeI0CMj\nD7B/tnsgnzNipnfdHZDc7T+aYrX73wj9rCoIsQdHbhhqWze4+kC1ldG9VJMA\nBpYphkZcY3iQvC01mCw2AVwbqEAG4rN7zJ9+cykzwrFvgUNriTH2es3Grkzh\noXLrxBn8wCkEL6iD716mIK6Kjyz8Hv+NoZEwlK/HGgXJbBO3wM8KAmwot+rp\nF47d62BH4BuWFf/e6erbhgnwzxnHv5EK09ca1zdtUPNJia7eJGDRhxQMS3Ui\nkCS5QF84mpMDbY8RCorWu54iBfqTDq2cH9fnKg/2cDeUyD3n5LrPIfcDCT7E\njFy4nnuZky1kZ2VoJAmU+kGBU2hTaEVYE70LE74l1DNce3X0cfVf7T4kWlLT\nbHLj/jilAWPhdRRSEjz97nQ+TqVgs1fRbdPyka68ALZXale8SjWJJ3oh6BmF\nXCj/pAMCOA5rLjjff7JtpVkdODXxO0RZvPXJmn3SI+GhhohNQt7CnOrOUX6Q\nAfQiZOyowNKJzhdrI2kdHUvtsb562HIyLrNstWr0+Bsoup4/EaP+WskBmrkx\nrZlN\r\n=RMWD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"5dd5fc022782e2f9540d4310e26f0a724c14c811","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":"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":{},"_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","@storybook/api":"5.2.0-beta.24","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.24","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.24","@storybook/client-api":"5.2.0-beta.24","@storybook/components":"5.2.0-beta.24","@storybook/core-events":"5.2.0-beta.24","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.24_1565148086287_0.5474107257010123","host":"s3://npm-registry-packages"}},"5.2.0-beta.25":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.25","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.25","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d818e314f4b48dc4169806ede9c48b0981780fee","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.25.tgz","fileCount":104,"integrity":"sha512-Hbhu08GNDjN6UK0HADWusTG9GUK6BGCnL9zaoIaClu7hVmgNjpEzgIFGEIMut87iV7Ph5kEldA1GCnZnQXPJXQ==","signatures":[{"sig":"MEUCIFABzYyt5wNGVCvnij8aS6Rp+Z3ljTWUY+T9ilUgJEo1AiEA4RexMdwQeVAUdgnNxWNc3V4dyF28RHgS4LJMqJs4G9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdS4J5CRA9TVsSAnZWagAAm1gQAJtU61dSZVXxWAXVskxx\nOBGYvD8hdZPMlq4vRCmA4hxCVsrxKd6Xdsa013P+PRlYPck15ErLOCLVB9zN\nC1h9G/HCsUECTd2uNiV3zB3A32LAYU9vJ3J7IHdV10y4C2KGaW+7PtiW64V/\nALPEhBcSnQsh4stM/rFIHKNmOXBgV2CvrT/LJKGQzt3HoDEg6GkBA6vL9C8R\nTirMPEX9MAWta2OCpXNUUMr3EzXPgbzPUcmI9adHfcq1A/rWFU5qJSzpSONu\nQlwofr4/Z3cdLm3WA17pqYKRc8YxPM4EhzMlJsEA2enJ/HaFdMMpswgZDHcV\niGMbHJsBqKeDy5Nl/Z5xSNmfGQvcDpDaeyQtnHap/sFxFV6MatGoh0fQ06m9\nivNpyXbQfUDusYLto9w/+StzKr80CyFG8KEaP7hKQPwoHIjNrEKd2Y4OedVU\n5b8iyQwhbBLIeO/l8ZcH2n/ao795CuJvPSyixqqEuXz0EWGJJUhKIoMCuwdF\nWSZxusZoVA7AnEk4q1xetx2p7PMQGGWHrm5bdztEI3DPeIuBCHqcl+pQdJAm\ni+wyNElQImP8+6sGD4Sdtf6v7k/SOQ+tTykszSXyq5VJ2m4yZwcBRrublN4M\nP5Foeb5rvNPIcyrC/ot63e3OFS2Ok2FSkRsgUdN11rkcPdOQjLKpRDJ6eO6D\n928l\r\n=+qGf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"452b6dff54fc3a5ba711dae9484c331b6c4e708a","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":"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":{},"_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","@storybook/api":"5.2.0-beta.25","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.25","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.25","@storybook/client-api":"5.2.0-beta.25","@storybook/components":"5.2.0-beta.25","@storybook/core-events":"5.2.0-beta.25","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.25_1565229688733_0.5292626017997581","host":"s3://npm-registry-packages"}},"5.2.0-beta.26":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.26","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.26","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f7948453ca26d1391b42a9e2ec01f183aac161f4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.26.tgz","fileCount":104,"integrity":"sha512-DKsjJ/egIwG6Zeh82hBs0SOI9VlRvl62NZelrmPZbroxAmkBvN/de7YxtHq+BWC8x06dZfpt5rIvCO8X5qxqDQ==","signatures":[{"sig":"MEQCIGbWmczGladMJGAyD5eBQz7KG00FNfrzDDbxJEEFXzJcAiBWLnLRBB9tBj6WgZrelufjAh+OLs6TrVpp+uY0csvySw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTN03CRA9TVsSAnZWagAAVTIP/jUogBVFv6YqwFYFf84g\nQEhvmS/G97huD+EyqZMNp/GSe5oJH4aY4LxWZ78+u4Pfcoo5y8UdVtCEhYZc\nziQbLZVPbLU+rjq19t/VHg5Jnj0ex2cB7VHVXbLIYHsgJPre8RjGYTjbrGtL\n8Qlhic17iRod+XrfgWtkP0X1CoFRD4XqpTyysUWOeEkEP1Rdd2k3gz5XtwZu\nJXWpnYiqw/NDQUABc0ckDuAh+D0ZW3RpE2cloUx7LEg/UlFCt6d1GDt8BG4L\n6FkH+WJxG2JZ65tT/zmr4buFsPh7Drv2N0eFLaqnljM+rwSNFduGdWoQe5B3\n/AC++zkhQgFvPPfq0zpVrFKXQo/vipHcGebJoiGqMn05WV+QsurfJcCbp0F7\nntX0tNlV66e/BQcIxuxfxfbKZyxgpMtK/pEBfJX9fnktNz2/2rDtbAElVWIB\ng2Mti6YfdrxZFCc92jgYB3Gmvfq1RpY4TSyiwfI2bXanF+28n8ZE0EmthrMc\nscHeDWS9LHAP4cg4hKaCmSL+j3YAylqodOb2lAjaq/T4VBhMQBb2jgCTTkmJ\njEUm3DcjsY0qjyrECnTJMVSVf4gAd3tU/HgFMyrF7ebp7gU+Eot+Dzp7uJvm\nZkW02Tbg1144bDduXz0acQPSvELq+iLtmE9XQojoBejva7ZCFG+nIOkmBAAD\n5Kjx\r\n=gkIV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"901ff4fa05aa62cc75a0443bb9bbaf58ddc0edb0","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":"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":{},"_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","@storybook/api":"5.2.0-beta.26","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.26","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.26","@storybook/client-api":"5.2.0-beta.26","@storybook/components":"5.2.0-beta.26","@storybook/core-events":"5.2.0-beta.26","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.26_1565318454760_0.19537778518383986","host":"s3://npm-registry-packages"}},"5.2.0-beta.28":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.28","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.28","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ca54b32686d8d6e6197ad8a5b0ad6d9e54d6c071","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.28.tgz","fileCount":104,"integrity":"sha512-wByOQf2cQAi8jfkrSpEvTIEB4RX5ztLQ/8AFFQ0D1Q4aETd2/GOBxIjdGk4iBktWfhpCRXP6B6lAaSB+RQ8TGA==","signatures":[{"sig":"MEUCIQDoCBG5o39i+ilLjjd5OsKUarlZrtYuYcxlqKczJsMwmwIgQpDsmxTEUIR3CYbjBIYzgblYiEMRlpt9OIVqXRZl7PQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTryJCRA9TVsSAnZWagAASPwP/if1UhDwF0xR65VSyQ/f\nqE2lk+iT2yD6Ex/FWq6vPwYk41Co7ufQN3DWk92eJY2rFTY8nk1trvUIy9AW\nqptvGCdLWKElP9FrTF9rBMxEWIIInGfcaN9vWNdHO6aemClxvlW0Z9F3uqSg\nYDyPHTqt/CXUezzbN4mtLSac0ClZZbIeVLtCFRHJmQ+PnxVFGBxIGR4knT9l\n6zCjUcDTzHzzUU/lxNQ5O1mfMoNa7nh7qtt0+z+EZz7Y/cHr85zDQVvRygtt\nORhTxV8hTgBaeDDdQvA00yAM5aJJsmXRkXSMdK4+75gFLMZe8xs0GquFiPOK\n40kSwuWSLBVvBLbPdzvP7HG6CVEVk8+N8BBlA439d+Vl4v3Is/Qkh4/2TTsL\nX8ljBfMWilMOzsg+sxESce465cx2WOAosw8zyI3rt3eAoObtCVl4fxcdW0D4\nBWbwzUb2ZtimyS1zLllyt8t+goo++gOEtBq//ifgJY8GHqBlljd8gHtDK6kX\n0B6F/WWd0I9e+oi9uw+mGYa0Wp718bNQx0t7E/hYvqDbf4FjQM+LSu5jM7Ej\njMeW9gQr2DgW39Lix82vDrDLlOFCaTqpDeQSuVs3V+lxfRNuibdr+CoLaDGo\n9tr7U77qGL0OIn/+bH6opxCjL47ay9IZmgMFqztfzsUY1zOKrQjccDsmn2Ju\nZeEl\r\n=ncPZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"54dfb23ab34f941db6acd385efb0b1e5ab880934","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":"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":{},"_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","@storybook/api":"5.2.0-beta.28","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.28","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.28","@storybook/client-api":"5.2.0-beta.28","@storybook/components":"5.2.0-beta.28","@storybook/core-events":"5.2.0-beta.28","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.28_1565441160523_0.7660818896936632","host":"s3://npm-registry-packages"}},"5.2.0-beta.29":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.29","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.29","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0afb70abb873a2b2c5a8d23c42e7efc1f4d18795","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.29.tgz","fileCount":104,"integrity":"sha512-Mewojya0FDIZoGSp3FRN9nXXqHCPqR0jI9kZw8cZ3jlfyCS04w0yDkRj0dsHvn5pp3GytwiDyKDFGsdzlYGj4g==","signatures":[{"sig":"MEUCIQDRgctOEwCIi32snovlVXCZ63oYeqrWF/qWA3rIPKfOlgIgbZ6rE96wtxYkIQkCAX0yXfTO2XEFyPOsbi3O9oWYpZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUhENCRA9TVsSAnZWagAA/nAP/i91hb/NhinbI2u5po7q\nWjzBXF52N7maPdi8mydD56W2/koLT7uftVe6MbmWMKsznNmEgf8LKXBs1mIS\n/BYyYEdlRQPFuf6YW+qXxxFDNinmE8FNBnglSCOW1mAjL5pm9ZG3GtCpQnPZ\nfveoy/txTlokR64o70v3iCyUZD/5vLpFjlO9wUonFKX7pJlMr0nqSwdkM+gy\nWqu1NCeJDO8JZJKTnyECTR4YlpQpIU2bJhl786C1xTY/gZXxj5WVSBBxf0B0\nO6XMhSBYU3vMKADun0H2kNS7tu79Ink1mGfM5yVutf4AnIgPvshEyIPflNJ7\n2Tm4uq6F6mLdQiN2UMrF/d7W/SVgCPNADxrjfhOU9IVkB09WrpXtJvGikfZN\nl6CCySsqR90KIOfit6Zt5xw+LCc7TjK/tl7n4JXOp/9T840DiZap6kP7eUuN\n7Qjsr71rJsN1ekw8+g1XDk08HK+5lkY/YBbr7W126cXbb3jieQXQHscQBghJ\nMTB+Y/ogKfJCELjp2J5QqaP8X+AF9CcVMHckn4HowUPae5Tu1MekXi2Lrdqf\nwwcs4WQ+8bn8qfz9ryCcszNWUJ6id4BEm61/E7lALiN+DLa9v+2vXmgu9MzP\nyl4KEBLXoL/8N0dfT3K3ZwgzuxBx0Sv+oDp5tZ1uGm+I534/Oz/msdHFkp9J\nR8UH\r\n=Ndp8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"a7625dec1e6af5c1ad2a51054eff5f6f0a9ab727","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":"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":{},"_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","@storybook/api":"5.2.0-beta.29","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.29","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.29","@storybook/client-api":"5.2.0-beta.29","@storybook/components":"5.2.0-beta.29","@storybook/core-events":"5.2.0-beta.29","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.29_1565659404994_0.03619571047418302","host":"s3://npm-registry-packages"}},"5.1.11":{"name":"@storybook/addon-knobs","version":"5.1.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.1.11","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a7e7d986b45e8addb25151b81008af1648ef1f2a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.1.11.tgz","fileCount":69,"integrity":"sha512-16GY8IPxVBcmq5TqPtP6254Qw5FvdefDZjIQd+ByJJliQjXZMQKxEl6JhRq98iUfSxEB+6JCPnpKPa666jmCMA==","signatures":[{"sig":"MEUCIA1KuvEW+C2hD0977qTunEdphbmndlZm6MmOB+i/hNVUAiEA6vh3At2+mm8HuGqOy38Ui65ldVANLeedyfJW5G9hJg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1301688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUhizCRA9TVsSAnZWagAAyE0P/Rfoh2jcUWIxhLSs7M2T\nzh1csx1PXuyaT74gxRgiGBVCsoleCWb6Mke+fYEWU7/RhjkcjwKUXV4b/vcs\nRjOoGLfpc6DMyF0byjwxhaXNPjUqqjuiCqXhB98OHBR+7cvCPETivfoIRdKW\nUs4iR498YfujJbXTW3u8gu0158m6y85/yd/j5qp+e0wd8fqI77S7qrdGE4Ge\nBZIhTWidOt2yDnfl54tf4FEjCILACce4+3qq50+fyKokcAZQmrwMfnB5Xyv1\nZY2UbtxS+lNojOyDjkqWrxURkhOX0BOanEbIWSHNFwpQpb7W7UeWnVqejHd9\no4+jSQrKmWMghXG7Rn2b3cbrNZGPuKC75hv5FTk1rAKU97L1yD36XZVN/zVa\nFkrLbqXis2GNChHrrtQ2JqhXfuH9bCs0ZpUWU+WDBI+sFvCUCBxW/WIU8cZ3\nZszSiXaGBRACtXEDhfrdLs/5giF//lLMdUqgRe6VOu6ACRVrhbFeaOO3gSX8\ni99ZA2OKAj68SO7f7JaCpJeHHkIguJNkzFvaxJD+/sk/AtI6hOr4KXwxo/M2\nAMNwWcXnogbvHtLuKL7bOb+uE0KHhbILZV8h60+iL6W+nWp4sBFQkuFhvmqs\nPQrVQxY/O0jYOR+mjWpLLIL/K+1VkzfTRwhZHc0AB8IdPpgM0rfVuLB0uSNW\nF2qx\r\n=h+lP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"aeeafda2de3e97cd91e36c3dc7bdb0543d073429","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"jsnext:main":"src/index.js","_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":"^2.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.1.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.1.11","@storybook/client-api":"5.1.11","@storybook/components":"5.1.11","@storybook/core-events":"5.1.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.1.11_1565661362124_0.015644767435749163","host":"s3://npm-registry-packages"}},"5.2.0-beta.30":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.30","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.30","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1a7a322dd7466369e0568e457c65ab5e725c4c9d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.30.tgz","fileCount":104,"integrity":"sha512-Z9HWhRPSgChI2ZqpLeVjcxJTfz1DP0eJrQPYPZNI3mVfb9p5mHKj8B8WhlYPn9fUQXH0rqIHoCXJhjDIxzwQiA==","signatures":[{"sig":"MEQCH1eW+23H9jCCbiskKyJpoj/GKW3nKY5+KQpllVmqK1sCIQDub3wCeAn2VLw21506LS0VmkriGKmNWwOkb0ZFH/h6kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdU8B8CRA9TVsSAnZWagAAvksQAJtVKpJ9kBOdfEiiTtXx\nAYDU6HXmQgK+PFEEhtqRCq3iVN/Shaaj9dYZ+mY8zq2JhJW4T2v5PtalS+Eq\nrNaBeHSM53ySGDSceOUNncL1Ou1SZyZvEYapKkLkIlg52bf5Y+U6u5T8FnQy\n3Ua3/b26m23lJn3aR0Jt1C5URIoSq4KMu2fMk7ysl1AQlyhpx9J+L3qqx/ez\n1pJui9kDkmZyzmXr2JaeZRnqZx69ml+lFSJKjlGFBU2gUjETXTO+fwEO6zLt\n55m0E/qOvbXretFdDe8lIG+YY/DEkZXLgTCN8u0tPC+JPtFKDNaCz29RLhIX\nFk+g9+YnIdhPco+W3Acvo0Kl9GJ08XdaOlOGEPlR1/IZCxJZyBOgLZ3ti5GT\niWDyx0NR6LR6oCSCI65dwu4tpPOllfqclS8dl9P2VgjDBOq4Zo3jAiy0gCFR\nuaETxZ4okFljprFNzlwaXzIcQhwG2N5PXfx8K4gGyV8phONe5HzLc00OUTFu\nIWI5KmHxX3OG6TH9MXJFelQyx/p88AxEeJlCBO3nRq3iimZocSBol+bPLXcd\nFZ+X84GkugLXzL6c/zl2clqaWklZJOpQq8vEqc3h0Nbt9eQ0aXwpRmaPVuls\njWc37lFqzmGrtYKd3yTDEC42GR5VxPf7Ne/5KpYgEqifA4H3Nhx355kS7fXH\nqosf\r\n=yvfU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"f3c9692a6aeed8aa9580433c0d28a8b3914b3ae1","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":"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":{},"_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","@storybook/api":"5.2.0-beta.30","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.30","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.30","@storybook/client-api":"5.2.0-beta.30","@storybook/components":"5.2.0-beta.30","@storybook/core-events":"5.2.0-beta.30","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.30_1565769851043_0.13929241661787684","host":"s3://npm-registry-packages"}},"5.2.0-beta.31":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.31","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.31","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ba710308c07531159b3484816f4e7dcd1b923b5c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.31.tgz","fileCount":104,"integrity":"sha512-9sxNYI72k5UPndQXwSYZMTDXWEl9SsK19TCCSIcdzF4FqHGh+9MjaDWN7OxVHUcTrec+UsTyJPX3q1DvJ8E+qQ==","signatures":[{"sig":"MEUCIQDlQmfGeH8hIYvHtcQhGRSskWlUFY0zPX+fUxyHwO4E/QIgNWmukKPNrImisNHImTNElI6NqFju9TvCj8PSakosroU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVoMPCRA9TVsSAnZWagAACIgP/REp/AaYV45bu0BR4+7k\nXmu2E88babPXnp0rlAp4k58HvpjaEQCg/lCbvShaq7llogeJz5ABoswX7m1X\nruV+cOLOIJngr9fPT4vk5AF/3+P050ITpliQ6gyOmV3lxZgKblszwfCXC82X\n62X7QE9QgdSXNKWSSBpX8sRWbi0PoWgp8d1HuDQsekm7vJ/mqRXDj8jhAGvS\njcRQxcBDHU53RzbGUDGt7ZCSsZ9bVM/moxsWdZW9QekJXo29WW4Fswjr+Eta\nnEz6B6xuBgF893BdDd7/EX8xyumASIGm7j/OQ46F6viqUwjo/BVNP08TcK+i\nBzscqL/L7hzTHGZftSlnnvQEnPt4NftRrsdN3Lx450+N7ukvt0AgQbwdefAA\nNhEA8Qb5n5FJhi4jSMJ5iHVxs1JU7TKjR0B3LIbDy7JKuuSTeg+7dI/WJjp/\nstTwvF9P7jS2E5j5Yavr1G7I0qgXe8IDVrveSuIKVwm3VJtHyYCbmKN7HrBw\nqD4AmOCwGPIn3NgFzXoWTEr0ZbIfiVn6OJBDOb255E7dAexUITq90cI4IS+g\nM01NM4pk0vxWKxt1v1WypN3zLZQj1fg+RxUBIzetrGnosGsX7Ij4oCQCiAhS\n8E8lzg06j4NkxO3gWZVNE19QH7nurqvkB3QblV0NEWXb4irXOq7ayIVR8E2y\nQb19\r\n=9mQE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"eaef302c73969f5dc804ff8340349fc29780d7eb","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":"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":{},"_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","@storybook/api":"5.2.0-beta.31","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.31","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.31","@storybook/client-api":"5.2.0-beta.31","@storybook/components":"5.2.0-beta.31","@storybook/core-events":"5.2.0-beta.31","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.31_1565950734891_0.5314431395400958","host":"s3://npm-registry-packages"}},"5.2.0-beta.32":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.32","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.32","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f152bb76e12c10d68fce2cacae9fca211ff29e75","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.32.tgz","fileCount":104,"integrity":"sha512-MHb5ikoW/6fcsDYU41AgLNxrj6YoIdDdwAnuJe/L9Gcwokn8fxNjtn+SlCTGOGJ6HtkaYkTSme/b9CA48lPTJg==","signatures":[{"sig":"MEUCIQDnqAZjcAqJ5CzU8ceqE8OiX0Aox17rO7+mWgKO0R3vQgIgASDcVqDuhNhOFr6JIDtpo8/dcAPEjCfiVIvRtYmZTkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdWAU+CRA9TVsSAnZWagAACEoP/RwNEN3fAExmABgOGnNS\n1xOg14pkznjnBv8pu2FFK4wVfLeOC/OHmOxCncco0AeG/R29jYshxkw19prQ\nNpTAd4/KaDU+H6YUKG24ZuOVC/CIujLoTNArr7siZn+BOWBlSp2RBXvbN0pS\nrH0pyDBPIirxOPYLfUv+7xvLlgilyAfPOI7Now18G0GpokHnRUmcw/0v6O33\nQW336AM/9K8ALoEeYfcDbeS3rjqDx/CV+sE3CZfPTjtrjnhD9myPIdrR9Aqr\nQjet/EmTXg0rcSHy1QZFejQ79Es5YcpVzjvmDvMPa5oAxaJ5oNfukUxEXBG5\nw41SawsYqNW21iuufZQcoLhK44zJFcqt8MiE8cdf5PXL4ZhljMd8/gM82iPL\nIn+dbMe7pptz0eo9PIM35lgMaCzc4afQ4QAXEgjusUoJBua8OwB/g79w+0U2\nfbuQJFvwKB+hXQJaTm95p2bYdi5LFzgGGMfSXscdsdDMeGYtug4dYgbBqieD\nHgtQXQio+eGUIRr+eVP3FvaxVFvExCRaUzMbkGRbw5wJxAdaLp85HaaOP3OJ\n3sA98hrsQj8BtmL1OIZ6cFDzcg9yxmhZX96vAOW8hF04naMjagv4GlD+7UEw\n2yXHNcTNp9lhRUfpUk6eqP5e1w8PbvvOJm0vcyH2ygotE1F1IIoEiZm/27M4\nQkc4\r\n=TzDi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"1c67f9dae7094cf7ee0aad007c48e20cdcb42e3c","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":"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":{},"_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","@storybook/api":"5.2.0-beta.32","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.32","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.32","@storybook/client-api":"5.2.0-beta.32","@storybook/components":"5.2.0-beta.32","@storybook/core-events":"5.2.0-beta.32","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.32_1566049597834_0.7384865605401731","host":"s3://npm-registry-packages"}},"5.2.0-beta.33":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.33","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.33","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a4eaf0a1d7dd420b948823e0c181d10c66502243","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.33.tgz","fileCount":104,"integrity":"sha512-utciGBQI2DAcmjOy2siDcJftb/zQKZ9g+O0YOfL/jEDMjt7PSKVhQCbYj/ZmQb349oM70Exppt+70kxtGc8jEQ==","signatures":[{"sig":"MEUCIQCupqpDJs/FwgjWVOlUcCFieePSCEbdpTFZnoVv4PeKMAIgdpsPT6F2YShFhiB8hju5/tVvS+dSSXMi0QNabC1Npu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdWVcKCRA9TVsSAnZWagAA/+8P/0lIxY6hSbDsoJfta58r\nAiZ5XkPxLlK61WwQ7HEpiHI8dfc/5hvkIQC16ZyY+ssM452tL0OtJoZRbMLf\nyiusNbVePFdgpX37X4V2oKH9nY/qZJXdyWwz8q8lRC5UV8i/lcENkGNknq6j\nno4bZYrOebKtYeej7YgVqUlk6x1HNc6rHV3DdyvB4iLwuScLSQOztdivI1jf\neSlnWdVcw5tRRv/vVC8iYSc5pIwfpqQYPf3uGOvREF20wKOMdiKFiOY0x4yB\nI2QJbSGkJKtDUGnm3vQP2QyjkdrddT2IljEiZEc0UWx5UyrXnIQY5uMN8JIk\nVajhYOq+SmfINWUVFCSnLKt9IiufMJr/8IjHTmI5TOMOmmoG8svaEYLV4muJ\nM9qyom+MfGAwB8uYDigh+xOffQ48G879dF/IzKYpKBo2u2yVwgWWJgCB9rAG\nHwOiTLzblJpqynyyZMZiW5GqTvHYD6V89gOSvPW3uRaz9a8a1itjMN2aQGPa\nmAjFXlyBzlKIlDhY0Hdfk4g/NeRKGvpZzR74b2F6caNIDj71GYZEmS8W+gyh\n0w7r+b0gvfbOzZyy8XRDeTSYGe/gfWtP2+P41HGwtU7n4y5jHNeTmTKjljO1\nAp6mJH3Y77vvbvk5ejAA89jglsDeD5vglw6fbZLlmbT/dILEHmMUBmQjQlZ0\nta5d\r\n=Hnag\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"a1f0a1ba262a81f20b950902ec845676a08cd39a","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":"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":{},"_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","@storybook/api":"5.2.0-beta.33","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.33","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.33","@storybook/client-api":"5.2.0-beta.33","@storybook/components":"5.2.0-beta.33","@storybook/core-events":"5.2.0-beta.33","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.33_1566136073999_0.21961150154516473","host":"s3://npm-registry-packages"}},"5.2.0-beta.36":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.36","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.36","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"aed70065f29c948770af13cc49464daadce4339d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.36.tgz","fileCount":104,"integrity":"sha512-TtF98z0DEK8Kn9C0w7GEzfOcaM/VaLxarQ/FmsX9S7XEXKhjIG27iorpqLTMYrybXDdJCKg2kf8mfevSAkXeJg==","signatures":[{"sig":"MEYCIQD9k/oJi1HApxbPnqHQujAmYU4Iw8KWgw9k31CfWgaTiAIhANNtFm9YEIlNKNKR3KZmt4FT5gNt0fOXxicEkSIIACG9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdWvfQCRA9TVsSAnZWagAAwyEP/Rwh8P69JoKeIZzyEIzy\nZfS4zW18D/9LGyw5t2l5F4mXiukvS7xBS2ul3noCCszHWRghRMylYYUYJ5s9\n/XXWn3aCSOC86cGilDJS/rTs7NILCPy3ddNteb4ZZZ9Ef0RPO43HwjYTQE72\nMrVm+v/fsaVVk2ZxQeQCseciNVubbfAsuH4kY8K30a+0C+xZhRe2/KI/8GIx\niO7KQ383lKfRiIvXN+ECyYL7NauqI1atM/r13IgYBweSngsgVDNvH7CrF/Ar\nqFSvyB0HZAlQSQLGQZP3aEG0+jJhNDrrX0WxNuJRNOUgvP8zf3JCDYbOx31k\nfrqhVeUjQnUK0vq/1CxQtVG6tyS8oVRBQFu2lNkLysyGaO6dsDO5nnslDfip\nvUDamgUoTax30/5+0j5QD5EWHKvRqsloVaWL/lQFsf3KVfigRAq1504kGSXc\nVoCopZOHrkT4cytLY/Qakuhl6yk2LBNdLijUv519/2Jxw9vz9lVbc4fwr7WV\nEa2LhGIVzbjb5FCop87hEP1aqcbJMjhAtfnzrhJLMpMp6xPxjUlUaYe7dKO3\nkQyW1mkfX8loLg81rH44TrdeaurgqSf4FGAfA4zJ7cH83pOwvPLwUyDT5kmr\n8CNMfkig/EshzYKsTXfrth96eJKr0HhIFxRsy3baOGGz4NwBBqcRYXEiazkD\ncVL2\r\n=looy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"2c9c448307ad1f9c7509919daab8d1b99dc36176","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":"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":{},"_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","@storybook/api":"5.2.0-beta.36","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.36","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.36","@storybook/client-api":"5.2.0-beta.36","@storybook/components":"5.2.0-beta.36","@storybook/core-events":"5.2.0-beta.36","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.36_1566242767719_0.3760592943832124","host":"s3://npm-registry-packages"}},"5.2.0-beta.37":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.37","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.37","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1dd4ec4169add4a9bc2582ea86bf5e9bf1ff30f0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.37.tgz","fileCount":104,"integrity":"sha512-Gx1pyqiCCMGn3LGSATO4++IeLZCX2v1gW2HUx3ZIAITLxu7z8U/yMQSiJbyLJ68JH4xtnMZQv3NEpHGZ4/F/CA==","signatures":[{"sig":"MEUCIGMXZVfjQ+G2WTv4oNsJeefi1cEhftz8rTNXrMgrICAEAiEArFUb+5wb3Pyq8VpHvqSIE9bGIXNZ1WNuDTyO806i1EA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdW6oUCRA9TVsSAnZWagAAfp0P/0tJeOrnAR6Nd8WxRLjN\nLs7wd9B7ZyDg3RMAX6gTpgxUx2OAlzSGl2YwKZ2nXEicHrDLs6G/9QWYmwzh\nyC6pU1WFA+2EF2PgoKdVM972FyCaN2mUnZd0uR2qdkgKSwzamN4zwVKs+X+I\nhPugDUbBhz4gQiO3FFLIp9739IARTgyS8BU+QqvSXFwwCYpPnAeNAE8SP1VQ\nnQQqqi93AezVyTBHbiOtVW5p1TCYrvnFLQs4uITtOLqC2+fAgglCwEZI6Lhe\n/JbVdaHs8wfUwgJWECBebCF4EC4HHpMv0f2nIgpe0g1NkuAM8oHMYle1szM0\nwDKaKi7aAztxDRE8xPKLpd1nBV2x9uNjWkWZAqjjHhEWhoLBdcQg56tnneHs\nlgxc17RBBPSpoV0jA4ushat25P1YMd8XYCFlwIVZT7L7XMZK8wBQ68GVdHoX\nsaM2XO6n6EFY6MxVu7DrInRafuwEhaPwm625MryWAM1jfnjtsrmVPfxiAH2k\nYlbETyTLxLMYV1+6KuCDV4E8pj7g1cx0VSkqGDMc7pAwv2dLYkBiQbVx3Zq9\nKZMW6U/nXBwXuaZanA9kZSnlR5iFGWsxM4iuL7K2QEn4U5N4jg40594pL72z\nhIXYv/h8sHaO6GTzXWQOozCg78leGSw+Oeh/MbAjJrDTRQiGzC4F/FWfzrhX\nUTei\r\n=ua+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"bc4b5e8047edab52adb9e9fd51daca2fe3e0fbdc","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":"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":{},"_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","@storybook/api":"5.2.0-beta.37","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.37","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.37","@storybook/client-api":"5.2.0-beta.37","@storybook/components":"5.2.0-beta.37","@storybook/core-events":"5.2.0-beta.37","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.37_1566288403531_0.5754159139539659","host":"s3://npm-registry-packages"}},"5.2.0-beta.38":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.38","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.38","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"7f5c5e9819152dff1a4cfbf32dc2efea9f34ef97","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.38.tgz","fileCount":104,"integrity":"sha512-ctiPs6FVR+qxeQ5kOMKCwq76420C2QDZo4xX/WoJ7rTLSp3KI1RpXGlsXlImxbfYkOUrdKt27MG0zyA70dJDhA==","signatures":[{"sig":"MEUCIEFFmX9M57IQR2FHPm7UlvJGovp2AIX78kZ3A3tblUf8AiEA1AeY3FahEDguExPLUGL6lLGRe2BXBEQS820zLm+Z6VQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXBujCRA9TVsSAnZWagAAIkwP/3eZG1QGocgHRQFwtyC/\nqLDq/PxinhmpBczZW5w18l3fCpzczWrLUkpfcsWL5eGffALQ+S3WtVweBaAA\n72d15PVzlGWQmGFWRqEdW9ynj4Idwxd9Wry+1mxZQTWC718/dKAgM723UF7A\nBCc4wXDogxkSYdlBSAJcl8VqnPXPiDuSAeo08HzQlwNai34qeWWdFhIhpSDl\nSs4DdlJ6qDZAXx5sO8AB4edSaSJEIc6vgVRdaATV4Lvh/4QVEVGKDL1nmJ/B\nWlvO4ja4yllYyWHl/pFTgtzd9XezLbZtfJXMoCUEBhwnL/CP+srqO1JGVxug\n2t5qCLcObkl20oi87bJ1Xv6nzJJ9lImQY9PQl9VLQCvkxqda1SoRMUyeIAAq\nau4kBy3xQBtoxVvMAcDvn0DK4z9fBtbarHbjg4JzB/rVb3vkkCcshaydGQIo\n0F13DcQTFbulLE/mLiZ7CX9g8B2Eykr9b0a0pYA7pWkVnSbMPFDR9TbN9KRk\nOspBoT2vKe1aaz7FCfGZvYRsHcSJygoHnwAZKPxFwfz8aTI/tkWiEqvxHirz\nw6kHG4TfVCsrX5ZfOsuv4XsYIs/W5LdAODift8S8C9N0rIIwFeq2fImEYWoa\nZIklI7rKyqzwoaHY5wP7cp8BPZ/geYKq0RpSD47bAUtLWYRfyHshri5G3VAh\nfKnx\r\n=+GRF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"6a6537f41351e610ef59e37c1aa574d26d8b949e","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":"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":{},"_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","@storybook/api":"5.2.0-beta.38","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.38","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.38","@storybook/client-api":"5.2.0-beta.38","@storybook/components":"5.2.0-beta.38","@storybook/core-events":"5.2.0-beta.38","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.38_1566317474993_0.38949117320256876","host":"s3://npm-registry-packages"}},"5.2.0-beta.39":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.39","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.39","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8228db003f46ba711e03eb1075e94c88843e584d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.39.tgz","fileCount":104,"integrity":"sha512-VdfGXYw0iYj7ro5zoBl4GVi8E5ivQrEsjj49qUfMwwxV2ENrEtJG1jKwm9bx6Xbp0WU3RnEfEvnsQPUTXJXM2Q==","signatures":[{"sig":"MEUCIBbhSygJ1g0vLrzpB+M4PrDTzsi2cjIHxKw8nk8KydyRAiEAr+4o6m34ejuUL2X9JOVa5e1yWWNHGMQRrfGJ4JDbeJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXg1KCRA9TVsSAnZWagAAYlEP/RMit9Zya0ypdas8Loc4\ngwNPSL4bEw2PuhyoLcNw3MtC1DajlPCwu1Di6GMqdI2ta3ZVvrYPlAkA/xkw\nWARqwWRyuMwuAGUhct+ePoWHU1sGfJCmSWRNSiIV8gwOJ12fw+XJ9uR6ZyKm\nwdiBkxOpZ/+99e8nazs+GShiLr8qKQgwIcevhKvOyDUgtzhkd98Pl4lBeBsb\nVacnEDUv4w0g/PcUECxa2qpbHcUIqdRZzz9OAnY9UNiTrs3xgxyp7DecKKgS\n5K5aB3CejpmBc/ni/kwbmEdiV6DgXPHlI2ZBoyPIIFV0d0CO7xFJIOHwlvpC\ntpqfAj8GRd2bZWdlYbqrgiX8SUmy53rmm0a8LsOiSOjVrfsBVGrZJm3fZMIC\nBg8dnbwMcNSJsepQ0YwZFDd28th86Xux3r1ho2LTESrXi4R+/LZiDpKuKq/r\nlo/nKHkt7Ey+FJ6PF6KUUiVAqA9qE//MXKl3RsEm019LY2+LSMK4LJ2tiPzI\nmDQjEo3WporgLGO9t5uu1TVU03754PNVO8Kq6lxMimT3m90Sd1n4mJq4jN17\nC9p9/ZF0uhd1g8ODwTzMqGKGzUrd0yWaJPexgPE44e0xbJReKAP1m+wk7LVD\nrCV9MWiCTvvPf2GQOgz1rqbgd0R6mB4kQBCalcrzw2R8mcHtcGuj5n8YeWgF\nNrS9\r\n=ex72\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"29944a6973f277ce5a1bee515e9e14c395de2404","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":"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":{},"_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","@storybook/api":"5.2.0-beta.39","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.39","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.39","@storybook/client-api":"5.2.0-beta.39","@storybook/components":"5.2.0-beta.39","@storybook/core-events":"5.2.0-beta.39","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.39_1566444873888_0.312530368284176","host":"s3://npm-registry-packages"}},"5.2.0-beta.40":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.40","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.40","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"56c84015daef514dd95ed0c9104b154d8da8a93a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.40.tgz","fileCount":104,"integrity":"sha512-6yL17LPu2l42BTFqge0AXfJJ6u//I+XYjM+eBoTtR9mcHvneKpR7AKVs3IXMBbX8K0J/sr/57hXb1QoIi6ggtQ==","signatures":[{"sig":"MEYCIQCl/JfJdnKDY9V7ZvclFMkq/PYrXOxPxQ6Rkh0A1BbYCwIhALPpD3Db0f0r1O2F4Rjd6tY41SbS40tBlXueMGZdSXc4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdX/5SCRA9TVsSAnZWagAAM4sQAJ+k+75QrRUwz0vi4MsK\nCGP4RNmctFs27O7JRRe4aEqK7vPwe1GHARyJXUgXswS8bYg4xwjg1+d6Xj01\n+ZbcGe+JdK26UBWiLteSChikQ1mAcHbTTRDhb4jACeH+tj3tELNj+ErHrh79\n7SyJryBIpI0ZwEqgBJO1WdAL7FcEZlKy7vo8kDQeX5Nm3cOZqHXTMVxU2Jrq\nEru5WeHbC+nlahV3U1HNmKdyEvV+ZzX7hNjtcSRQzMD6TZS8At8VssARDRUZ\n3b8xgphakb9p17uEQxy/wfTlrl38LiYE4JhIpocwxAtE0XvacCARhNFQ+gNV\naf4qSa9gUQ/BRCP+QuTaR66dgAze5vfjAxokol5ypc8HRktI0TzIGmD99vrX\n5GznZiHPIr0C9U8pYlDXeXW37/T134bnu8j/6R4Qvb99cRGS5pjuIpcZZrAy\nZn4UGIzveOCNDDo+dapYnyhytNf235jS5/XEbTHLtyPqMkIQ5fb+lgCqMkQD\nGFp1+fno0AdLxoS/e0yEqr+pokAaAJGRjKlAhwP/0ECOST92IbuSwuluInr9\nyqy0aDSexfHAS7D8vJqBfi17sGeMrLrWD3KuZ2NmdlBGrF0e6rF5lzGjk09y\nSkTPhMESO+TRAEFSGT9GW8kCwVzTpHUquLiwNikRhomQ4Zp9Afl2NV9tiPOy\nmDxe\r\n=29+S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"61916aaf92ab3e03fbcfb618117cb275c73b4b2b","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":"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":{},"_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","@storybook/api":"5.2.0-beta.40","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.40","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.40","@storybook/client-api":"5.2.0-beta.40","@storybook/components":"5.2.0-beta.40","@storybook/core-events":"5.2.0-beta.40","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.40_1566572114065_0.31816760496253993","host":"s3://npm-registry-packages"}},"5.2.0-beta.41":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.41","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.41","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"319984387ab0b554d440f23446346de5ea838e31","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.41.tgz","fileCount":104,"integrity":"sha512-odk67ZlDR6AwvZKStlEWCAfTHVEsD/X63M1RyUGuAWP8hJIWHw3LFDxtMq41m2IuLAOnttGqmoDwVEma+EhX6w==","signatures":[{"sig":"MEYCIQCS7kwoh+KTdROGI7w1srIz7rKMHH9dJMtn9EGpYaIypgIhAO2zb2a3mMDU16BuKLbC8hH+mamWiU3FJWOHOgWrGjuO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZVRHCRA9TVsSAnZWagAAHjEQAJMeY93GJo0P1hxxLpWV\ncwc4iKB8M5n2YTTT6jU8Tpuev5nYzk75eVjew3r6K1HhvYL2GsPos2h3Mdl/\nThgFGv4p8MK5F97nVyflj8DeH3D7eULueTC5Q4igE7vWQl6jLNC4kFpMRWBU\nOErF//hzNoioaIUk67RSlVMMG075Vw1BPClFR7LnaBNsZcbpXP8iX7p8DQwV\ndDbJ2QWwvmZb6aBv+kmXCFpTZx4Xr5bj2EBe2apKy6eAO8Np08tl/EwraAZc\nVQIoX9KVndZP/m6TE5WujMchK+9kfbW7yWc0O+w5EZCIf5jFaqY5XuHkYNz0\nbLv+OabMhTQB1uaPyYPDWW5UC7ALt5VisSpLJhuI/Y5LVmpI6zyCDImd41iG\nRGFR7Q85gt3zDhdFjNCcYCFugDOYOF5czto7boqiTG3YS2QJCN7azHdkjAl1\n73rbLbvUxT0GQQIIKSEGtYlYHDE8sYjwbb9OYFRxFqJ1ZbZ82KcACi4bHaSu\nfGOsZHvHuECqfFeRSZ939BNs4ulvdfOM2UrbAqGODqXJHXqyTzwF9IfWjyHK\nNzs2hRFt+VJpGWn2MOBJMoob9F5RHfDUIcNrXavZdJWaLvqhmiZMtDZNtbtG\nBkqfbeCHN1emrWyLasdwlUZMR1kfPCR3xgdtNGeHM/QTkr9QvfbVaPEpxKub\nzzh7\r\n=7PCS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"7d272bad69ed5a339ccce4730f267f86f0339cd4","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":"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":{},"_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","@storybook/api":"5.2.0-beta.41","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.41","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.41","@storybook/client-api":"5.2.0-beta.41","@storybook/components":"5.2.0-beta.41","@storybook/core-events":"5.2.0-beta.41","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.41_1566921798272_0.9491412737193912","host":"s3://npm-registry-packages"}},"5.2.0-beta.42":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.42","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.42","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6850ed623eb6303cf94d001c6355e6566eb80068","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.42.tgz","fileCount":104,"integrity":"sha512-/ds8Xz15RBCmVWWGplDanxuQtsuuD1bhYfd+i48O/ZYCRkT+RjP4Q3kpiY+aNVbxukdRAsuP7pEeZssK7Pm9vw==","signatures":[{"sig":"MEQCIBJYWujyT43mNumAwGgWbFBs2vJd9YEACuR5ETvUF73UAiB0dhOkYFm+bByMIsaKPfUpw3I5fr/S3s6ETVxiQApd6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZVrfCRA9TVsSAnZWagAAJNkQAI7dYiz9GFgBYbjFC1hn\nNNgjRgPmZAIy9XPOe3l/Buky63RqsMiiWqxMmTPiQjKF1W70qQ9zUwjW1t0d\nlHHqVD3YGrHixCWBiaqqLyKoeTu3IBNbW0NfsEwem34xO1gAB8he3F3ODqqk\nzaECDYPC54xvKq73p+rdgdcXX1f7ZQXJtiBdvjiTrtBlzoMY/7Ngg94fANeq\ntweaN0bFxo40bE/zzKpqod6VM1ngbexyxrV0AWq6PTwFnxZrGDY9pA0622eE\nDP03ZPeEHjc/VH7imsy7WUASnfie/GEalAv+VkzntN5m9xDgds/T485JnCVC\ne3Adiw3vfiwUfS/Gkl+9Fji25K76r2VH6sk2p8EVFyQNjtxu61vgcoMvfOKh\noThTfC+IFoW4mJ6S9O13TUKMYlLL1LGlcllG5X+UTTfzFkjqLKNka4m29yz2\nPvI6TgXRB6aJmZOTybZK+s5BDpspAx9Yzcmuqm3ayRspyR+kK09Tin0bEtlm\nHK5ZhKs2o6oeFkhvwiAoIWVI3szaXlk+i9H6U0cAMZGf6XzSla+R9w4lXl30\nCqaBgwvwmztrKB7F87KFtC8F1UV1wr4tCx+BblKzOdegpyAL7wTPp/KRSWBE\n5AAZ2lR16f9cI1mz+Vo9/M0wVB/w84kVt/ZLPL/MMdPHov21Ey3FPSH/cRJ0\n8bcX\r\n=+Vxu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"adcf205db03f39bdf398e3e3066de4fa10636271","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":"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":{},"_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","@storybook/api":"5.2.0-beta.42","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.42","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.42","@storybook/client-api":"5.2.0-beta.42","@storybook/components":"5.2.0-beta.42","@storybook/core-events":"5.2.0-beta.42","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.42_1566923486678_0.9559670709556092","host":"s3://npm-registry-packages"}},"5.2.0-beta.43":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.43","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.43","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3cad280dd02270edcf4de3f00b5c56fa4f72eab9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.43.tgz","fileCount":104,"integrity":"sha512-3xNeNFRXJekGbdpc8Y/5OYZsqoyamGWFMosjGlYqlla7VizPU7sHxpdxrZKt6ChTImIM4CZWRUjKZ6Z5n7KaGw==","signatures":[{"sig":"MEUCICv1mm/M0AuZ0lRXG+6QxP0IGSh8qx5tpq0jZUR69TBNAiEA83l7C+bMk9Y1HkYCUO11uz5WZdSImV5qAVGSYZAG5vc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZcXZCRA9TVsSAnZWagAA/R8P/0fUVqPpMRfrJ7D4rykO\n2mRUrlvLdD/MSgboSnnP75ZXXKUxKH89lYL6Hsq+20UKqh7lTZJmGC+PVEHP\nVz5O0IdevZ46+eh1/mXG2EspKGf2oz6s6AiZ0OwCkVpzlC9OWm4O6CDlIY1b\n0fxRi+XBBQlJwC5lU+qaWBYqXg6z85f1tlcei/fmyGxp79w/0eMUWYG9IaWO\n7WH9yeq+sftq3vn/akoL4TJiO2z9u1AyCg+TJujLK3X4FH3kXFsn+tVMFP7E\nVvCl/DrOkuBdNK6u2FiGyS430P0m9cRArBwqVxUHCCn5K3xdxgNbiEqtpN8t\ntzcOttkvH6D1nWUeA4vbEa0Kc7j45rYLZGAysgTqo7wEn1Slx05X21USpGxp\nclLc8W3sc18DMb5SJLINwRE8dZrhx/w+68cyYVJZ2ZEVlJVlYlswaf6xuEbx\n4k8DnPU6iSxfxE3dfvLxgjg2wFmETy5EnTaQxf9WgKL2N24V9KVTjcn3dmnH\njAAZH8Z84DMRtOEt00WHJ8bIQVqRBTOBX9m6D9hR3YLWdbEkrPay28C5B6lk\nAX3pnZ8eJXsQ/V9ctGGvIRlxe2TeWdzkwJ5aNfY+HgroaaaSH4lxdqziYgo9\nYOYX808SeRIby7nsNjPPXr96dMEjqlkCrAsWYjcpOG0we3zI5rWWhiyh4p8T\nnnU3\r\n=lWvr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"0f1b6accc5e132d7d22dc8be0614791a62379702","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":"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":{},"_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","@storybook/api":"5.2.0-beta.43","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.43","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.43","@storybook/client-api":"5.2.0-beta.43","@storybook/components":"5.2.0-beta.43","@storybook/core-events":"5.2.0-beta.43","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.43_1566950873063_0.9480017733131214","host":"s3://npm-registry-packages"}},"5.2.0-beta.45":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.45","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.45","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d22b82d37c69a8d40319853d3938f49656c4c092","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.45.tgz","fileCount":104,"integrity":"sha512-QaADqMb+ydbx+H57uQaWQ1/r1qKKc6fO4PUCfTfRzUAAE/et16C09OuJ33WcrtrBIwqFHJ4nSCfA6sf0KhsYeA==","signatures":[{"sig":"MEQCIASMR2zKjE/bEr9opfj++HxcHu764D2KEv98j6QKJdVvAiAsqsT7FDKlWriw3F6iquTAgZEVRVKaH7bUwJZgLjFfvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZnPtCRA9TVsSAnZWagAAHYIP/2Ia/35yelR/n1to1Rfg\n3zRZfZ74uEsE2B2bjVZY1Ulzs4NRGoySgHDTyUSX+8Qp9e3h0XMXILN9Xezx\nWQ4jr40nREDSo8x8qyq1d9eRdQLmp7NNJJ7XxvuQsYqcDESQDnPf+hKMx3Mp\nMgUpP6BzWvFIhZU7+Vbyz1lGLkFYUuGYDTqyRJt/GBZ2K3k6wa+bFFLWtbtP\ns6KM2nLrhi/2ZGDA1BTRItllQ3tERPAI96QfdwsRh/ec9I79QcQcNgGeLJe2\nn/fOjJnQv5PrDZskn6pTYBuY5fwMsL8gicIPd6X36bsFjTU7OzLTcR1KNwtp\n4zEARG3VuQQd74Hr6KABy1RFI/uaHZPVMJ8JDE7C63IceWHO/0NfSdH68Pjn\n2ztQxaxIOyscwDNmZvGiqMSl5RnS2cyq3ShIBcJxA2JT6Z9LUsIAGce6JivW\nQVtmvIGhpwaZR+rfU0/+dz/ATQlhOj2nBAQDZosC0AZjF6G0x822M7iUwq90\nm0wsIDfHjVoSo4pxhIBG+riurzsgGQKRoY1Ycl9/XCHt8z8v+FQK3ti5+Tog\nhPCjDwUCWxZ7Qe/bpJZenYkuuTXwWTV4vmLIgT9SKSCtGVQziCsl5PvhpoSx\nL4M6Dk16kS5EGgymKQtQbwUgYVKkmYO9GwVeDSL1P0BnO3xG/fQgnO8eTcVT\nEvGX\r\n=nTzo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"ade0b7b9873edc8d6b42115aa3ba956fea6e710b","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":"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":{},"_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","@storybook/api":"5.2.0-beta.45","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.45","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.45","@storybook/client-api":"5.2.0-beta.45","@storybook/components":"5.2.0-beta.45","@storybook/core-events":"5.2.0-beta.45","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.45_1566995436451_0.9155322594371491","host":"s3://npm-registry-packages"}},"5.2.0-beta.46":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.46","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.46","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b20697a4a02b4a9da2990504498f640ed75ad326","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.46.tgz","fileCount":104,"integrity":"sha512-RnkKq7rAy3U2zOIYc64epVaxugZQro6xSxcJaAN11iEgqZLUBxERKaA99bkZYCAkmk0gR1o1Tf7anU3KxWY8cQ==","signatures":[{"sig":"MEUCIQDDgwKzH7WkGzZbYmCljkrmjpRBbNbEnQROAJatw1ue4AIgCn1b1iDDVmSXTwt4nPy9PD/vB7TtrtFtDPiA3T6di5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZ0pmCRA9TVsSAnZWagAALtcP/Rx/yngkFc32i/FqDgT1\nrk88w/gf+Yp3n02UMdq+6jYQ44jKyXZgYqUMhff4AaTXGpu0p2mppBd979ny\nctfVh0mNkHLwdj8BtHMCcHIs94rbmx8LOOy2twNIBYeXUR6m/B0lQscydNSU\nivr2YuYXkMLO2C6YOutzkDS7DqBalCaxvr9Y4+T3A1mTGgx7nhuKrnxWxzQb\n+pNMYOoZmfVfayWnKxjow7lRezOEkMI4k99bf2yC+80UoORpf0I7LZWyTCty\nwX7tVo84h+a8owbAdEABrW9VApEyIjK5DvxJsFwnLeSh67sH6s8EpetYrJOw\n30kMn1ANJE9ushtqK6c2UCOv8V6a+1ieVe5O7jdKes9LxQNXaROu7Ck7CNDi\nX6FLHeYR7P+8wLIKL1IKAC8MtsyKaV6KktDIrqAWmLs8IOyfiR/4/xBkqPxU\nmTlhSV4eZ9e6fVAlgssOXJL276TxKEB81aUW9wQ13tBVoG8Qc0fDSF1N3j/u\nN3GQnslb5yx85Jxg+dhkPnKHTKaXZUD/urAjASuJrB8VWnmPEC8lN8GngzzP\nKOxfo7dDwTv2VJdetzhcA3CzYWA78Fh2rb4azowroaTbcH1+0QW4IIW5yKbz\niKcKk+xy8L2vv5qm1JOmDRBJMdLzvo1lk/KdBnEQ5B7X/iAbyndIX1NJOh25\nJE72\r\n=nOLc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"30ad57a07ea4cdebe4cd1cf433e78034064953c6","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":"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":{},"_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","@storybook/api":"5.2.0-beta.46","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.46","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.46","@storybook/client-api":"5.2.0-beta.46","@storybook/components":"5.2.0-beta.46","@storybook/core-events":"5.2.0-beta.46","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.46_1567050342182_0.9655552688474276","host":"s3://npm-registry-packages"}},"5.2.0-beta.47":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.47","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.47","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b3e916f0d51fa7922043df9acea610929062b67e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.47.tgz","fileCount":104,"integrity":"sha512-GOfDk4nJbLxQHP++CePkLEde760hs1wZbygsvIL4d8VfRPIDMzRS0dIEyh9VtHXTCDyphBszrj00nEI8oEBb3Q==","signatures":[{"sig":"MEQCIHHnwrkihpdsR+hsWuQ9opE2bO7uIe3q4RtiRlaLIV0EAiBKgbNlpHNVgYZDDekKF3Ok231mlOrvBWH9gTrvWyOoTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaAKsCRA9TVsSAnZWagAACNIP+wcX96z4pdP0r64dmC6O\nQareR47A2QgBIcnsA5mJSfKtcf1PuNkW2O03HW98wM39u/Hl4fYh9GtHQP8I\njz+o1+Cu1/FusRNoLWKHQkhg16/yNiFe7XpeHKHXt3evI2B5Nhvcnm41L2B0\nF3/UfWHiDSMV4VIGD8ciyIUXnofGY47zjm3M65/2/abWmG36WtHmwomzS5eq\n1+QlV8a28H4wLKfSm4SwDsz+WRpYY07JYClCQZ9W2stIzQCu5/ESiUxK23fm\noG4VsNFkcSPrBmDDxGbDKHfXbDipR8RyHl94Puafzxx/llXgH8BBcxoO39pe\nYKkQgidJX4YIAOENJwazZCX4ZS5aDPbS+S329mgVCuFjnqFSV5TpnWEy9EtH\nsZLVEFm7lbKblA+w/utoIB4BE8gKVJ/srkhwWKeIEravMh7KT1EYdh3+/yAu\nu8wADWdUcAUwtk1ftxjv3vXjvcWu5Dwt2A9c42L7RntY3hiZP7qcLAfka5b+\njKIy/WdmHFwtZOsmWsZSU8n8ZUnrakLveupB+1V1aeS1fi+mD1vk9EM9f6KQ\n1Ywp/ZuYAeUd0wKxw51TB+qmmkjQmwfdpNmNwmgfs0tL67MDS3ENVANB/1ui\nMh7OlQbNl94nT60UOX/cC9xo26WM3jcc8ThLy64T68ejglEI5oCLfxkCsLo8\n7/uL\r\n=cju6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"91943299dc54b0d0c896ac44b7109025245e9fe3","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":"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":{},"_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","@storybook/api":"5.2.0-beta.47","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.47","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.47","@storybook/client-api":"5.2.0-beta.47","@storybook/components":"5.2.0-beta.47","@storybook/core-events":"5.2.0-beta.47","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.47_1567097515700_0.11642110539749573","host":"s3://npm-registry-packages"}},"5.2.0-beta.48":{"name":"@storybook/addon-knobs","version":"5.2.0-beta.48","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-beta.48","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4dd88daff5cf5a8e155b2cb618d0e4ef08e7093d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-beta.48.tgz","fileCount":104,"integrity":"sha512-jvTA/TJ1GmdNhRLR68NhwzBkiudiyEczzphfWPWSKrIcwVXtsdw+SoSirQ8yLHWuDvp9uyqa6kT2U+qbILYPCw==","signatures":[{"sig":"MEQCIEN739V+vUChJCLcZgShc6SF+iYZGXGp7Lohz56Xe2VHAiB0kyalItwGKd5/GtS9cv2YTmZuipgP9OPcwOsOWFsA9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaKPgCRA9TVsSAnZWagAALLYP/RymMyy6O1dAxdNOP+ot\n1T4NQfC6rP/ApVb1TwiTCqzkvF9Ib/tFirQD2qZmws4HeXDqM8tgPZlUOMFR\n0O90QC0IJHjokjoE059+Bi77RKWQqaHdeCRoTMt35lXNoHx7Myl6l9CtFIAA\n7lImwre2Ld0rOd2V1NwtX9mkL6xxIIIAm5K6HcepTzMasWYYfjINg1VXTjO+\nGbZCgpcGP4kpWSqIDBZVq3DeyFYYXmIIyHL4+Ll1szFP3b26LsB3f5EkKg4c\nf+5sLrsxy+Yp4USLQ0BWWrWZtO3J8usSe21AOO4d5OTSN9U6C5s8gDJ3Y5Yg\nVRyND2QIhdoOlOwcU+xv0XB1b1c0wIedS7vUrmuu9Pa8vyrejFrciqkthsC3\nZk849bh+bJR02kWN9lkCMndSTZc7htu6zhjCTjQ04Cu40CMmxxI1NXaYnvo/\nIuwK7VXyH9Kjw1QJ1uKZhvkUz0opnR/bdRNINeZLV83zzQXfUyUIFsLWDeqq\n+OH4HdLy6n9B5ohC35FnkTi3o7yBFN/v4x4T6J4VGY0DWwZ4xCUjoU5FDl68\nqQPheSmQXIQ3d9nzdOzsytPaNTxMP8oiR531F9QVNXFiNP57yANBTLUbVL+C\nh9dU+gqN5zFKZ/reARRSwDK0dOeYHboxZ6Z0CQY1kqHI0jZYviZP2DFXbkwp\n0KKX\r\n=aXnH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"be34be9529d2554617832378637bad0e53553e90","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":"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":{},"_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","@storybook/api":"5.2.0-beta.48","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-beta.48","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-beta.48","@storybook/client-api":"5.2.0-beta.48","@storybook/components":"5.2.0-beta.48","@storybook/core-events":"5.2.0-beta.48","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.48_1567138784080_0.3560548844764855","host":"s3://npm-registry-packages"}},"5.2.0-rc.0":{"name":"@storybook/addon-knobs","version":"5.2.0-rc.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-rc.0","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3e0e59ae4d51cee9206832933d12679561823de4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-rc.0.tgz","fileCount":104,"integrity":"sha512-K9tL++6obipqtwDUuoiWc4PA92PeY2SS40LIlCvU1MztrAUm8FKFfuTPK/7DqTKJgP363PJqHzljJYV0aRMgUQ==","signatures":[{"sig":"MEUCIQDodazc90S6U8ml0nokfc2fZbImm9SXL88rAODHfbWNNQIgbAS3SU8qNhXsv1vK+yewkNvI3f2BMLYpvfOsLN4nlLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaMXhCRA9TVsSAnZWagAArfUQAIrEAGficmJ26YxRKLx5\ntIworJ6jcieagjha5aW/ohNQfl6fK7KbxH/HwPE+NPM81/6yej+llqRQ6xh4\nIT0cvdoRElfJBbwFf/XBhkvh8/bNUC9JgB3ynkKuYEblXkXLOQ4dW50DMrJ6\nQE9IrQAKUF/3+5XH2aTtUC9Vh9zj92/VpZfM27rEjOyE+e4kYAZLzn9KVCbz\neAnL8nXS1IhQ29Yy6MnAkcB6ykCxRpMaDjKb/tyemImN/0CoRcTgKRBEdMGs\n82Io1TfGXupJXv1c6gz+1Y/Ta4H0doP98Jabkir05Afv/eZbppIeNEsHIBx5\nrXy5dPOnIW1LT9RryodmwcCdueFtLbIuaAYiv9AJjZvRRDrouznaqOfSBwgJ\nUfZY3aanrZHWBVL4WzucLM7OeCQiISL/hEqIkSdvAPXn1CxbEWkCxvVmdPPn\nQ15vMCCNMk+ikdapJLv8WMiSk2hRjuhd7uF3wu+R+XoPSEHAS7TpCysiFBWX\nsEEhux5nBoLbfF2CpVphHbHtVELtLxSk6S3yvAhodrB95a7s+KndBXmuq+kD\n1thDGJ7zPqhMizXT7QO9J1XpHN35eUi/+HEBNFXpwGtjOwA0uWr3PI6MPF/N\nspURjTcTgZXAW3Y0j0B4Qjk7PVk+dGXrGaMhiNWXdH2vBFy53pE1dvRiFln8\nBSKw\r\n=60oJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"69af3ae2d3a829e6e010fa19b4cc927096d6d326","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":"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":{},"_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","@storybook/api":"5.2.0-rc.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-rc.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-rc.0","@storybook/client-api":"5.2.0-rc.0","@storybook/components":"5.2.0-rc.0","@storybook/core-events":"5.2.0-rc.0","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-rc.0_1567147489235_0.679736786425392","host":"s3://npm-registry-packages"}},"5.2.0-rc.1":{"name":"@storybook/addon-knobs","version":"5.2.0-rc.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-rc.1","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3593af7fb1b0b9d3b1a58cf6a3791600b8f15dc0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-rc.1.tgz","fileCount":104,"integrity":"sha512-TwD8k1ZnXhumEdXn6BGeO9aYjoaoYbgxengnm1S5aJNEAhGRbleOZ2MgF20wevI4Cnh2oKLUoFbecKSXYLDpIg==","signatures":[{"sig":"MEUCIDKRUTLWf1qF1WVGZ4cKcUICwXDyIPfKz4VxQrP35FncAiEA40XymUhOlugVOCbuqxOJcNiegQFCbD2pUiO+ByT/fV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaeJeCRA9TVsSAnZWagAAnToP/RRMP1pI3dNMn45LCAb6\nBQ8BJ6x50wG74zJABw7l/5as2dP2YCHCONKH90OWzrPi3M4l6A6Equ3wEVvd\nYimwvlp5MBY4tuPFFvufk84OeJW455lO0jP0zydkbcurQ7pao9YupOFCdcBh\nsnNIMkXeope3fbS4Z7rqdP55qz4xp9WQDNrPnA6dDEEWRUBRXNYxxLut73DV\nqsW21afvrs5y0EgJF9+hahJJ88gXCCLRhC7v+dEHVz/L6tvYkpj/1LUm5B8D\nUrcEvENcIalmOXmUs+PHEzxzxF6FBoQd557S0mDJLx/qQj8aMJ0v+sz+n4Eo\nUWHtBtqxug7+S/biQYQet+R5Y9T6MX6xXi5scsI90aGkCzhFcJDeqJNtLnMX\nDj9qT99AbesaXxVjmMEy4itTS72eS2Vgf1KvA4h76nZl4bxcl+K5Fe2jtWCb\n0I4jh2focCawc9pwPmQjDaS4Sdic2rW1SlXlEgxc1AocDn1oqUUJjzGl9yOr\n5zP6A8c9cmpqPdcSP1Bg6y4w+m9aMmeXe9odMjOJo9KfW0Ee4s/cNs7EEDEU\nVp0hNFlRmCEdC9si/k+s96NIx9iMJmLlNjUrTYV09+qPdhDq1LEW0y6lvGbL\nWcUWPXwfY4oYoNQ/niwcbfJbTW4dTXzEsvkbRmUEVp7zBYyNhsXTIVnmNJTe\nAFZF\r\n=fYuF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"a5a9838c2926d634f3865affcea8a4e2b19cc02c","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":"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":{},"_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","@storybook/api":"5.2.0-rc.1","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-rc.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-rc.1","@storybook/client-api":"5.2.0-rc.1","@storybook/components":"5.2.0-rc.1","@storybook/core-events":"5.2.0-rc.1","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-rc.1_1567220317362_0.3589465297353116","host":"s3://npm-registry-packages"}},"5.2.0-rc.2":{"name":"@storybook/addon-knobs","version":"5.2.0-rc.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-rc.2","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"184526807b92c4ccce1fbf716a87f164eb691ba8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-rc.2.tgz","fileCount":104,"integrity":"sha512-rv82Ly4LFrGqBb0dZbCLkV+1QYhJCKMcs/8x13kfyu++rNT75X6TEbeIQmrufTzU+kqIon9FHbN0hohFIh8xYQ==","signatures":[{"sig":"MEUCIQDS/cRJNJ2UW6/1Zdr1YIGiph6wdLyZSWKMse7KYBezSQIgf3zvJve7ezNusnHidT1A+VEEpaeTXa0/NnqrQCVHTRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJda15uCRA9TVsSAnZWagAAckwP+wZIiUeNmUH3FUmLJOZj\nqpyaajSZg0Fywu+540UhWycHMyCYFMfDQ3JfjRWE88L7LZyOePwNxA3d9Uhf\nSw2h+8fWTmXMxnCq43NZfnyOseY3p/68CoXESYk7o1t/CEMZtMe/Yc1Jntrj\nzBBe9yFpL2dCAc6BduUsfjaYabVaQo9mmvRvs09N29821g0jUHezZqgbqQiU\nvU/xQhXlGKpLeE27gp52BZz8FLKZXhEUDWez+BdfNRqs3tvW1WVuew+BUyND\n5Q6Hsq8CmBmXJrOgrtwDvFN76JRdLzP2uSPlpgo9o+WMR3+ES4tch9iEOjL0\nV/ldhBEmvGwolGvurg9iVFAaJ7O6LODbsMcnAOGUP4NNdxVXKHBuebL4LTvE\nPEeW0erMsJNMLq2AiCbot+QkFrDLjHPVVX2RtXr6JW2UijVVpDfztvK7njJb\nBWdKOHd4Q19Lh9FvzmWnUMqHE8Yk6y8/8zot+ZfCMjIGUdcCfvHva9G8np7h\nrPOFWRQO+Np0MEMwdpXWhDt8qaXexbiRTH3AZ+j68X+wzzfluAN1+pKcON4w\norSYhnBNBlZML/ZWXFD0THAp4+g+zxEkHtM6Eyq/TxXsgOPbcNmPbQ8V9y1a\n2hN4cFBA71M20yJ1R5aGWc02IJDZmZPY4vqTiKqQ0/X1qMhB8fQX6Zb3IH4+\nNC9O\r\n=ofOD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"f59b9fc0fd76acdf75de9624eb08df4670805596","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":"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":{},"_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","@storybook/api":"5.2.0-rc.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-rc.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-rc.2","@storybook/client-api":"5.2.0-rc.2","@storybook/components":"5.2.0-rc.2","@storybook/core-events":"5.2.0-rc.2","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-rc.2_1567317614244_0.9526608963830479","host":"s3://npm-registry-packages"}},"5.2.0-rc.4":{"name":"@storybook/addon-knobs","version":"5.2.0-rc.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-rc.4","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"7fba82ed95c51d9f6fa086922937dca4fb7965a3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-rc.4.tgz","fileCount":104,"integrity":"sha512-9pGDXQfm4L/rRyvIemBqx8AGaJeygBl/wNjsdf7WdtoZQ5AUlqD/MxUma1hQDVjTq7sqrr4v4ruSGJfYi4QSlg==","signatures":[{"sig":"MEUCIQCvRYjBTFXAOG757tsh48NB/FUI9RYTHoEAoF9IV3UZCwIgQ8pYG71iHok2ZMe4WIx5Qv65IMrHepHILs/U8br7HmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbjkFCRA9TVsSAnZWagAA4tMP/iC706gMTjplnjg6xSSS\nKE9kTAw7w41Osep/fTBoLNXkD1qBSPFoJMo1LfMdn0z7IsGYI9QSFdiqwJ9N\no5kv00dcnn2ymfSujhcLCJV+AwxnyceBP5AdJTcv71j/khWKn2tFQYz3s605\nNobsM+WGxuXbLFqEiL6zuYHcl1GFnyLdvX94dAemhT/3u/xUgFw1a1fOFQig\nIrRMhuDR1F4tMevSf10y9oTcFjEGo0EbwZEKZEd0zXEQTKC4tuobPwpeIvVx\nzQvTmZM6j6bJkxRDA1OvqPFz6ANHOeSDleTBrossFkVAtt52YvNm+hxbh2k3\nDd6Mr8VJIH7XoUliEro/JPgyA5DQ8m24haR3pbCMiOA3mTRb+QWyaJ7h63/x\nDxcaibHwXhIFH2G5zrEVqNi4RbBBKyj4iVwUcyVn1jGPP3FFLDLVAyO70fWl\nTxD55C8QGsL/guLquoncW7VakBcqavukIhSBWDbRRS4sRjrhT1uoJ3nSHyh9\n7HhbcAIIO5Gk+xCwdLqsuYNBKxa9dFo0M8vfqW1DBxdEw+1GCjwkPvwhwATN\nZM2ngPbUxnplghVEGJov6E1mN2lBgFP6ObKHkJmucHFLIb2h5E65dZWrxbW/\nVNr2NlSvrja+aUO0OZZqIiXyD/hGFA59ISDxNuPiEVNXJMS+HrgDsDD5cR9c\n6qXo\r\n=LVet\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"9024c4068cd4c8aade6b3ae7a02d90092352cc62","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":"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":{},"_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","@storybook/api":"5.2.0-rc.4","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-rc.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-rc.4","@storybook/client-api":"5.2.0-rc.4","@storybook/components":"5.2.0-rc.4","@storybook/core-events":"5.2.0-rc.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-rc.4_1567504644312_0.45112938739250885","host":"s3://npm-registry-packages"}},"5.2.0-rc.5":{"name":"@storybook/addon-knobs","version":"5.2.0-rc.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-rc.5","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4c8f1dea1648f062b6346d78fc9e232ce5aa1477","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-rc.5.tgz","fileCount":104,"integrity":"sha512-TP9j6C/50rLYw41T424rUE0sxGzjIU0p9wQCofC69KQhnoUzFMGEw0HF5rRw8jCWbLNDKfmMQLbsCSUwaBgJSQ==","signatures":[{"sig":"MEQCIGdHF9anDEK7kzNgk0/zy7npHWLd9l+jASKbBJzlKq89AiBdTSUMx9KFc1oLsy1/nVOgvDzU87phApGv27HWB8z3Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbybfCRA9TVsSAnZWagAAOCQP/jlPa82FgFoNfiSSvOXQ\ne93tpRbZAsTaPTvjsOjKCIiqdAbm4C+udTZmEVgygX6kboYAOC4abMKD0x9y\nUtmq4xJZuGZZiVKQi7PAVwAxxtfqq8SIaNwF6JskNv7n1PesNuGMTcw7n8Qs\nIsYHTpCuq/dHl86b/N29LrrOYV+qHQSLrM0lr9ZBCaF+ym6c7PzSPOAt4Ac2\n4/lsiw1g+TDxpOXrRKHnEPVdLFvWiPnNGGDcOXPrlJBox7EoQiE1krIjw3sa\nkBwdtFlhJ4o5rt8EwhuIIZQYn6Y0Vg5emVy+ardbq7ezW+CSmlkCejjFPj4v\nldPVAz86OQda8WFe+De265gILZ530g9xzv6F1UeUaUNyxNG/WjlVc5ClMyeH\n1dpB+a4q1DLJyzsn4kocfdazE2weGiaIhijjojQGatKEF+UEsAKk1gFkA4yd\nzHCrtETzC9DJP/Fn15HuYjwE59IGmIx75xcwGLzMGwQIBo1bEQHLux8xdjEL\nyFXaJoF+MfQ90PptIFtN3vVoLIT1jHzTQcA72VLyLRNt9Q5kJ7CFeWOZSQYB\nP6r7mqVwISzvreVqGXUqU37r57M08Ahu7DXWkrzmvZx4flZl9V9/W6+K5XDV\n5ZCH/W/KVgljsMSGwxS0LvTD/MGUtfyzYGvrZKX1nOviMj0nHhiYERTka62N\n5uZh\r\n=hpR9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"2f64ae316ab2bebb5b02d8e323e121ee62ae9733","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":"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":{},"_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","@storybook/api":"5.2.0-rc.5","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-rc.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-rc.5","@storybook/client-api":"5.2.0-rc.5","@storybook/components":"5.2.0-rc.5","@storybook/core-events":"5.2.0-rc.5","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-rc.5_1567565535024_0.3420932424078509","host":"s3://npm-registry-packages"}},"5.2.0-rc.6":{"name":"@storybook/addon-knobs","version":"5.2.0-rc.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-rc.6","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ab244ff336f2e5ddae179f15496bd2386d5ccfd2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-rc.6.tgz","fileCount":104,"integrity":"sha512-GexDawVPnXXbsf3zKzPNpQ4IH5CFlfTjad1vpWeXA+9ZiFEPGuxOtlIg2uil1/LQTRht5kfbjDoNx932wSQhwA==","signatures":[{"sig":"MEYCIQDtL08c1wx1D/1vu1wJ8xC5xOKTj1rlRruo5GupTNoj8AIhAI0yZvVtc4w3C3QGTRsfbsQSC807Vyk7VisregkuiVcH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcLCvCRA9TVsSAnZWagAAgowQAJPtkojK9c5wbdKmPBpY\nhS2htcdkA5dotrej/R77c2jnWf7WLmOeuiLuTUOWGba/ZHCViZw9eAQj6TH9\n2p316BP4MItu8SyKHrhVZXatqUjuEFRJlTZmazUlE3p7joivScRmuvcfzSAO\niQnec6B4qF0QydMrbkn1sDsWariCrSgpuMlYIqvkDP6Skd4p1cGoxrU/JpmZ\nlXROyozycy0lIfq499v2/CZ7YTN4z5Om+31EsY6ekYxDZA7T7lLtSx8EtmzR\ny2qpNWcLDNz+M+zOzC3qCUlI1JNVAn4S9QXh6vMAH+GyWiNA42xw4biP17JS\nWjLWwi3oN3zCAMRJ+SJ3xZzrz/fLjwOAGgMpO+jSIhlrJ9NRGNkxSF9sxn66\nZSHzV+AHvfSknQj+VrMeRe16iVl/DV7GE/nWAc5fRtto2BZ0yTdPVxgCO0VW\nr/6nw96ccgTs6G9DHUYzykW9L8foPC//eA34fmEmQOojp9YuDWlCd1SaVezG\nEywTEPb4yI2qDiTPQp7zQ5EuuOVbqDHIfdsj5gfnkcpnKcGoICNO5SEhjuPc\nzA1PqDjYqeF5GvwheIOrPjmrlLhnqaKBzohLukI0zw689TUGPARJErjpCbDA\n4PRtjgyMgOJ9D56oF5OKsXquTTOZDqGFiE6KwyrAtttGHNZaT1MWdhKZi+bg\nOkKZ\r\n=0SE+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"2ec478efd96f91f6e6040f455e18fe0927bd363f","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":"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":{},"_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","@storybook/api":"5.2.0-rc.6","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-rc.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-rc.6","@storybook/client-api":"5.2.0-rc.6","@storybook/components":"5.2.0-rc.6","@storybook/core-events":"5.2.0-rc.6","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-rc.6_1567666351250_0.5352074765627339","host":"s3://npm-registry-packages"}},"5.2.0-rc.8":{"name":"@storybook/addon-knobs","version":"5.2.0-rc.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-rc.8","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d26e957360fb88bd51499b11cb9d2544f1a12d6d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-rc.8.tgz","fileCount":104,"integrity":"sha512-1lkGNAr/k8fxnNYIcis2RZ+vI9+JUSRimWirbCM5c3GJV0WIWdH18b606fysN8hGqPX1isXuyAWO1N6Rw0o+1Q==","signatures":[{"sig":"MEUCIFDpXp+mg5lYA14NqMqNIPEuszBpocYShBduL0OmGsnhAiEA6UUVRageYA7Yl5Urr0UjeyEW9tu/E0hdw9bWksOuXHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcz7QCRA9TVsSAnZWagAApAoP+wXaeROA4HF4Ab2oo7/5\nKEWhNcJ10PuXTT5rqTouqr+29Mf3FGLiYcGvxIQegmLNeXBr7UbNv4D+5W4g\nvEZdrUO9Q7jU2d5XSm6zmspPLBCJkydjL5fsRxNp7DKu5GHt9hZH4jflzYRM\nYaLaJPI2TkBRTYxyUS2uN0rI5tY3XRxcDDhfAvn9HnooUyI7a9SnumNUmoAs\nWnXpa52rTcS4CXn7oIsZpdBCjIlCqzogeGCY11/vzNrQZbScBtnnguW7SKmz\nkDNvdblcGnUInZmCVAnHmo014ExQl6t4+2+M0legSp/WlLTEBhLNFmTxH6oY\n7z0zi4waLN2ONYiDsEKDuMdGDFnL3k3jcmMpeQZKLBqsz05doqwXpVPtx5Y7\nE5y/gRlvaBjQP2SRqh2SUYKFUq8NJBG/QijOMIrtnQ7fxkPdvo0DBCUsBoXJ\nLv/JkvlVtuV5vTEOKua9U3qZ/C/KPc9JkbUrpR1mRkbrPqxUwLPrTWCNOl7k\nBogi03DhqZgla8GhjxLac1wpcEjqN9WIS3z0sXn7E/dLG8612haqtBSHglsU\n/vy5BRcw96mB3BPRQo2JoC1tBKxDmNhUsVBl7vf3S4M1lMIRh3Ym3B1C7bHv\n/LG2rtVmagd6Wr6sPUYpHvxFM/nkvyppG8gYHiaNdjgEUAVLvCKm8W/Bmzyz\nFqyG\r\n=n6VZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"3574c5f8ce2366d1c92d6f34ebab84ccf162f327","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v8.16.1+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.16.1","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","@storybook/api":"5.2.0-rc.8","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-rc.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-rc.8","@storybook/client-api":"5.2.0-rc.8","@storybook/components":"5.2.0-rc.8","@storybook/core-events":"5.2.0-rc.8","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-rc.8_1567833807610_0.13439777435019162","host":"s3://npm-registry-packages"}},"5.2.0-rc.9":{"name":"@storybook/addon-knobs","version":"5.2.0-rc.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-rc.9","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"fd86ceb5885629ae8512920772450920a6781fbd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-rc.9.tgz","fileCount":104,"integrity":"sha512-dOmvRLbhCKO+F2+jg1TgX9Hi9qp9EJHKXiT9nOz0iYuVOp0yJfD86J+9mUsYq7mVmxfAZKoA8vuDS3VOxkoIVA==","signatures":[{"sig":"MEUCIFukBfkr1s+yUq47XAfOiy5XJ0N5FE6PxVwlgsbHcE0HAiEA4/85dpTjOhJu9Oo97t2qYHngCicnV5FysdnfdNyLY2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1369327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddIqJCRA9TVsSAnZWagAAHzkP/3/JpYa9nyx76AD7BFyc\n3Njbw5TYTJJVwLDrpUwkFDj6Ty3OWW7tV1s+/7Jd9zYoAH//f7QslVEXUc01\nocM3p9t7HJVcqn08COczeu9MP8G0TCotuReiqLfGvDz5i4kSMCViw/oKtNq+\nxgPFYILY8z030h9Og6HmpnB5OnYyA6Duc83ZRX6s92BpDQv8y3+DJ9Ajm+5E\nk6MzC5Y1eD6Gyd+UDGu8uRPr7yfN1o4x3I1A6J2JWgIssF98ijXmWvp1aj/T\nJOmKUlEeD5Ev33dpmkTnJ0rAZzYmvKS1iDdDxExvkPelqxoCYG5ZTCqzSo4/\nUzrZS0+HGhKaJwEkoFIfKnsWbu5lvC2lkJdcSQCtdexMnR9WD2J3EvB9zEeA\nKVWMc9byamQMoTVBBf1jfO9vr6cG2i9cKNZdPw8DXno0yhOPFZQXDfY9WWYO\nlwAKPKUN0t34VqjSQPq2NN+/lP8XN47T/nybmj2KDypKzV84WZiy+8MryR1M\nmIU/8/POQBljTS1vF0iD8uZ7NwKpmtupBpydqBPj5cvkXJ+OrLrKBGldYKhp\nDQ5lWtHbz9dP3RUJwnwEpP/m4j2ypJ66Bu2wqkcMEFSYrBObUI0eY6csv7gr\nAOCUNxvrwLOG6CNx2SH/7m0eKEOgpImi65/Rm0jBxDi8dNOP+cAf3pioLEsa\nZOvQ\r\n=lcPg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"90e54468ce99029631bc80b8b1907ce0db8cd6e5","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v8.16.1+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.16.1","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","@storybook/api":"5.2.0-rc.9","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-rc.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-rc.9","@storybook/client-api":"5.2.0-rc.9","@storybook/components":"5.2.0-rc.9","@storybook/core-events":"5.2.0-rc.9","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-rc.9_1567918729210_0.8290659453418554","host":"s3://npm-registry-packages"}},"5.2.0-rc.10":{"name":"@storybook/addon-knobs","version":"5.2.0-rc.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-rc.10","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ee3fd0f0f62aae74d4d38a225ea03a007c845593","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-rc.10.tgz","fileCount":104,"integrity":"sha512-3t4K1NWULfI332xRjZTIFNCA8Q3J46Slj8fqF+F3ZMM30644OsupI5gbq3JsuPIEdYi02tWGOb0kSFBwYDILsg==","signatures":[{"sig":"MEUCIC4zMb86ZhLc0KObW2u6YpketZyW8g9BdQ+lImou/tgUAiEAx9UwKPdvsFvhV1k2UNbkWQOlqPCJeCQPQ6/6A+8vzEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1369334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddsuUCRA9TVsSAnZWagAAUN8P/0ftARvPwat970T5PeMS\ni3Po2uWzFI1zzkBKLyDgWyfgAsP2wcyptYh8FpCOBp6Z21MvVtPK/TeESqXF\nUqXpjCylWOFenoLe3B/CYI9NUwJlPF75H9PGGXz5LYII/9XXFNg8XkYya+9n\nsgdLw2wBH209gzmijzqIxDS5AZ809S5BZXWG9GUnAqf4OukhwPvpdeKMnKZq\nenEIldDSJMUqwkxkVUFfSkyRVHEjaF55J9II7XS2ZHGM0dPYK2+NLPWjuU91\nS+5Tgz6kPGriqIfXX8YF29iVoimcUfeHn7QFiaYIbYA5XWE5tdR7ytMqXQdF\nnnivocJDicu2q+nRY01G1QvnjE+kaAVgEIhXJ4tyKT3eoS0mxaVIVnd5ZvsM\nK/aYJYiDbYoHaHQ8Popjhsnnrm5cpD92cJdBEi8jVk71Q1lX3Vyx0JvdfoRn\ntqIL2oEyHqfTmAXQFMQSj1vXvaSdw0loAtt+yGos7tAjym/1kjS8YD70b/+l\nxvyBUsuAilJy7jSDM+P4T+gG964S3Nv4QrEJDTIUGzp3/w5g6fZrvDks7fMl\npiJy46Q6Q9f91diRt9MIJvil8aEGfZ5lMYFtCuHKo996r0XV1HXhf0/ZAdd6\n9QSUYNbiOWp49MKJ682OWzUUspMQipDs6UZqr3GfBdv5ZTH7bspXEFGD51fu\nRV7n\r\n=WYEt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"e22ff44b2c2fa62bcb9522e95199dc734b72e7fe","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v8.16.1+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.16.1","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","@storybook/api":"5.2.0-rc.10","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-rc.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-rc.10","@storybook/client-api":"5.2.0-rc.10","@storybook/components":"5.2.0-rc.10","@storybook/core-events":"5.2.0-rc.10","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-rc.10_1568066452070_0.649728007394887","host":"s3://npm-registry-packages"}},"5.2.0-rc.11":{"name":"@storybook/addon-knobs","version":"5.2.0-rc.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0-rc.11","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b036332553031c683bba3f004969717a2feceed2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0-rc.11.tgz","fileCount":104,"integrity":"sha512-SWGtderR9Ia6DWYxLixNMp2BPXXwN9xvN0N1sR/+gnYsl/N43jkjZrdeGyMq1Z98gPr2vpenDhNUhQGkO7rweg==","signatures":[{"sig":"MEUCIQDfkxxFbINLjMtxxRPyNr8O+S56RwSvImbrqWgVRIxJmwIgInDBWnFzaYL1Ew36ANV35usswrmbZtD5AefKgwFmADY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1369334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdeArlCRA9TVsSAnZWagAA3rIP/3v+smwLxk46MnQCl0XD\nfLU4hp8o68Vs01ZxhrPjARhSc3hMVZO5BgmsxsBkik5Lhkbd3YIeO5n5Y5d5\nogC5SphZJzLwR/sWjlSjihkf2kL5wtk/6X3+nxPyyCKfeQ+I/8aNnjuD/aWo\nHDUwX00Rh1HXpPQUm/lFNtfWt7M/yBSVoKPpBlU1y9//vXLqo+dmcU4IQJdm\nOEz0ChWUKGBfpx4uIMjS6PcHuMayYZmoLklovCf0s9xqtLRDyhTzUa1LXTBx\njRGmFMD0hGChd5WrkkJYcgnyrx9mZSeioSQfDNMSVA3rSTiFw63pBEymbH8i\nHM/dtW/AZZXfJqCigZMlpZveC7vSudJ5UgTlBSr54vW3WRLhr2UsBJT28Daa\ngHoAmdAhIn26W884lAEeZRNVtlVKfJUt4CWOpI759uJFGsCpV+cCWMQe8JUd\nh8Mdr5mbnM+SHClXOt3AaoLtRTgQomq68eFCTDvK9TxivorSDwq74ZNjBYcA\nkwhM3qEo7NcDSXug4O77utlJkMokgEN/1RK6T4FHpllb8J4cFRx8/9i27eFm\nFHfXVop4S4mM+Hn/Dnsau+ay1f4b7zCspr3OvcDLS62ClRlMnVbGZ/GHpk0g\ngL/6WiQrEtAmEV/cKuxd1m5YT7vArYNcM2ar7y74EZpGg4Mlouht2xy406Bi\nGgtY\r\n=MOWh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"cd6ba7734fed91016edda07794d0feab5b9e62ec","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v8.16.1+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.16.1","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","@storybook/api":"5.2.0-rc.11","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0-rc.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0-rc.11","@storybook/client-api":"5.2.0-rc.11","@storybook/components":"5.2.0-rc.11","@storybook/core-events":"5.2.0-rc.11","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-rc.11_1568148196941_0.20583133042930712","host":"s3://npm-registry-packages"}},"5.2.0":{"name":"@storybook/addon-knobs","version":"5.2.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.0","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"976d3ede32b81548444aa3cc0adc7265ebefae94","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.0.tgz","fileCount":104,"integrity":"sha512-FYU7geG9xZptW4qWRO9Tzzl8OZIh6/m+TZSy6FpFQCJDKY/bKA6Lww5FH1rFE9nyZwFpIO+cBs2kZTqVC/XxRA==","signatures":[{"sig":"MEQCIBIcM/7l1gsf/oSylcgPRy1P5ocul62RqQmNcH/qbF5hAiAnhMAlYBYOrwb8bNwyE2/wJLXgJQ61+r392CaRvg7zjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1369292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdfGQXCRA9TVsSAnZWagAA9CwP/3SX2Ht+EboL3oQQX3fG\nc27s/cj5nmiUleARzYpq6bi5LvQ27+dtYbyi2RXSriJTaKzofVJzZXjvdAPx\nGS4DZH5xa/9eNeZm3Hs4FwAA+RJsUCpdshUMN2I/PDcznVmByqwpZh7qv/ql\nupvdJcGFNFOtlfzcft2EmVbcFe+I2acUYixI3me4YqeD7OmeK58vuolW//aQ\nHj11DDe2fRHFbqSI7iM7SjxzBOv7iWrdNmhXNbQHaDE5yWH73g4fryjiuqwL\nIi+l7rhJI/s091LQ60YSfS1YPe5wmGEXQzjsqwM4KLMpco2wO2llDGgJU+YD\n+UY13IBQrPbIw930L66ARrqKyAQD2uoUQul/SthzQsQZsS9tXxv/8ljTE1EN\n5BiGyek6HNubkJIcV3/mXYN033CO0DAmi6ioIyEShRqikbZLHiDESg51Cnsj\nmbdavQxzm4aAJ3nUfCFhMutc3dV4m7lFA0PrM5iHeu/Brytg+i3ixvIZjqB/\niUY5zV61XFiqDkKIk+r5lOnXfbtNWX9XuY5cVOd+1nrZ39Rc+dVYgxhmavz1\nQ4kvZ0pTmOGQLacUZkcKgs68RG/rLQpEgOLr9jUMbLsmA/51I6Em+Uikh4ds\n1GKjvYKDp7gMau1AYDpP/pKCanR72cjUxJxF6LuohfBykN530eXLdm/2xuxE\nD/j4\r\n=uh5Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"0e780c17f0cfd4d4c5a266bbd52fc76eda8b22eb","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v8.16.1+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"8.16.1","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","@storybook/api":"5.2.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.0","@storybook/client-api":"5.2.0","@storybook/components":"5.2.0","@storybook/core-events":"5.2.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"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_1568433174532_0.7040738189482887","host":"s3://npm-registry-packages"}},"5.3.0-alpha.0":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.0","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"41ade08e903481fa63eede995da57ceecbe0f7fd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.0.tgz","fileCount":104,"integrity":"sha512-A94MPYzRwmzfeFoYMRMT7A4qz8lKhis1KaWooS7b6vlb2zFjvL7/tr2KkLxZQzgtvtIm1I3hQ9Kl9Mtca5YjgQ==","signatures":[{"sig":"MEYCIQCldKNqQTJz1xdsNVDIml8fBpJAhkVArRgtNoGXug1iPQIhALJrY10Fr+dpqVFWRUBAtZ9pE7zZOlOju3CZBcu/2+ih","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1369348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgF4uCRA9TVsSAnZWagAADyoP+wfwZuVQ9SJXRncKOWpb\n8jxc6YJql8tFRwKqaAYDcIAdmMfaA3a2rLtZbQHAZYKpz+zr+zK3+1TFvf3V\nxuCGw/8HqLmt8HrMHJU/IeBjPWyCJCiB7evnBeKaoGldq0zMKoRc0V99PJG6\nkH6KCpITobX/BfVCTrZ0rED4NgTOmRCEj9tPsuvEEaAA3bFrNcWptXeAcnl6\nyJqZsAXSx8IHpQEJovdi2rq4H2qBd4CLbwOdEgYfik6rhnhFJs25AT61q1bJ\n2XiI9c0fW+fDlXxZHl3zJd71p2AtaX4lXaRrixEsjI9Uzd1SqnLLPMrHrutF\nksJSgczc6eaf81tC86w+JipC5biGgXw1ugprlmYFom47F9hCuRjIJsRDL/E7\naMqJuDwqu5XzyYBjoWXpS2LpPlTI/Pc3HVzGmJFD+1NaVvxip4kPElIzKue1\nn0qC5h24Zn340JsBGWsbvTpfQ8xJUm2X/KD1aLmZcrqm8qok+7QDmJ25PexV\nLhw1Cg5AZTDNAx5MONb4mBZ59bCTWvpBh1iFmWuSzOp/aJ5o9gf2c+udnFGz\nAXzhKxryDswB+6Fs+DIRJygo5TV7VfYshfUE9z6C3mrVpKB96otnvADNItMv\n8dEUDPqVkniefoZzSM09+HGOE0xju+D+26zpJsfJ7aVBznH5KM50/YE340xU\nWOPA\r\n=2qqg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"6becec4d78bdb3069ac167b19d01a81eb98f6164","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":"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":{},"_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","@storybook/api":"5.3.0-alpha.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.0","@storybook/client-api":"5.3.0-alpha.0","@storybook/components":"5.3.0-alpha.0","@storybook/core-events":"5.3.0-alpha.0","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.3.0-alpha.0_1568693806067_0.48036086101195874","host":"s3://npm-registry-packages"}},"5.2.1":{"name":"@storybook/addon-knobs","version":"5.2.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.1","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6bc2f7e254ccce09d6f5136e9cce63cd808c9853","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.1.tgz","fileCount":104,"integrity":"sha512-JCSqrGYyVVBNkudhvla7qc9m0/Mn1UMaMzIxH5kewEE1KWZcCkdXD5hDASN39pkn3mX1yyqveP8jiyIL9vVBLg==","signatures":[{"sig":"MEUCIQDMiJtOFIp8MECxrXPPpt1iVceJWAuP/0H1NBUU4qxy6QIgT0E6X5Tq9dB0VLErlMo4xNoqpSU4/qqDpQF1mLhb6ms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1369292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgQoRCRA9TVsSAnZWagAA6QUP/ie5LkckLGj/BXzcoAOY\nfSAThtD1VHRZc7/kQlmFtzEbmGRnU7v15E+OOicfK2XhiqPRzRgdYvnwQCUz\nQFTxRf4I3NiVSf6yX2f9Gn/KGcc0ZtcJRK+eY5Tgg+I8MzMl825VBfhpy3Z6\n1/L0U1qLeLsTDeTcIGRLRwYu671Ju3Z9KXiMl0pj7iJz9d7FQwjtwo/N+M0+\naTxr71TXFNja8dWIRinbKFNteSdcWRzkYds0dkKUOcQ4AN90wI721YVl4Qe3\nSsZR37Qasw3Cje3gDNrADXCiHM2vzaw2ssDPTKXykZvIIC/wjejk64Xh+4ew\njVuWKkR+Xnx84qW2qlAwLWDOC5S/x/qPgNdZsh0wkbAtoIFWVw1eM/Ho08vD\nsgir/2clnU6+NhxvZVezeV/Hk5nchhLGllKhPGJgT1+H300Y5WQQzPxnGccB\nZwF86OeFWkSre/qm80JIUSr8D/hPaRc1tDpjD+lSI8I/9SZEEIT9xll56WgG\nAdnl/nLdcH5rJjq7B6I+LnZ0Y/1P12L+bRO5IKwBWVv8K4/4y9EsDlkE1O3B\nrUqG8DF0AIvPlIc+3ZrFrb0uT1F3/X6dtA6z2F7PAWLAE7YeCfmPPOTFpIsO\nmy1HSdx0cjTcj2v/sBpZiU3Me1Fdi5cRQaLrvorapQJ+uVPA3nUfZlvFZmZ9\n4abW\r\n=twY8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"5497d2ea8d47c4573d245126e6f3f45bc176c12d","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":"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":{},"_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","@storybook/api":"5.2.1","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.1","@storybook/client-api":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"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.1_1568737808415_0.3643499152419911","host":"s3://npm-registry-packages"}},"5.3.0-alpha.1":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.1","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"10435888521652d9e1fc08fbd2d41a8eb75e039f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.1.tgz","fileCount":68,"integrity":"sha512-fWBYtMbFYnMOUeLAU5RImvTfWYKF9ss6rrtCNWpX5QJKK6vOn1IOircaO1LmG2FOnv+uH06lI9AQGdY6KvJmLw==","signatures":[{"sig":"MEQCIHlVRZk4HSs9gzH2+E7B6KKxUkZT6LWctMJ4lUOKou21AiASfKdrlfXZ0JyzvsxrlwLP/95AIlnVEb6V8ZCJc5q7Dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiZQ2CRA9TVsSAnZWagAApJwP/j79IN3LtxMV1KvTXK33\nXwMP7vHC3ECYvwzFrKwFl3cq+GoW4ZZ0jJzaMpIg4/bjzuj50gwUIzKSX4eO\nfClse+waO8aK8ZxO0GiDeGP+r08mMZm7pXwNxXytUYCiLx0RhArgWOzykaKX\njzZzKvJ0zzJQ+IsHwlDXpb8OHIJJreCnkpD/OsVI+MGokOAzVw5uxV1fOp0t\n8SYYSG/IyEXkcpiJpLTxC7krQ65dQooyDnic363FGzur3N8hqBBQNhQxWyL9\n1As54EyXizS13Qdu+p9RWmqPE46wPl4097tu194aktNlO4fj7gtHG3jwyysj\nd/5WN3/OuL8Bj8TOsnnKk8q5L/h5jXvCp3tT8lp74ri0NZZDyAknJ0aw2J8o\nSMzYitgFCaW0qqaZFR3tTLqu1eGZfvLyqCz0tjZb2C4hEqUlbfl78k2u0yeP\nu6kHM2xSOpb5PxeIG/IImTRnFwY0TwzOiIyikm4eZgLGSCcGgXfuWEoOzWhk\ntchX7VNoRSeX4iSzhfqX4Kr7Ap3AQ3Z47tnqTMZGdDInxQ+gCq5F0v9hfSRt\nvm2DdKalySdULxkZC5T/68vcHmmHM7TiOVnliIbN0Q/wBfAKaA1BH0V8IZVY\nPPLY/jYv5LfgqF+t6gqgLHxJLH8U0v9Ugx5SDBWHaBdPPx3MFVi8r9+t36Cf\n83u3\r\n=45t/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"13995be1573d43b98432b8f2a7f1c288dc574005","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":"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":{},"_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","@storybook/api":"5.3.0-alpha.1","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.1","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.1","@storybook/components":"5.3.0-alpha.1","@storybook/core-events":"5.3.0-alpha.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.1_1569297461696_0.7738710606229338","host":"s3://npm-registry-packages"}},"5.3.0-alpha.2":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.2","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"afc1deaf47d8dcbc0946ab04bcb1f7c2b3ef5104","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.2.tgz","fileCount":68,"integrity":"sha512-RkKaRZlkh2vsE4QwIaOFA+gUbaGLYCB8wm11n12BdLKlXxQqkzTbjPgFj0HP/52SKmbxpZA8tSI6CEHnnvVI8g==","signatures":[{"sig":"MEUCIQCzYNDQEbb4ma4VOt9xvl4AGsFlNyehi3yeCIKxWYsvfQIgMlP5W0Xyp3YfCAfw5hM+TK3/2EF5a/wsL7dLQoXGA1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdih5sCRA9TVsSAnZWagAAj/8P/RJpZC7+MYihjmtTu+Pf\ni0eEQdlN0mlCTcuQjGNKpSc+9k5FT1lvtnOdMdWWNTjJ63fVBHJF/IgeT9pt\n40Wr54Yl/idBynUKU8LeNcpeWqcpcJZskbrqRj08a7mW7xHb0RZhXB3/I1fc\njakcSyfEwT3WtlCmvk+X9FWHKcyEAi6FwRrYJXyR0ac1gIXks5g9WPu7QHXQ\ngrb5kHeMUqf+hUxJon2wpf+u4aSTYkIvbYj92ZXkDpziPJtp2NCQ6zCUzecX\nNADzh9/uC22DWKD/yr5Ax+uLPsqwfvGBsW7j9kXlbt9vFVTPMfzQGUlIIwmW\n67QujQ3V9fXBivZ757xKWmZ4WTSwnMHFsOMiVVLIHvNeomJMXDO70WsH50KX\nX0Cbe/OplDdG1Anwky4ZILiZLc7z95p0Tw/sC212ic9HCDqlN1lTtXbj3km1\ndUxI/y2cEmt7pbXatAYd+3tjixxRU0dd6xNpl2wifjZ9V7uCL1h/vS8Xj0Cq\nRprgMISesRY0dVWU6o3CThb5bjWewjmqF+Q9pSO+X5kojVkMgWeFu0j8HFto\nZrldiHfz12dvL0X9mkKEUNfxMx1jLHs020fgDWca7nX08WrhlSN8hsxyke+p\n71MVE+OVjRfph4f8BVvCHisjGhkx2FlzS5kAiG0VFISVE3wmfMyUtslDtJTW\nBLvN\r\n=Kh+p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"7b2a715e40e972b08705079106a097245b549043","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":"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":{},"_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","@storybook/api":"5.3.0-alpha.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.2","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.2","@storybook/components":"5.3.0-alpha.2","@storybook/core-events":"5.3.0-alpha.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.2_1569332844159_0.08735892940282808","host":"s3://npm-registry-packages"}},"5.3.0-alpha.3":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.3","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"128cd696c314858b2f37e6c11bbad66c9f2b1772","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.3.tgz","fileCount":68,"integrity":"sha512-FTnwSOg/sQUlgsxr+/2jQsXV9ermL2YXMzbpz4T551JAZRjbeF4AiwLLlIltm2g3MKnIKqwpOqyb2V0yJEOfYg==","signatures":[{"sig":"MEUCIGN+ureuvCRqOhNMs+ofnQrRZD0In0PU0kU7PuOWj62VAiEA41fKHJCh3bcFAtXrGOt3V4fUrFEvhErj5X284DowYfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdi7SHCRA9TVsSAnZWagAADNQP/31JrlcCbFRYqNlFswJR\n8UjuZv8ybcvV4YxifnVQCU+QjTN0w60yRKR2hTES/bjShsS1YXaEwiyljtfa\nsiOFmCUtspmBUf/SudbefqevJcoXbhAVxsiNbQxRH/ZcvjIGfTJKRiRJ4J4n\nMBFpUIZHlEFsv9hqKIWprDlDAJbSq0ByrhDaTIOzwPlaljpT0Dzgj7VxQA3d\nQWkcUe+gFSfYu0rZ/tpVUE1pxm+i4VqsM4hnSAHnrS9V7PAv3AUxPE9glvV6\nv5ObsZy1wSU4qsFXv2NDhV05oqgoZDnBZq0vkRfBfVg7D/BktB8fZ+W9M3Fn\nxHbSys568z3h4rLdZt4kF5bMZudKh8Xk+e8bgPnJtFFka2eslVfxg+ZNF7Gd\nvv+gh2IYAjtGMtenHUn3L+axJCtUpWYcY2jh+2LJI0F/mQuc2sFnGFAjryx/\nnkHP2XuPCeIhmGJyYjEAyfriwYKBQiLJ09TE7QNmid8UetliBQyCAOaJnrlN\nYmY+x0R2nQqNOY4Dsbv56ar7dvkm6IYetbwa8SlWQbFgzsSoxXxLFXgdHHoK\nKVFSGveleSxEKr4gH6iJy94wNslA2VW7Cjs2YV4vnv0DBXy3mO5kl2t7AWeA\nntaHP1RnYnqAt54HfBpqjbwPrucjS0LWt3swfJlD9CH4XvukXUwQAKqDEYGC\npmiH\r\n=W9Gl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"4f48bbbd543ea2d14f8c17cdfd38f1e27e019251","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v8.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_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","@storybook/api":"5.3.0-alpha.3","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.3","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.3","@storybook/components":"5.3.0-alpha.3","@storybook/core-events":"5.3.0-alpha.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.3_1569436807196_0.5817045950912019","host":"s3://npm-registry-packages"}},"5.3.0-alpha.4":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.4","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"716d27957d2f8b45aee465a4dc1515b9eeef5acd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.4.tgz","fileCount":68,"integrity":"sha512-zch8IFJhgDYyvXtjh8XvIygmxXws1Q8DW+/DD5l9QcBn4v6CUsybCoZvckJtJ7DiHTHW4dvWCe55v0fuGR3SYg==","signatures":[{"sig":"MEUCIQDRgeuXE74HvvGz0Q/uHVJPoED7J+YZCZNJELoEnFEs7QIgF+BnoELkItp0rVIt/Ms7+41s1kt6mXWMiJBWx1MNKKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjaigCRA9TVsSAnZWagAAnf0QAJwrZyUf30ysizgUNpdc\nIQ3/oVEPkgdE9sb7zoKi/9GwL+thFy4ftcwV8BI/VUPCjdqTzspxC5Zmc0qv\nBvooeqtAQ94YCcLsMyoyn3OfKYKzPR40AIXvC/JKHYOojJieUwLDtjw+nsXQ\nSZMlqLvvnJ3Mz+h3ppiyC7A3tTc9EHMezMNOut05TqlIZTGzmmPfsO5I+ZRf\nplQaeLeAUYXbLtgbua7mBfVCN0sYcSipGsfHLck7v77PYYlWPJGGiz8OIfAZ\nJrehSnqNVxeEeeS1h0yuSIj/F6EdjoPotAC+WClU/2vr2QuiG+jWKt53QazZ\nw8ZHxAz1u8nIiezvGSX85bHoSuQr3jBP5GqDu8ioNpZ5w2/VRlZ6P7GIgMfR\nvjrqEsEVydbbPMcYjVxN0CI4c+k/DHwpuy/sJS6eoHoR+/xz5ubynTR/CmXX\nMCZAwVPWFwysVShv0jnHvuvSh8p+gSQdkrZmqEFrgHvfj0E4hvHiBl/vKNGW\nvROpLpwl3aeDELeo6Tq3i7x6pKg8A0AtbBvt/HJk0FvRWR33sCB4Vpche7ii\nVm+JdGCvkTnS8Qd4YVyISeH1xiX/yY42NnLJj33U3irSc5Xj7lcHQ5GdWR96\nf2pqn3XKup84L3FxENkr9ESOc6SyWGf2t/BaL22z150zyHBSxDoUmVdg6r4Q\n+Ur7\r\n=AXNh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"af65bbe2249174a64a43952cf0104b7f9feea18e","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v8.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_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","@storybook/api":"5.3.0-alpha.4","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.4","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.4","@storybook/components":"5.3.0-alpha.4","@storybook/core-events":"5.3.0-alpha.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.4_1569564831977_0.31034901027536055","host":"s3://npm-registry-packages"}},"5.3.0-alpha.5":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.5","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9ac658004a21df13427607ebfaca08e7ef148ffd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.5.tgz","fileCount":68,"integrity":"sha512-EPG31grirvS2xmLQwX3W+jU0UGY9o8vhxWFWVqWzX1rCwBIFsiJ7xOtAplcK2o5Bhj3CT2LzgwvCoTNxtg+Tsg==","signatures":[{"sig":"MEUCIQD12kYdqbRNQLCDDel8kMjpd7hWLyF1FI2dnp/+X0C9hwIgVXsWq5z7gAJLvwn5VR13TstAD1gFovhWpcUmIoeMYdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjwOeCRA9TVsSAnZWagAADFkP+gO4FKSYhixcyCwnSyYk\nwqtIksPmotDtGsdWnENo6Uyj63KC4sI3Xc1xjQdi+uhrQIMW87ZGYqYmk4n6\n43u5OhAN/3+fU0X3gJADQvEFJhdtUePwzvqFsvPJhsTyjDW/rOrN6HugAsRo\nOfS2dMaPvwvCr4biusgjdsxe5LrGlwV/v9+0Dx98++1ifppCjnRnv8Xewk/e\nmDPC4TUWv89VaOxgTsCgDZSYZ6O8V98RLbdTZHZ2nSLY5J5lqgnYNG/CfPi7\njTS9ttqTJrFdt9qh7A8NTm9DXyi16TDv9AMn1Ji9UtopH3R3mzVljqpmm1gD\nd7c6PM2V26PVPjqQnFJXoCb9X28BCvtSs4E87DNW91KaQ2BdPMmoflJjxjaJ\n1nVBHTLznCjj6BB+Ec9YCCkFM96+FcwT9kdFXTG3OTRkKHCvaIN8j8qlBCnw\nvfR8in2AWif0LQCW/bamwoQqQNanEbtzYnO/J9uhpwBCcuds1ha1KHFKc51Q\n1BUoyYYDzJErNcLNkHIeP8JpvMKdb34vAXNJsxFrqTJ0fr6d+tlhBGYal2uj\nlk9ciYYrfY2nsymoSqqCum/DlWzRkqjVe2byv4MQAMD/wuUVEALvjVt5i4a5\nvtQRs3LPI5NdTqkLciAdFTOhhgSEByoOLaA3RNyWWWR2x10knEATEHZl2GjX\nLQk1\r\n=JhCu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"714f930342cb47a5449f0f6fa41af7c193c5739c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v8.16.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_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","@storybook/api":"5.3.0-alpha.5","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.5","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.5","@storybook/components":"5.3.0-alpha.5","@storybook/core-events":"5.3.0-alpha.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.5_1569653662245_0.9770860622007844","host":"s3://npm-registry-packages"}},"5.3.0-alpha.6":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.6","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"833d9f6b1e4eed6ebaffc8f62db2d083b9b87d5c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.6.tgz","fileCount":68,"integrity":"sha512-jeVYHEhP2u32Zq0qzlJ8JDrlBu+q+yIGoxkSdW4f8DObT9hucEZDWP+Itimo7lyuTs2LY55dOHSKQ3ZSNCbUWg==","signatures":[{"sig":"MEUCIDKmnv4w9j2vYKCEfVKRsqSvKmvH1d8Y9ArZQpSoNYhgAiEA9YtKCfsBEn495t0hhVplVCd9awCZ0fmOWPfM3awrB1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk8/eCRA9TVsSAnZWagAA9FoP/1rXmZRqUTHQdosywkf/\nT5CC0kYgtClE0c+TLz9OIj4q0Xo3nIaYUt0VzmGGj7hFtwU8Hq7eXRP8/q23\nz1KldzNW0G21JDSDaa6zGD0NtC+0Gr9ppdfTnX6tP+cImd+qnRyCleQ30u3W\nzUz7fln0EznAjHSbgttEnzWzRQauCiBi8xqXG9Y/9yqdevn29GwXpDD9t1h9\niJ8t9Qg5kmD1ayRdkmwRkVcuVe9w7SVqpSrEH/BSrodk7mKlEMAy/TU1CzyE\nhLJm3EUYGEFKkJx+R0E2IzBjDePUeT4+2Rb4+IVM00z/nxcu2MWNSebSfx2X\nnSKogiw/Vd3YnFdy+k5o3P3pt2DFrbtaNU+fOU400rE5IOb2ybz/uNzHQBv8\nZr6vl4YRKVeuUkehPGEXBsSQWpVeTV6dizTVLGS9ClPNOyLaNIYlmSfQe7xA\nTBDvH6aEzKKHlW54+F1IF9H7hCZterpSl5ECZLPLOB62oK8jwQxxS47oCQWt\n7nMQSRFsL6Ne483TluMRwJ03RuqbIryS/R41Y4pZPD5iL25fEkn7BbxwfYmf\nte4hxBA1S2pRLQMddbGb71VI4xPJCPzQId+lsaVTy07PsFAnQh/sdSwId0XI\nCF5N0sYAJU1xyJWkxi9KvkUv/uaWbEHukDgvUmB1vnT50+0tkTUIypC60yaL\nPRi+\r\n=JsP5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"ae53acf25e494f465611684e1ab07ef0f7a664fa","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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","@storybook/api":"5.3.0-alpha.6","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.6","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.6","@storybook/components":"5.3.0-alpha.6","@storybook/core-events":"5.3.0-alpha.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.6_1569968093557_0.9415685969387453","host":"s3://npm-registry-packages"}},"5.3.0-alpha.7":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.7","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6dbf047d025365eb90425e1ea4b9da7ab926fd6a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.7.tgz","fileCount":68,"integrity":"sha512-QdSTS0BlfWpfbri+Kt7fD/z14OilA9yyv9/OK1K3sG/wqs5vYhlQEZXVb60YK4ztcSUQZ5LzdckRMoBGClTjDw==","signatures":[{"sig":"MEYCIQD3XMXzO55MV1f7Cx40rVXvtnkMkVNd8ol1/+gfuVnc5wIhALDE0BA13S1ZI4ANot2tlV2UfduTgNDUa8d3MuY+cM/U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlZ3nCRA9TVsSAnZWagAAYZEP/iJuKBAb/VIehO+g8CyQ\nf381wLIRPScADBH3ecTDWemOmyvozYSMMkr61EYYfkn9zsBl1ozBgdNZMHKe\nzBTo50vajoc1INtG7o8cRgwyXfhZ35hyQd5j6rT+DidUCgZNnpmckQj5J/F+\nYdPm4HlKkHQMdtjzMT316Jj7eaeRlE8Znbl+GaZZePP9cnWv3TY7dZsDWYAb\n7tw0rZZ0mFt2AcYBtvzkHXNC+5wD7IuU/xhPpUEwOZfKT7S+yR2iOEkDqZRJ\nDs0repZyR/AL8OoTysK7yqPHIHWMneLzYyuoPcm9Oc9yWMfoFDTwYW3sOT7C\nc6Ft1nX2EQnT3ZuFD4F/55Hj7ZozMH4HWUdgfJXqlwDdmjyHNljzJpcq/1V9\nESj6jsrJdGWhf/Q7HueUDGVhejJTAlvzareDyqB9hSLK0uM8rffzlYeqdCLg\nlWEtJvkdyRFft9T8GjrKaBHZjAn9JnrE/30XCIyPmrw9rNJ2ZBvzIf3CHoXB\nNd1khiNS3OkyiEOeYF4vxvKVIcAIEYXcil59luV11/ue9LEZJAeCTdk7m3H/\nfkg6cl5XFRBOkKLRb2Wr3XqXxW5Gj2Bv2eASNgA4zjEV/MQY624KCqqA28Qv\ne86VYTIMz7yDKZpbLkgGMOnu72L9B4c/7U+7Rn9A8wowcy+kitXy0puH2w8w\nhh3f\r\n=TxGy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"43afd675b41b6541f6f780bd5eb19606f192be87","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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","@storybook/api":"5.3.0-alpha.7","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.7","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.7","@storybook/components":"5.3.0-alpha.7","@storybook/core-events":"5.3.0-alpha.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.7_1570086374465_0.41005652292130135","host":"s3://npm-registry-packages"}},"5.3.0-alpha.9":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.9","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3a40011cfd363eef8c3ae2b69b3baf3fbdd97d25","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.9.tgz","fileCount":68,"integrity":"sha512-A9ELcDwh0Rkyl+kYO0GJ8dypY2WDbEYJERnS/xGikfO4aFXZEtA0D4TB1kjrjh6WD1GqQU8TzW35SHyLsKjTaA==","signatures":[{"sig":"MEUCIG5lU0wIPbKAtxjBM++/yQcJN499/iwDcvQlV99RpZNXAiEApPwJRQJwPHNEIpMb5hjHponDVAHCzmr+r+VJB0JFbl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1286133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlvhXCRA9TVsSAnZWagAAjKEP/36hwu4BlrLkuuLDthgz\nCXjryiaq72EnM8b7qQ/POnHg6+AnOL6QxYdcGgfoHrMNiuuUAHIZZBiX1E6L\n9oWXgo/g86qHVgfAChqPeG79VD3gdNBvWNaatXXCHfyqkiuBPR3aMQ4kG/pa\nHq7sf99/dLvNKBDT52hfZ1Im22VQ8vbUCHwHXKsq0xKrGrzoJNXzkI8YIa+t\nYXlKB+OTEoll3ipwG2OWkkHS3qEk8amkx9V/5cOnNtFnuos9OJ9pjfOG2H0a\nRoVBMmx2XCmTkTBM2VYgAcJnYq7T+M9AZJ1Y+xsM7UdxS2+NKhYGG1QuqFo6\nw7r3R54lafi/yOspqtN1DEWgDiK4w3vDOfahkBX5jKZvQbGsWblqKJ8jCQEj\nq+uo7ZSdWqmoJQXuh1BA2YsZYcwVHJV/lqJFNSmnHkj6Ov28XIOSrKvWfOa/\ntDETHyMftqfGwFyqO5RkbTNACBpomYo+mjJJof23z8E5gqt8R9nYIKygvDjg\nLWssvhRgoBrJirT0qmF6yJvFCTc56+ECTrJJl6hYS7CH++ACZ2XkE+gs8z11\nkdIq0dZNAcLjBnbVSAtGU5lffJEtMtRrNx05YbjUqckAVt1BKLTT90JW2CxU\nw7BLyW3Lp7iS0BYZMkRT4Eye/+FR7xv5nQk7e4NJK39Vq/UbcW/8t9rb/vkE\ns5TP\r\n=l7tb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"fa363149e3d4e6abfa757cfad03f8fe0d408c4b7","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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.8","@storybook/api":"5.3.0-alpha.9","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.9","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.9","@storybook/components":"5.3.0-alpha.9","@storybook/core-events":"5.3.0-alpha.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.9_1570175062821_0.6913011122943242","host":"s3://npm-registry-packages"}},"5.3.0-alpha.10":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.10","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6902abed58152cba2883b363c909ada43ec87df9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.10.tgz","fileCount":68,"integrity":"sha512-NFbBCLyoheHFGiOObMYdnpVSJjAi7l8QoXB8JwtA5XPB3KTVoMylv4U4XGmGuw/gJjJSTPNK677fGoMRR7fj9g==","signatures":[{"sig":"MEUCIQCvF1rJ0l+HchVYt+Y5HEQSSILv7LvEn8+7JUF7e4PNYwIgeMOCNXeZDEGj9TduqtkN9rBB4YF9zMQOPLRAjw7Cp2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1286140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdl8j8CRA9TVsSAnZWagAAqgsP+waOVEOOiLv5xfR9hk/v\nBHwuv+QIIqRv4fN5hm+1Rn1eab0Q6S8F/WqVV3o3x6yCswGnEIbOJqK/LNfj\nWFSSoO11iV8FmEZ87UVjONS+GpQpjYY68Yt6rYEGoJv4eRfy5dCZFC6mJt3D\nv12EnU6H4/Miql5/BWY809LK1O98KbuXdNLeUyebMYUPukfawvvTesFhz2Ld\nkZtZJKLsGyPwWJ74akdGTen5dtoCDJloAr9P+LBxmT8aKFCEWmLp0qsfdd+0\nfL/LWVtMkwd3WR7sMOsgCMi0G5zmAheb0UCUsQQmhC+7UpW4Ph8bmCx6dPsb\nwlXNF/6mT5LC16h8Ko8T7w7khDA8xQ3t/p6kFAy2OmoJnApDnyNbewC/zlwR\nI7pZMR0jEp/kY5nVd013Ie1xgvH89iqUzZBgHtsW4KravPxHhG3f/J0KzrRw\nrva5Ap4BLE61s3zTFyNMocDkc/t6oZwvn43W2nLgth05RoMiZGSPdHXS+3fm\nBDofcnStTrlRDrjorL3xlcNM4S0O0tGL9qXkA08fOOuTtibpDhgsMjGiZ2yX\n9yPnUsBrJsV7r0+XMB4FYXds7qu8xPom3vdo2JA6YW3Vfjm4vim0ahrn/m2J\nmyEEvdYVco2YQtGU5S0yFgTqv/pR91tKYP6aNfBg48lNa7USgaWozsqyxEzd\n7eds\r\n=3xNQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"e478ebebfe2db30ed4014c91141cd43e405596c6","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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.8","@storybook/api":"5.3.0-alpha.10","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.10","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.10","@storybook/components":"5.3.0-alpha.10","@storybook/core-events":"5.3.0-alpha.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.10_1570228475814_0.4443258262465306","host":"s3://npm-registry-packages"}},"5.3.0-alpha.11":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.11","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"81acacddc813da59a1586110eab4ab7acda11196","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.11.tgz","fileCount":68,"integrity":"sha512-v0fqYK4vLJf86dqTePfrcuAtcU3RAYrXpD5ZZl9lc3j4u1VTH5YnPOza4dR3stZmFfkuWkcrFi2K+i+Uhp5XoA==","signatures":[{"sig":"MEQCIELuDmXziL7txJdMdFYjeyEDL0/x3HYTtudqE9EcV/g9AiBtaW4eSwNTVKeO5CC8AA17XNtX/j4v36NLJtSJ5r9wzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1286140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmUXeCRA9TVsSAnZWagAA4IAQAKShVhVuCR/crqWWzw52\n7yrFofzPDF1H762dZEagKODwBjtpVuj6QVNCaah/tr9u+oTPq2waDenTrmVi\n92/axPVIIeGD6So/ZUogfe9eXw+zOV0Hbk+fHXg2c4ely78RA8Zx9ldMQVBm\nnZtgB/mSs1ifKECEsfDqd2oxcRJTSWl1iYxIfmFeRKVcxF8lws5fY9NJFiYH\nrMYMR2evZT6jJKDdnLggjzJvBVfb2sRmaKseU6o54VzLp9/tl+StvFDzFbdk\n+NGHvLz+EnMVKQDaWhYgZprAzIwk0s644WbPa/fhVjcRcpktOnrTHqBJI6to\n4bCBl3at8wea8VJNgRI2oUPCZbZgP3lQp4U4n522KDIyKk2loX/XSHJx0J7n\nirE/Rm54m+2dPebuoLcpuaMbY5Oil9qySrc6YkEIhfqfQsCdPAblr5CbSzH9\nmL8qA2eFMFkGvze6s1cO9HDeIEUjEdgN3fiVWv6Ne8c6kFn5+3HsbIy7FYfN\npXAQzjBCLUxE1c4MMgL0E7m89Dn2g+VmZIvSyoPaL4GTpB/72o1NJXaa1hWg\nbkD+IFa7UtlVXP1IxQPrwsLY9l6FJMXxtL2Hz+gFLIqxvF02Ch/mqn4WNfRY\nL0P+5VFXV2kwjYvEQgWdSoydsL6lk0uQeXuXFqu9VNXP2nq8q6sQjmJzaNdw\nHfWv\r\n=ZoSB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"10d80f4c1f0ccd9486fd1daeaf8e365cb81fc919","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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.8","@storybook/api":"5.3.0-alpha.11","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.11","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.11","@storybook/components":"5.3.0-alpha.11","@storybook/core-events":"5.3.0-alpha.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.11_1570325981403_0.054706197424209346","host":"s3://npm-registry-packages"}},"5.2.2":{"name":"@storybook/addon-knobs","version":"5.2.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.2","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c9cf0a888d4f7791aa1d5e1754e09ebf495d61ff","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.2.tgz","fileCount":68,"integrity":"sha512-KnMJcOlEQgHm/+8awGliplfL+c/EyDz2K2Mgn2BqtIDRe4M+dkSk+E+NaXQMOC+1Z0RZJjisGVz8HICjO1ZvwQ==","signatures":[{"sig":"MEUCIQDrRnDtE9k7DfeIswrmxhoUfzvyICIqN3ghXVBobHeNRAIgMHzBidHPzACWt5MNBUPs7idzj71okXf4Oc97JCVWkRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmw7HCRA9TVsSAnZWagAAWZsP/Rsoa2EhYzk6kaT7gbe0\nMFK6oWKIqBXO5e5uAOEPX1p9BFZCnNhHgS5TRlb4aXEGc5SwaNHpz3ybTagI\nGixDmXWAD+DP6WS8wa2C+GOZMRgD1Aj965/aT6em3y0S4jhUpnOnGY4AeVrl\ng/JwffOHX0E09IAsa/FXYU+R1SNdHp1v78tkvDOCf5Spcg3j+NYvxVmrmqoB\n8Mh1z5q2hlc2GFW1YLnYuN8Nzqeaj4laTM7A5zsHdTTftCi/TQTqpMj4iFVR\n6uwrOVMGvK2nZDOHUDcNFVnKZO3gzh1ZRVLAblq/6qtxJJ1GqvRDnxxIGmpO\niKWXCcPFNMkuQ81oLXIHuL6KJWSzEPQcCuKwzOaT9pb9uGVx367wvIox6prq\nPFiSVGZjAJX+5ZvYAMdnJtoDH0FhKDMvbmVVHgm+/bnCic1HWwNafDwU0ROi\n9GxaX8U87F6bVbBAXeuq1k8PuyKDv27KMC/k55dulIQZC8VwHYktJ+P07M61\nNpByYBd4CBtxkKSoo3sbxEKpOYbeThK0EV0pB7zoEQc82+4KHBF6c+x4xQZQ\nM8F8qKnaWzbfug1f2y92BW8a5PlGZTOLfVTY6S5QwK7hK80oNWLn4BN6qnDX\njTrvB0GaYqECg0JcqCVA4kXJt7ewPNggLYCN7nohAw5YS/ikzyNeRCK9B/7m\nlt8i\r\n=Yu37\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"fc0e18c5bddc69493f9a912e46d5558d4bc215e9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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","@storybook/api":"5.2.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.2","@types/react-color":"^3.0.1","@storybook/client-api":"5.2.2","@storybook/components":"5.2.2","@storybook/core-events":"5.2.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.2_1570442950519_0.437042755763676","host":"s3://npm-registry-packages"}},"5.2.3":{"name":"@storybook/addon-knobs","version":"5.2.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.3","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"72f40f1549a404a092e06bf1bf11747e6da8af90","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.3.tgz","fileCount":68,"integrity":"sha512-dOFvN3M7rNAHAnlYmOHr2fHKwgAgR5JjCrlMrOxtRG4Qnz7Zprha6T2o9TIVjlAggTM1MpMcFe7db9/OCnbIwg==","signatures":[{"sig":"MEQCIHlXoIa2zc0dOoerjCEmIOdHq1EmEul2/uzO2gODNqMsAiBRuQ2bFqcWU9aP8sQo1ScMXQc4d18tnsyufo02qIScbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmx01CRA9TVsSAnZWagAA/9EQAJJ41AOI39GleGZ+0v+j\nzzffU2IskZ42kekHSGpBSf4XUyxxJxrrJpBsJmD7WHjSKGATuBZlKlNpEcjj\nblQni0NYQUZTt2pxYosZ2u/1vRJ0hsLPTv4l6GOy86ZJiD16VUQlOgssmDmI\nKGYm4j9XvFwwjCMddFFOZSDbCAcv351a+ksDaFoDuOZTVXEA+CTheRblHogs\nnSZOQrCiHhIlXYL5rwuH58yKD6cj5iCilkB9MN2H2RXtu77nPliiGB3CozYj\n8ri6w7+617/y8ZjPTVjiaonH5KDA1jHEp6W5S/Jkr6RKTPpl96/TqLhhg+83\nMzYR1ZGz3Jc7izIzg39WB7X+aiuy+2Ow/lJwYo6MWySqw4Rpk4EcWKQGbNV6\nmH53zDHTAXuc2FB4pD5jDZGWe8GIa+NPwB8EV0wm67psKzRJaqNavNAQOcuu\n/O9gNp9GfDm/S5dLGwOQ4JRaDUi0xHleYBOIIPMWklX8dvCd0zd56/Lry17q\nRtMUcNUG3k6aAgWJ8ki4R1nDlXHvxCj1wL71eWye3o0iPf6APXcnvrX7rpTi\nMbhEXcgS2Hyb2SDV1fQvKGiWTSWd9v2JqvdSVqdkoFIOYDXrZzZy+nXb28Gy\nH+oxDKyzLG7la30orCsxfQncifprV/5fwSRM7dRhhhDdePDJwcjXJVxrslEN\nxDqv\r\n=Ngx0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"836003649c127a04abe4e0227e774371dc5f87df","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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","@storybook/api":"5.2.3","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.3","@types/react-color":"^3.0.1","@storybook/client-api":"5.2.3","@storybook/components":"5.2.3","@storybook/core-events":"5.2.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.3_1570446644370_0.9520950214685222","host":"s3://npm-registry-packages"}},"5.3.0-alpha.12":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.12","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"7adffc6b28198f69dd90f294b6f5a73ffc10977c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.12.tgz","fileCount":68,"integrity":"sha512-EPPOhqujfUtthtjcMUfBJUbftHr/SEmdiIPCNgT81MdrwNZSAfS2bf88Gkn63Z2uauNLAREmjcl9IbQqKs6LtA==","signatures":[{"sig":"MEUCIGQaX3gisfwWRbjmw3kJ+Erhw4o8q7FDeCtRjYqqCuOOAiEAiACjGVFinbDbb//wJTK3w1UW2LyeJ7LlonDR3nnxJW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1286140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdm08NCRA9TVsSAnZWagAAH3IP/A7lBnq6UNpH1AvDK15o\nRY0M2+/OSjnG2SFFUNtsvmj08gTg0fgbJrTPi44KoIuU58sgPRh2/p1UA/Cf\naeKfk8KWHhCflM8wTjK/Cnt8TNh9TS5F4r8aYuZpsaeCw3eALL7RNUszDDlM\noL4MLEhkn/DTpuYiCC86icJkBa/QATtBB4h6/4QjKvdqQ7EICclJ5j/e+FhP\ns7mGIeurTIl5whDkxGG9UnrFha0XEkvvu7xywfgOYEr6anUdnCO46s2nSVqB\nwxPwL8uLEYB5T4QnN6/Mzzk+cICr+0rSbcmkXnZg9p13URJIsT1QWPdQYKpn\nSxjQqkukI/y4f+cS6kZYIjJX4NRK92EZamDTTJmhkWwF+PlOGYr99Fjh+EqD\nW6fnHPJFRRbEdkzL8q4TCgPBU1qameTSvtcbKz0B/idT2QHQmmgYkS27cc9M\nqw199ptercsW4jegtnFKczM6VGabHF5ztuEGilBq/CQapZMd4gTu38CBpNEl\nld2X+pZMOGpCJOjy/y+dmOAl3xKIABVRpq6Lpsgx45CliAa4jXI3s0saH43Y\nIkTqjNF6mtKbG/C/j9ZuI57x9miWa5KozTRx9uYt1BE2/572ynZfHuwLweTS\nfS54aNqtZRI1QY6xFF7Sb7GGS7iMjtXyyfdQ+ofbSLk7iTIbIu/Ldg0wo028\nJBIM\r\n=VRK4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"2e87890083774ae5a58343a263d248b019d7161b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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.8","@storybook/api":"5.3.0-alpha.12","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.12","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.12","@storybook/components":"5.3.0-alpha.12","@storybook/core-events":"5.3.0-alpha.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.12_1570459404886_0.6803534377101554","host":"s3://npm-registry-packages"}},"5.3.0-alpha.13":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.13","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"cf49ab5207443855cb3143e32683b818870c4c57","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.13.tgz","fileCount":68,"integrity":"sha512-4IkQVtTpTGZPJA7sk7kA617RPhGs5sxQKGTVUEJ/KjN7Peh3+eAlci16+wpLl6PGSwoI/ZxWnQEI1+Xs+fs/oQ==","signatures":[{"sig":"MEUCIQCnl6JCCuPZo5hmwfkaOLHvzXDbDxoaGinFIPgZHtL0lAIgJwGBW2oukcmDAUV9XZ7YdptRaOzowZgXUmynaqQwCMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1286140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdm+jRCRA9TVsSAnZWagAA2VIP/2LkO2eamqaBGWomTZLF\n3hoVczTlj/REASmPbzYp2grIzcP7qPdJkV9w7Ti0PG4/P3uKEo4kfAKd1mUA\nZndea12HOIYVIN0Ez1Plgtg+DmyNYW4kIRTGraDtcchC1cx2bbrfwJ4VPX4P\nimcFGeAfqVW+AnKh6wBkBCikAWad/nmwQaj9UdEYWC4dJNesMZQYu775h2vj\n/6cD8DeUHsAQ9opauZrIKV5yo0IixIHLMzwz8VyUzVPjarc9uLfN8palBvG6\nTp3KaRqanzBtbAY4R4mWFRcE5dujimEd+GedhRQ7GzHR0g7SfDvjB8UE3KN2\nWSg8F3w+UsqKMyEKLimARbvnZPFbqmbLU+YVGFJLh0m4GpHrtF+ZmfVA2cBi\nC+aZ/iK2y7h3vMiAEM9z591oEswyN1ON3ryBx5/fv5woRE0Ylw5TMVJqr5t4\ng6M7rR3slau7SeolkcaEwQvZTbiby2m9wEE84WKE7LGpbd/F2nQh3YdhWp+z\ne3dAcjqMRgfeJvQ2v0NjvLCBC3KHgi0qJ63yrh+sqFAe3NngwsnKqEMYxClK\n4E2zHoeWadz1O7ygrB3qzK6omusZhp6DSRSUNt3uGiF7Ih95lZ0bHYRtIUK1\nKY1yZCvTorN5fAsbYfvRyMeS9t1FBT3XEAaBszhvf+Fh6rTr+kvtLc7+Eb9x\neOiF\r\n=iDrd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"c9d58fae8155fbac9552f3c6bee2347f0d1244f6","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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.8","@storybook/api":"5.3.0-alpha.13","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.13","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.13","@storybook/components":"5.3.0-alpha.13","@storybook/core-events":"5.3.0-alpha.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.13_1570498769107_0.31428897854255355","host":"s3://npm-registry-packages"}},"5.3.0-alpha.15":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.15","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"530b1929e0db0b97d050f894c38882e35031df53","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.15.tgz","fileCount":68,"integrity":"sha512-gVLtRVw7aHj0AuVFFkrh0eEH/UyQTBM1Z2OA+CkOWCIr63/TwkXr7P7CI7qYGyRn2upPuy15DfkQe+eJSjhNyw==","signatures":[{"sig":"MEYCIQCUdHlBquspF0SQFtTSNWGEDExS7+1DBI4ORJHv/EjunQIhAJuQm5whmEMW65ahXP02I5Mu366avCl555sAwxNajIkw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1286140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnGGMCRA9TVsSAnZWagAAsygP/0xPpfE469goQP9dtc9O\njuHR4WanXJ+QIORTTtIYbn+PQ31UC8TbwTYXoTwLC/Wyx2n3o1NXlre2HTtE\nvus8Oaq4dWXGHMGSc3+lY+PhXVWrI1E/PiD9I1p/9h6+0zKlMmgMabuKwfsM\nzb5qNWLWGr/yXW5Seybh0Ror0AFKh2SWR09CHq6Me43Di1v7J2cDz3s8ezMv\nrgx5MBc1eVpcnVzV7Vnt1BDenDwlQTWOFrXBjnBiDkEEYtDKUZhVIUCGsDqe\nmlHmzEujrnQBiQTfmqwMhSj253KogQi+8S62aYKcwJmYfwJR6zgMdT1ltI2m\npuKHJHNo8rxzftKz4G04TnlMOxpOEOTA6IVVQD0ztTUF8Mxvct44Ld/LG0Nj\nCC8yu04VPRcF5Cp5Z86hIxoZt3JHMgRWfpm/zTfnYeqCRtA+Qxui+4dJLGWk\nguxtHj91sNRyRMkxyvIDnoaDdlpoc/Cusz36ArB9uKxsKpH6IXVg4tMu/Dmv\nIyxLqipB+bEbJ6fYZQVAN843M+OUkxp8LxbssurbCkR7Q+3ednbGjHL6kZOX\nO7i1neyeCe/JSKGBi+ul2FgzPmYaTK2/HBMBW3aUt7ZDO/e7KCNxXWp62E57\nKDafTQokBGks+RE0sH7eI+qeQUYv0ZEI6+UsoHaEEfPlE/zus4SSl6lRg2Qq\nlfQC\r\n=AwM+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"4bd4888de89c3439b9bc2a39e725884ca25dfe4a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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.8","@storybook/api":"5.3.0-alpha.15","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.15","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.15","@storybook/components":"5.3.0-alpha.15","@storybook/core-events":"5.3.0-alpha.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.15_1570529676016_0.027015678007631383","host":"s3://npm-registry-packages"}},"5.3.0-alpha.17":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.17","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"7ad3d7c54aef3e83bbcdbd135f23937919eb7525","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.17.tgz","fileCount":68,"integrity":"sha512-lTFrfXUp44mCpiXGGvodTeXSQuRTvnhwVA+B/Xx56UM6fBM2GE0z2dfxWR2Xc6poQJ972F92kTf1/kQrSpLQRw==","signatures":[{"sig":"MEUCIGiksKs/lqldkKi+1t2/wPwX9ZZpuPt0gFKgn2Kz8Y0CAiEAxZCelrAt9kXtWhfRTDGTqhjWVeujp/UCtF72ojY2hCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1286032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnrjWCRA9TVsSAnZWagAAuHkP+QA/ZAAkrTwLVTa2x8FJ\nWEW4icfJo+C76huFI4Ca+NN/5Lc2gfJCYy8LL9cMwMCNyS0sou8ZLIBOLM4I\nKYCr+/vX6LWl2yeFScwNAHD076jSIa/tzJlRix7myhbtMQu75+I/RTzU0A8G\n8u1OKAzU1Zvu1ZA1yjfJ9mpUYWxM9RYKSKbgjFaDbm/hB1KdEjd42vfKJS5Z\nV/n+iitsg9kuY9xWQvNgO+YimibP3CUHkYo9c9ykjheJfpOzjfuAs/QLc4Uo\nEbhl4yS33PZok+OBk4Suql+9gvMcQdqhBV82gtuXlzhZO1H/zisV7XsuLuom\nKP493ud4jrchSNpp07Ho7pqgyQoIjMHvbxCSGeMoJOvpNc2HSgS7IEOekMP7\nFejEU9a3TJUiZSs0cNRlCERTe0gl7mWtPizHBitX90Ypv+1ioMrZgJTY8og+\nQlaXHex0/EqjvN5i5ARgbc3wJ7HqpG7uovnrdWM4WrG7MQUiY5GS4Fsnr01f\noPBT2+mPqhFzFIXmvW5TVMnCWmszUcOSWfQTqv08fP1gNuuPce62yMcbSVXI\nYmIexhFBaK8CssvySsUlbrFhcwiqJmAbdrfo4iAihNySENe2Qn++JZ5jUqdE\nGsbfIjUV5D2TQHp2RNlaNBjxVjR2GhGyz4gs7QVgCuVKkgStRPWMlaZFtoCn\nQ4CX\r\n=9uUm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"e1150b9396395c7afac0185785ffebb97441bcfd","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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.8","@storybook/api":"5.3.0-alpha.17","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.17","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.17","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.17","@storybook/components":"5.3.0-alpha.17","@storybook/core-events":"5.3.0-alpha.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.17_1570683094011_0.6837966164432101","host":"s3://npm-registry-packages"}},"5.3.0-alpha.18":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.18","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"59466595fafcad603609caedb3a5ef5fad467fd6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.18.tgz","fileCount":68,"integrity":"sha512-ENGgQyuuLv/40Uo6LhPO+NOsK3YBx+o/gMGMHv+KpxbIuT3aU2B03tG0Ja2k9vRwa5O1+iMrbtcAez3iPRB8dQ==","signatures":[{"sig":"MEUCIBcKynVWgJd9mOybdSnH8F6YuoDVQtQqtoszH3/D8jQTAiEAnM7PG1+6cA69b3/CS+JXORhrBhK31nG4rb2y6JChCcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1286032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpCntCRA9TVsSAnZWagAAOlMP/1ETD0MRjKsHwIc1KDwh\nSzmgHeT9L+5Yi/uXVXC3yr2BYxgJDgc5HKajrSJz6L5zoOzIV9VZRTFswhO8\nsnLr7oerzkX0uGYxdS+LWbQKXG27HorFOpY6U/EPQ/ZUu2IOsVBbwvLSf/6A\ng6bJW6khmMrrJ9zE5Snn/+sSZfMDT8F/UUl1R087wXOGjqPu6r0/VcXhWc3u\noMBhmnk+KQUtN9wOfonHADVQ1cMgoyHKHe8TUkplMF8x/W5/hbsb48ZVoWLR\noQjt7rYdQMvtl7XCBffRYSe5gEChdAacnB9bS2ah4rJ0Om0UT5t6gXS0eahK\n74mxdXEsuseDP3TQqiWWdjWB9bDQbQ194Dehr9RTGe47MPMYNM98yR/Iyxpt\n+BnuJMcFIU782l12P20IQy0noZD9YVE4SGkzU5yi8huEydKLy+HL9NGYLEz9\nSmLD/8DrZib6mACVpTbVx10JLXF0LN548U/3Bh7GjIoprXIFpf/2TTx1pmlf\nv40nL57wweDallreeXDMTWKdzA50iKtqx2LNK5TtliCqrwbHr9u6DVXaFJWD\nS52iBXoGF76d9TIF+kep4lBGePtQG8vPiVoeyQA8p9OSdPz4kXry2bSBQV0+\nm1E4yxLDRQYrBd2plTpIqxvX7wE45JnakBZHJop2hIj0F20lMs8JFmGvbnxV\n6fCg\r\n=1E/w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"1a951739bc2b2d85f56fd49381174a4924b0aa5c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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.8","@storybook/api":"5.3.0-alpha.18","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.18","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.18","@storybook/components":"5.3.0-alpha.18","@storybook/core-events":"5.3.0-alpha.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.18_1571039724691_0.01822543093951645","host":"s3://npm-registry-packages"}},"5.2.4":{"name":"@storybook/addon-knobs","version":"5.2.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.4","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f5db98235bc2870361dd3c224f8c10f901592c43","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.4.tgz","fileCount":68,"integrity":"sha512-VYxbDARJs5RwTEOlcfa98tkDXLcRocB7QXLqt8wwCdXPIqkuoVeQLROXGYJm2NzSn49RyHPKUuVWnRhy34qBbQ==","signatures":[{"sig":"MEUCIQDsz5Wr3Y7xXsbmRXPjXW1SlcRqC7i4AZPt8sRgycUoywIgIb2Xf8VQL0wIq5uHlboMOA0GBA+QH38iJ+N4Z2ulO6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpEN/CRA9TVsSAnZWagAALiUQAJ31cCLSkdn3NQ4CHtXf\nXliSnWNdVkrRFNbxQ/pnnLBUqTHKf12iH6cxRmitHN+ZudFaVxMqVD2Z3ub0\naUf4OAz6FwaFf662mNX00mSWaWopuswMZCPVTnB8ahSwbrd3oJ6df8zlB9pj\nITlADq59m6de1WQmGLZeaenKakfrL+9SpkSkuHotPkQneYAdjANE3QAiABfG\nG6Jax8xXpVXLDrVAKW3UiF7yrcMRdGvARQhqeQNax7y7CbJByVscWaTxP/hr\nDtFQNKLkYsCXeqsaGOSpJ1e1+J8p7Tir79SRSetMnBdY33Q9fwSbRdPlXRZ7\nYwAlrd+LxqqFgJkk8NSd+LS4UXBOd5Ko57FsijHPwKjcWs3v16eyLkEGtvSR\nfT1Iom26zyB3Yj9MsnjVFNoS2PEA5EPL3kfzvyWIICgHPm6DV4UZAumtFueR\nljykjTFqhF4B1wurNAj4JU0YYlsreCa6rz9xyej16IwT/N5RdDwnW8hJgPUh\nEDiuBogd1z4UsQ9l/a6ryoYevjQ1iwPoUwuA7DUMFK7OUEebl+Qvq4I3fvGq\nOWEtlDv6LucGaYhSZi4nUqpC1NLZojQQG39bMWqYGs//j0t2EeFyL5QM6bwx\nus2SKR+LQeXQWPeIGm2nb24rjqf+ADr1ieo+B0MRQDdpiJmT++uXcMUxk+x5\n/cW9\r\n=y6Ho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"847110e3bbe21892c7d27d01f5d4d2f386e03e21","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","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","@storybook/api":"5.2.4","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.4","@types/react-color":"^3.0.1","@storybook/client-api":"5.2.4","@storybook/components":"5.2.4","@storybook/core-events":"5.2.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.4_1571046270620_0.3258088017802483","host":"s3://npm-registry-packages"}},"5.3.0-alpha.19":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.19","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d3e3698be29040cd594018101c9f3bc9a982130f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.19.tgz","fileCount":68,"integrity":"sha512-YyrsrckxSqck0ZIoz4ha8cHjaCU7tEdzTKv29N3dOof8vUtw7bEr/4Haf+CVJ+hBuJEqPN6kVj7riNY38brheQ==","signatures":[{"sig":"MEYCIQDPxS/7lq74RPvukIYvTnYzjChtFziZ8eNf33Ksdbb0BwIhAO5IGy4Aq9ufrTYil/d2UMf6rENXUjaAp1BnCcfJov+3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1286032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpLPYCRA9TVsSAnZWagAA2ngP/iRHI0L3lW4yecrTKep6\nmrXIKq0PEdLn65+NHhYpH3v65URnfA7gVyGHQDshP/2ovmUy/fBOYY3vMxLJ\ngNPkssVH9xAQUUYxWKwV4sVUCc7tOJ5ba5PPaUYRCZCY12ZaSY00PpcpQs13\nq6lxb64kgk7dZc5Y+lOEZZRUMLmyHw8qOX8gOmkhkTrovgRuM8aZMZqkZehR\nt/w48UAxsuAHYhxYg5LMAkO1etpUnKXVuynaXxSoNgAFc30dgWwDlJ+htP/j\nEa78XbR7OBENuS0TyCgvzYuQtoSSHa+knBy2/xNmt9F6exakiYxPM2isqe7K\nXC6xPTa8vtK1jKmx1r8LPRYkjIUMJJYATzsm4Nft99uko24G9BSAIOaKHRbD\nGzi0ixHH6SxRtM2nW2u43EDvAapyLlyLwuJ3AR9fTFMlniyTj6d6r47TfXF2\njLXdkm8z6Ad7sCYxEKRkXMf2orl4jUS3QXsH+wfLdB3WMS1g6SABifhoIVUz\nJIcWXvL64MRgsTtSpwQuRH005SPQREmcPVyvlp+PUS2JLNfGU0YvS5qmQ2yb\nmkjVA4s0HAX2LtKc0eHpgiwpX/prNS9f7ny3/uA9a09IyZuz7eGRVD0iHrkM\nWL4yw5XGJ9KCB3ry4vRA6xVgwagLi/Nz6p1hRdOGNtxnP65kivKi1ggRv/yf\nsf6F\r\n=CDWy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"396d3ffaadca027e89673962e05053289ad4a8b8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.19","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.19","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.19","@storybook/components":"5.3.0-alpha.19","@storybook/core-events":"5.3.0-alpha.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.19_1571075031574_0.4812606576285783","host":"s3://npm-registry-packages"}},"5.3.0-alpha.20":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.20","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b18af1c2f82b5b17a4cdb4dadb5cc953f76520a0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.20.tgz","fileCount":68,"integrity":"sha512-e1lN0kLMzdxG2vI6nAnRhRF0y3Nv9rkVjYk5qTo4fzB2JbQS2wy1LE2998JiifX7m1DJLlAkVrWgmOQX5zmQVw==","signatures":[{"sig":"MEYCIQCGQqfVVSjoRh/xSjtHdnIEpIlrC05G0aAtcYmlZTUIIQIhAPhClKDdyJshoNaPlJo1mvuVR0Y4/e6NAmmID4bAx6gH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1287263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpaTECRA9TVsSAnZWagAAAkUP/2342t4anVXjCTVXgvK5\nQdbThS2coJp1y3a9BwMtBN7HI+u3xUOIb2HylSz0KDl9YTTdGR2lNPlpZztD\n/F6aMXfqW7GeRWFpXuvOLIlr7AguVRRtitT+lS7xAPmq1vi3VBtdLCWFozI/\ndsklbLCSXYIi185/EzyxlokGTIvix8zYSrP9rRTDnmyFBB0BhXN+QWX+PaAx\nJMWFj+V0tcZunP5miEStNvQio/1+c++ytOAs6sjM+sY4DV/PK3Y7ZcuiEosT\n5ApOWpieFM1P/M//DwTDt0/7+omlzwYqHYVOaWZ3yhbEPTZ/CakIfdVt/SQl\nVzuBDcmwBGDsQOOR5DgA7Oni+r12mQO4xRAm+QR1lcFF/gJ+B81+y6zKcjAr\nElO9a/2wSY5QMzOOBNZ+zNaiyz4aOa0A2ZsekNuEOkm7yJ46X3cqQHfSPTPD\nRJ0oBT+lhmRnZYABHYJ6V12kytu/1eQMMXeTX1QS/emDPskzMYf/mPAvNA4u\nsIv1wKtjH1AHprRuc9msOnCJCBED+kj2b5E+ysGpIKZyd1UcluOmwiAIGgYG\nMYPdJCTpXhwgeJVtLCPVeip2yWm1V8QYlPRBXp1g3uErO9SQhG7EuvdSDQka\niRlymWnEZ0xnIOs/szFe3YFgpcsIdvFX9guqLr4zMsZKfCWZW2nks+uiuSb8\n1Bhi\r\n=m1NT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"d340b29949a59ba4952ca20dbd2635fef6b31aee","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.20","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.20","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.20","@storybook/components":"5.3.0-alpha.20","@storybook/core-events":"5.3.0-alpha.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.20_1571136708181_0.7068641619710434","host":"s3://npm-registry-packages"}},"5.3.0-alpha.21":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.21","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"5b49117bfcbbcb7bd17a330102138734b44cc066","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.21.tgz","fileCount":68,"integrity":"sha512-6yO/pnGKHzMyFi/jYEoQdDOZcQdNkcR824kZh1lPDg8XBAfJuEVA0cIO9OSKHP0XbNKaYqHOuHiBHl7xOC6WJg==","signatures":[{"sig":"MEUCIQD9sCnhxXSyYur+qtxKJoUsmWaU50EZ0Lkl3pXhd9ctuAIgYmplnpzavxxWazOpL73PfUczvco8+2EVkVc+z3zsNj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1287263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqIHJCRA9TVsSAnZWagAA7NwQAI9cjszT2EXnlGwQ4/7K\n25ULWN78g84MNLai1evM1oplpzNz85o+hUGvOGMYhlz9rJ1ahLGKhO4K2cZA\nLdQkqSm+MiL57x06wgwlmdZxgGlmbBu2MIM62PvqaYzC+72xfTAl8Wc39+rS\nEp3ZLVx7WnJ5y6kwPzpd64RJDCKXMCBJrZNsSUVf/sy34G5rAQ6Dai/rr0eq\n0tc6lfIOCvxAoO29vhb+V3rVXpdVQKUgAGnskiYSltqZCRkNMP0wIgXFXXly\nwxYf/ud7o4EHGjc+dZUL0yKSstH3oWfh/S34muHFC13vdd1JPPuUBgFzUCgR\n21OG1NqWlPwEhtMc9fVbKWVHLUr1xomL8mo2lx23z26gWDXAoQys2FO6MuUm\nEN94VXeK83PheeEkPD1lww/Sev9x9Bkfj+0WJfk9FyeZMYKt/fZ6gTKLVvu5\nNiMgXx8ZbtaW8bvP2aerBmiP6psHULaBe/zVXdar+BU3YN4AmHUfPhQ2uQ8K\nvgQlsj9CncmgJTmTouEfNgA+G+SQQjFH7ujAWv9Cq1/YT+f5Yqaj6c5pTPy1\n/SihBGQ3wckIMgLg8DMbbgsvOqVvcFsO7gbrmVOTzr0SgOnFanaR4dMxTumm\n3kyKdSmas3X+N5URYcLPRxesxAXTTm9XEWcnSmkjOaEUdOlVTKKW7r/Unmps\nDQv6\r\n=px+B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"91fee993fdd694582e98b14035af282245f06a42","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.21","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.21","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.21","@storybook/components":"5.3.0-alpha.21","@storybook/core-events":"5.3.0-alpha.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.21_1571324360995_0.9799475230991492","host":"s3://npm-registry-packages"}},"5.3.0-alpha.22":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.22","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"75978a0108ef933f87008c833dd8488d11766573","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.22.tgz","fileCount":68,"integrity":"sha512-JLnQUff3r48w0fBzsOeM8HBvu4jZtpEz7h+gLOmdo8CDafbsKSntOQZDbAAyhtr1A7Jan0j+A8y6WWavP8C/Lg==","signatures":[{"sig":"MEQCIHHef5FrtJQFSyGM1xp4vz2MNsl230UmSgDm3oOLvoSTAiA/66aiwyqXOAgEUaQ45rDsZ1Uxa2Ho9SB6WvrVzetkNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1287263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqKvgCRA9TVsSAnZWagAAaE0P/2eX7oAgWTUNnKHXhFVT\nUBlDXrHxVqM7oB0HJTTVHQkGTRTAGphdHyZolaVmHWvVjmdiVzftswzplq8T\nUP+xl7LeKHJ2xVlOzT0qywk+3UuPMuLyZ1jf6fTotZyLK9LsNUSPSdhmDQwq\nkZvkQUofGMvJjsbW5i6eg/zN6vHnC7aER1TSwWZr/SAI5wS28zR9sBb+GtiQ\nEfWv5rh9hdU3yJhSzcZCzwAhtIoQ7yJrq+xliwYo7U/TXsZ+Tlf+uaGmmBwm\nDForGek/w0+KeGT9UQkeIJnU3bHMZ+wzk/Mo3I9BCVdK3XzuvFd2gjvOJA8Z\nUyvE0L5vmSL9TFJghSkugTdb+wOUUF3ogVbXyqIQEcV7NuIg5OEkycaHd61q\nHlyTUL+zS/CwDaBAqkc0+gD2IQWfL65n59Wa7deS478Z71PqixsqCjdP52Y6\nUja7ElLW2bpKFpJDzW6yMim1MBHu8Bu2P+VDve0Psc1McrQhoRZnlkYjGp/g\nIkUOYYvwdAL8oFjQuTpDcXP1wf1U2qRnFQXb0sLnJcH5HgaeVBai3EPwC3KM\nfcfwyg9uimeZyJ4m3vGyCKmvhG33fvU7Kv78g3ynUWbetYppKsHKfc4RVi0v\nkKlipmLIaDntZZlAZKXHhlj9vW6+TTbngV7D7ngoxvwzaj+TX8CKSjgIDLsp\neZ2d\r\n=eqWO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"83468795dc2538213a7151dab970aa0d781fd7fc","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.22","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.22","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.22","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.22","@storybook/components":"5.3.0-alpha.22","@storybook/core-events":"5.3.0-alpha.22","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.22_1571335136178_0.5766028016657254","host":"s3://npm-registry-packages"}},"5.3.0-alpha.23":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.23","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.23","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"36b57ed7c93089d7bb32d60155cc8e5a13a6b3a4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.23.tgz","fileCount":68,"integrity":"sha512-wkD7orSwUpC4LW3/+QnX7/yANh2OSVfITBKrqRGdFkM+UfM8VdgIWItbS8hR1bP8g8jVMUYY3LsA7wMoppvgJA==","signatures":[{"sig":"MEUCIQDnFQxhFCjiUQlx8RuTfWdRfgkZvuoboauHz70QWbTmvQIgF80obGLtL5uWK1JBGISb4RkOTJzfvWq/HfmpqdCfNJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1287263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqnc5CRA9TVsSAnZWagAAbDEP/3PiJbU/cFYcxALAkZCa\nlC9AbPxHFNM4vprIlNVc6zVKkVuab7FYjat2veigOyEOG1qNEerAn78kBW+H\nNR768KTgMqa49iXAlR34tBYBdDF3cawcNctm+CtM6sQ3whVlmFMPz2cneo5Z\nNA7lSHy8PTIef8bg3WfWnmiv/3pYOQo3FDx9feHP0F2KOdRme30EbVYUQLmM\nV8jN1TrauAm1BrFJ2iDgXAQHw95nW471bM7rpYQNNJlpePK2DsU5BYjWzqnJ\nshkCGdw3yjPHY84lkf5/ZPre3PUuY2afLNXZWy30+TGa/GOnSroEwGSp3Hjd\n6IOLwCm+cnfsGaIA9N7PA0aOSs7Qc7xJ6syhm3V5st1zIYWsK7V5G4R5+HE6\n52Z2h9ra8p3QfU4+ehtlOWniR8z0bcqXCBrXU1YQeOrVuRoHfI0cantXCPVr\nlpB1YGkRSQKY/Ar2f12gWx91CJvniNM20JZecbaGw0XYdIJwcUf69+47JhCg\ny3nX0SCTrbOSQBJHuEiF5pWg13cpqCKIeBa8YcxvblooyB7M0ZFxsxd7uLMY\nIa1tL+zYJltY3vMSS7ueAwtPzbbSPfvIq1QNMjAZO0G4CDLIut+vY+cuKrgt\nDiR4/PR0TOXSiYLBTqAoE/2NMzN5QCFTne3O+BBOFckEvI7rARMkYF0zWGTd\npmop\r\n=0XdU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"37c133e36ef0c518ba445720407312b6558c332d","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.23","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.23","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.23","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.23","@storybook/components":"5.3.0-alpha.23","@storybook/core-events":"5.3.0-alpha.23","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.23_1571452727683_0.09778938719877672","host":"s3://npm-registry-packages"}},"5.2.5":{"name":"@storybook/addon-knobs","version":"5.2.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.5","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"cb3c617d2f017fc98c22b6db4384c90556cc074c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.5.tgz","fileCount":68,"integrity":"sha512-jr8HvtGciYaJqWgsl8CVYemcvC0Apw9YaLCV/ez8wmB4im94lmotE4llE+ZgpyIn6U6ikUYjQEeNzUMvEn25Xg==","signatures":[{"sig":"MEUCIHl9SFYxTuDk5O9Of7R9RQW4dS96rU77roP0VeQaO2K8AiEAuOcvxRWn7J94JwQ2Lk9kyYbLW7vFm7lG2CdEr4NuP08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrl73CRA9TVsSAnZWagAAIjsP/AqwKIrclRkn8obJ3w1N\nIwX0sNsdhe+bJNfcNYPszjz6YlwCQhtWB6EZpO6hwlSZ5azrkd/3lFF7q8Nn\n+lNiyD/ZH/D8aHPsdEoMK0cKc93g8COUSrkJaOq2pg+FQLcDJjQ0nelm3PSs\nRbLcRZhXMD3h1DSluAKPbZIbXXTy2mI0ZGdwaHRqxCM/WI7da+u8zcUq5J1j\nr+u7OKS7FnaUffqQckYewgZ3/+gamCn7w/PMC6TCCXHpJh1nZdrux5r9YRqW\nWO2asMvF9euVdwjCFXv9yccdiVjMStXgi+7aO0iRgJRbNRGawzrpvLdXJ57z\nJ7+94KQBqdg+XK5DhoxSXlHp6BwLp8UgVuCOzI13w0Ti1QzK28qqvJYnW+Wu\nCo+6w8ZnIGN4JGBd1xTfrx2iysw9aWbVzKPN5/01jd97jaNja/YaNBPlEOa5\nvKVpFe2/o7ZN9kYI/YMAYdmXXMC1cku6qMq3Oojw5a0qh98dAprozp3b+AdM\n4MKiUzPL6nadwi19E3Iq5KEwjDdcayY4IfYwO6XS/0BtxQxAO+14gYnDgEuL\nLdNtPoPv5D3yY4VyMBjtpUI4bMMFlGsQa2jsgQ0VhteRgrLMAE9j6tE3aLZ8\nElbcCPVR6BbueCFpNJIkzDIjWHnzdCp2TLHccj3tlnCf+RcbEj6Ah8EXeqMb\nBfUx\r\n=sUYI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"6e80db697f865f833cf3e250573a7ce36e0ee02a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","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","@storybook/api":"5.2.5","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.5","@types/react-color":"^3.0.1","@storybook/client-api":"5.2.5","@storybook/components":"5.2.5","@storybook/core-events":"5.2.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.5_1571708662682_0.6594973389213961","host":"s3://npm-registry-packages"}},"5.3.0-alpha.24":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.24","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.24","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ffd422119e141347dbc3cdd60c5f2d47425b4de0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.24.tgz","fileCount":68,"integrity":"sha512-gfdHNVaqS3jiAh9RfEcTC+kluwJoi77gl3gA47mHt+qiq+JvPVFq2l/XIZScus9WmccOJcuhEsvD0r3K1kBZbg==","signatures":[{"sig":"MEYCIQDGKR0UmoBhWRqxeYMexL8XB3sT9Fbqewa+RiRxmmI04AIhAOEpFrGvMBI5vIrUWb8oXFFAea8MqYXLcU7Z9tLrEgy3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1287263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrmOkCRA9TVsSAnZWagAAo+EP/RiD6mh24zuYY+ncFvue\ni8LG79DlzPhWyOIHLsTWf6BQkVvwpt5onQdVeg6xjuyFYbEFIoILLrlYXKxC\nDR0rApQwp1LwLoyYrGo8Q7CgBYTRNPTTnK0SXmKFgGxduUzsu6iJGLEPRCxu\npWVKZLw/cphFyga5oIo4cnVGVU3N6SE7V6Jw9c2/VhRzeCQHwgjX/aHCEjoV\nsdEs142bkjRKX5GLfc2dDO8waGrEzMDzrbjUuJu0EB6E0jOHJAsymLM4sECx\nBhKIOl02ScAHFpN74qUR0K7H/UL74hy40Bq69gBYm4oxQNT2Z8sIDa3tmLvL\nnzItHSHkRxDtRXLcu3qOUyJMyeXXUZ4mCcerMAS3y88+MncgwsmMYfu7pmmC\nKOq5Jd/vxkSUJrjjmVY/GeCRS9TQ4D3vKDF2FcAA9bSj7ze39WS0HWnC0dl3\nHHUozQmnZ2WRbTpJ4pJRfAEUjZFiu+AviQUO9g/+Rvjl04G4XXUwiby1AkFj\nwkV3R1v6xNyfDZpikpnFaEq8clh+wrWEANzHtkl0wgPTMvV7A/apcO8akm2T\nLwyRA9ULQewJPa31pp05HBZVE9Xs9kChZ2KMqfiNvYq2ACR+kM18O+VoxGbb\ndk3i4bWhpJGSTN3cNbx91JNHpsQYiQwEf2yyIM8Uyx4yAG0cTrOZmiJ6d6p4\nP/pt\r\n=LiG0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"4ffcd90c08c46c1ee6d9217ebbe03153e89fa446","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.24","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.24","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.24","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.24","@storybook/components":"5.3.0-alpha.24","@storybook/core-events":"5.3.0-alpha.24","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.24_1571709859821_0.6142317723884891","host":"s3://npm-registry-packages"}},"5.3.0-alpha.25":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.25","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.25","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8b75f867a8a4814449e531c12159783bcdad85c1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.25.tgz","fileCount":68,"integrity":"sha512-c9PVAMWbEcsL0KGfkG8R0cAoAMVv12Szf9Y1TauwIBrIDBs80zJvb04iM372ZfeHvNExR3+ModyAiOUI7qddeg==","signatures":[{"sig":"MEYCIQDuA6HoD+HY97XtA+9oCvaFZlSb/1HuAwUzgZy1gavzagIhAP+tBRiEmcMZPt5Vt4onc5HECsZQic3pNZpSWC44dyQy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1287263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdr68QCRA9TVsSAnZWagAAe6QP/084Jarf9zRPDOroF68x\nA2EkOldlkIkPCnQhvQ6eJmkuCIsdXcICBfDHpcm7pFeT27HYEUxTsvxjBZxm\n+mWCNtHw9x9AXoizOssLOkBrKF1nQxSIdza8DjwEaE8wvh3cKwn336elUCoJ\nkkYOgcxQ6bgFWWLxvuYpNfvVScEFD9DIIYA6cwvI19m5JtattYnubImLYEAR\nhyCRtcH/v5WAPPUfn7AmLjLiXYYbSMPNYAxBSi1D+TYIF+Ygcqp6k3nCC58H\nzESr+iK/QVGVwvCFG7kdnqTSiIunGfWGZFTstWS4hQvphe36wMp/XjVbjOtw\nqupfABTHiZPXe7WnH6opFt/Uu4Vj8ZftHZytYvHhXCouyoDW1gqpk2pff4qR\nM+PxEVR4QVhSA9WzMbffBj+E9C3ZCcSikfmmMGkGFwOOemGsphGkPIxVbZ2g\nFd2usskkRtGM+go11Cj0fkd49WjNq7ioKMX+Y0FFJRP96toT2pxG9HoYjOxd\nu+Mu/eG/MpstrDMo8qtIWhIqpfNgCDUI6O+zI+DmVsj/lb3hHZufUkxBPjIj\nGEbDGcZYHxUJsidJPmFhqY9g83II6kDLjT0cNR0FCj33SvMhYxcJ2w3L4a5o\njrVCQ91Z1ajugQXe9HWBrvqgPgScIPXPeyDa9+ffPYW3POuEoiz1nAdT8uzu\n/s8p\r\n=Jqx/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"2d1d01886002b6738c974c9529f5d043e0faa6e3","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.25","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.25","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.25","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.25","@storybook/components":"5.3.0-alpha.25","@storybook/core-events":"5.3.0-alpha.25","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.25_1571794703725_0.330828353942517","host":"s3://npm-registry-packages"}},"5.3.0-alpha.26":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.26","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.26","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"748b8d157ae3152bced84aedd94593f14f4afe9b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.26.tgz","fileCount":68,"integrity":"sha512-NuI9Zdr/0q5r/n62dEtHpYjyq5vftbKM8flYPcbHvUyMhmpa//7YNktXS/p4FxZXabIO8AcyrLpV0p0wiUrAOA==","signatures":[{"sig":"MEQCIGVam64gAjyIhJSflWIk4WP9bGn6Kj7Nf9lc6gr6nzMgAiAgeDPCKXTLPalamUE8CBTyQbTMZwhqtPX6B+WMU7k8Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1287263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdr7kACRA9TVsSAnZWagAApKMP/11EUgszaEPudQYxlNQy\nxkCnuAQLAmLaXnBWyAoR5B/osieCeec3kshxbmK+kKQFPGQH8O6+VPmNvdGW\nOG3cemqSFovaqTyZO9ShQsZkG6RZJizlzAoUuPom3+Gy4XvQGB+aC41uK66k\nFK3sfyg5lo9zVIsreZeWqq539XIxGRpTMlvcb/XJUaB6vAQDzK+426IPrMXQ\nBvMbyTGGNC043lcYDI7TYYFbqRZlVr60AntEasUusxrSLerxZ/9vo7eVDGh9\nbsVCmuSk3TbrIqbXxhe3g3srNw37y32aZepi9FlOHfjX7s/kPVvtXD9BQ9+4\nvunc41z+g1WcPA0eLnKQoOPD6FBArtFIE3MjvEjirLwrES1BHOBZij+L8XmC\nSPS2yN1YPb2bLxVESqDHOlzwIbsRuu3RsxS3EU6zhpgLnsUPZLRGLtjxXEY+\nVDTlvfnyadoLFZdpBGJVOBlZcrrZVArQkpDgn6jpZ5npYWTw8JggG0YKOs1x\nY3WvOakz67mPMbLeNQWkje+yYfCrio8N6WcRk854artX8RbLLwYn8FK/DkjO\n2ourX4UmB06KOkXBytgOo9T2IAgYMOpOa3pfb5u9E8IoFX8yWhap1N39dxnL\nHrT8QP4//HSLR42RyDlDsr1BkoB18E76BzMu+aKe9YVrezn7K+VDxj0VSnXL\nUpEK\r\n=4Ygf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"98f3e2c6df7ce857dd33b739897548d331082234","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.26","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.26","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.26","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.26","@storybook/components":"5.3.0-alpha.26","@storybook/core-events":"5.3.0-alpha.26","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.26_1571797248034_0.7058076791753007","host":"s3://npm-registry-packages"}},"5.3.0-alpha.27":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.27","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.27","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6ead7e79baf52d1371f1212d3b14393b06b96f8c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.27.tgz","fileCount":68,"integrity":"sha512-B+zR+gF5b8ILPU4rNT31CJuIyWNorzV21HDimYAmDINzZjd8/TisobZOZHgIkzs2h8R0zknm3IjQymZDp39aew==","signatures":[{"sig":"MEUCIQC2Q96yy+hwGm1qzn6mSCZak1KsNsH4L5ehvKhEGstogwIgB2iazIi4I0CLNDRosbMubcUxWUTMAMkrm0q8YoC9urQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1287263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsb7gCRA9TVsSAnZWagAAyNcP+gLHwAL4iF9eDsLosIpc\nkBOSc/rccs0fjWEGWGSQfSZTjHGRa/V/kiZGHp1gZwIZfbFVYjsurBR5zhpu\ng3+FVALHyS7jfUIV/GNhz8hI/DMO3eWMFJOJ69FsY3HOIdUUoie4IiAAZYvT\nZZNQveSpbTH3qwjb481tz8q7qpyhCPjTOC3xUrTgZeGU4UDtmQiEk66atsSK\nl4/xI6ommDsRUvsBqdJBbYwfzrQHgzIqcc8L3Jx1rX7yoxbc0USLbZMkjWUT\nRATJ/lPTPGlzratuOloS94AtKRPPLA/rAmmKOAjybgRZS73D0pmWFmf6nihq\n9WXvD/IdTWQ962gtTNbWmw9+y8dhliIb3aBUaHt86iMzejgQBemfughoF+oa\nDZ6gZad1Q4OrbqAzP5FWYg6uIVseTe0Fp9y5ZIu/PxrGK0TBE7xqTJa0qb+h\nY34kLHz3Zp/K5GdUpjgGQoiqNR59tppgpK2H6fahaOZYdDVn5FHeUCTuymcF\nCzsotdjSfbt8td+sgP6NXRoDUfsI93xRZveCKYXKJ7tFIFyLoEKS02RCWtCb\nxfcqtCEh2iT+DIu+uFk95fs+mtWQf74yibzs5LKYhutRZp6Y37D/L0VtZ84C\nMnT8DTF+FL19Q7Lcm1gfp142b1WyBXI/zH+k2owiH4c1q80MC0Do4YA6qeK+\nr08o\r\n=+sAE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"6eae4c491bcace9d289cbdb5c58b409052d6c447","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.27","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.27","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.27","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.27","@storybook/components":"5.3.0-alpha.27","@storybook/core-events":"5.3.0-alpha.27","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.27_1571929823479_0.6005711207553892","host":"s3://npm-registry-packages"}},"5.3.0-alpha.28":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.28","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.28","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"fb3285736ae0cce1d43e3c20086bf7dd33da926e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.28.tgz","fileCount":68,"integrity":"sha512-5e5g+JBriJGKjI68EhPSuGhHN2iOgFIPcOEz3pv+eEqOehxmr9quxqhSGmWmDPoHT437LRZf/hTJWN59RpvXbA==","signatures":[{"sig":"MEUCIBM/bWqukf9P3mpOsaIU9XJIQA6tfFtpJXTNYywqtE5QAiEA5Af5N8gm4IkaVHKgAZkoPzPThJo+wCLlKSZmfjDEE6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslcfCRA9TVsSAnZWagAA1mUP/1uO4q4GxR6y5lYfMM0t\nfKIxm5R5L4wfGmVUhGmZsz/n1WaS2XZoe4v3rVm8pb2qHOH/d11jtoOMJqe5\nsjcbVHU7bRmClRBU7EDpcaoeHh0/xpk3+MmEC1BvuN0GL5w/Eh779iRpcqlh\npOUcAD8xNcndwLIoAjRDAam51mI8Np5keaXNAR8YfFdu6O5hlYJtilG9xO3u\nUdGDPswK+i7QmvxbLrzWXuWkjKKyreDKZ2mJiY22lM2cnm7iAmMdPiy15H+O\n7STP6DkNU9Vmsgz7eqM14YjTlYV9hwpgwem20ScgOT6Fpeu9bG2gQQpgBBit\nE4P68rL1H2VYRxfsvpbyu7ttZP2oe7DW/yYIO93SWU8+z2CneNyAB6Y2Yq87\nR3AWcubThmx7dYF0CgOgVMydwSnqNFpofYAypoE/MDcWLHbIdgqYkKc/7iPv\n4+uPzViC7Gic29kTzhTmYZhSwso5vaYHzIslCywszyarQ+ewssPwSLjAnZuX\nPcs5xWNaDE1alGwAWuTy3B1OPeNeGufE5PiXhGLkLZJWVXX2qxku+lmyVGbN\neA1Zdn+9y5W6oWJZ8VcL4Vo10kJ5KsOdjzWT5D5umRic1bE32DWb0njkgUGz\nfMt2p6HC6wCwN8RctFWlZCDYV5uACnDT7sv6p5xLhN0SON8cDLK+yIU+oBac\nhFbU\r\n=V02y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"aaaf46873b4125fc6ec05589a8ca57eb9356b3b0","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.28","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.28","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.28","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.28","@storybook/components":"5.3.0-alpha.28","@storybook/core-events":"5.3.0-alpha.28","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.28_1571968798660_0.3464373380155701","host":"s3://npm-registry-packages"}},"5.3.0-alpha.29":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.29","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.29","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"527729859551154c3dfb847c1a773fd76b8ddf40","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.29.tgz","fileCount":68,"integrity":"sha512-d7Nqu3I6dsaOISyY9JhxZq/b7H/EDah1loQ4QSkDZE5C/bLHMqQD5h9/34CdLXsusWfHGmWerL2ZUjSymu11Xw==","signatures":[{"sig":"MEUCIGwgUsHq07Cb5ldpda739JDpcl11fiRvoucdkOfyWKq0AiEAruOl5gN5jz6+L0Vo7iBodBSNYB9tKKtEDzzO79Mc+Sc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsqwLCRA9TVsSAnZWagAACgwP/2wktOoPZRQW1u8NfTrP\nfoSblgvFzt4uNqLvdPwOic4u/ghynr8Hye5QIBEzUp9OHSVKoRmW/H+XIykw\nF3NKf3Pn2G4aJeYYcR/eTzldZ4b7fVzTgR6QsBnZt3RxaZEmUstxPlAv4FST\nt5c66pDDh1fU0uIbaQVAJ93NeI5SB8T5oEFgd2887VKLPONEf1vkK/WGIiu9\nOZl0LxY/+3XWLcWApVLrVzobBdZorUNOiRHp37HnXjccGpz9w294qn3anXXF\nKosdUtdvbO5WEfXud35wGD+iG2qUjhgmvYA/TRdxUZ5skFe/irEqbx2NN9r8\nhrnp+yNhFtRdB8JmgE64uje4t5FNBUDVHlpME9dzLltdZetBO2nPhkj8vr25\nQiqjS1WXBVSP6ifqh7JMDOQ96BSDtwbXNx71MHHFyn/baPnmjRmaf7jB+ums\nX2vriysu8TuVFUyCKeV7WoCSNeQoL69OvS+PW8UiayOqTwUU/7PZhN36wX1b\n1fmexWyRgP/HD8l14Pt4go0xx181Ro3lKbbs7EQefflrJCqINrb/G80PSYCm\nWZKCVjoYDytT53ma2+SWDchM5bVjcFEo2/+RCdxp7iREEkaM62HExfcWz07Z\nNnHqSkkOhMolVnuXKYvPgsg5Jz3Qd0/IyjKOPUZB+pnUMEnEXDrk3Rw0967e\nGoY9\r\n=NZ4S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"88a76a9a649f44b66852f28cc801581c9b6452b4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.29","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.29","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.29","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.29","@storybook/components":"5.3.0-alpha.29","@storybook/core-events":"5.3.0-alpha.29","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.29_1571990538919_0.09442696036255671","host":"s3://npm-registry-packages"}},"5.3.0-alpha.30":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.30","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.30","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6fff4f30f5ade708b03237fdc632af7de5bdd023","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.30.tgz","fileCount":68,"integrity":"sha512-RhprNe2X+kCD5mi878oMWoKlSRTRqsUx5oR6l+EaKAWjye2qkL6QoFpMLAjeyEcDmkC2zQ31FdZsEGHpYuhv7Q==","signatures":[{"sig":"MEYCIQDkEehDKoWmOoq/wkOHQeqFEC2aiq8YPqxr7UDXTYOs6QIhAO3s2epoSV/kUdXwFYhx5LpjfS7cg3cPRNlaEdJtHFbY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdtHJ0CRA9TVsSAnZWagAAFwIP/iQ4jyuoKj6GxTFBKMVT\novyVAqYopsK6KJEJsZyHuNZ3X4FCtmCpM+kXi7+Wj19Y4Dx+c78ossTO8xj/\nV8/yRApLvONqEkebI0ZaTfjSnhjiJ7eYshxwFbHYP2FZCLadSExkf09gPE9Q\nRP9splMiv7dF2Dc0TvVUJ0d4FxfAFIfZon5hgA4nKJ9zVeo8QfhK0BqnaTNB\njAgqhqIt8vhrC8bVY94J2qMJAi2yeTG6cnnpU04ZFBSwugRF7jpMAxkP9f6d\nadjyq6pp9jRIzGoLQ3pBRUUFF0x13SCUSFFduuThA9Ks9EQ21FLIC2yzt7Yg\ncq/e2NMVj5KUk4J/oNIQ6b0naw08/N8VhW1tC8w7ZKPDprMb44cZFZtMiCQ5\nyIaTc/UFr6G9X7IRHj/6118vFyJznbE65hrZdd/QpgmQLRqeZnwiVzeGPNFv\nu5p5WXCcinQm/zWnTC6QUfl2Z0Ve143y87K8teyWYH+Ccq/+CyF0lHfoJRdw\nlDQCULP4LCqIzn5lRqlTaNWk76rNMsdzZaZIImqeMXcRULIa1RzCPjK5VaGs\niX+CMHQ4pA579mS65xMxFvzMKe+mxrXvIGsFMUMlWtGP1u0PRQB4Gb8eukOw\nq67tiHkG/KebdAwEEGGeyhimRpN4qBCdamXvoT++76rX0yzJiUpf8iC3UwQK\niCPJ\r\n=d4JL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"2f7ca41b356e03865f71897d5b2284679707246b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.30","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.30","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.30","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.30","@storybook/components":"5.3.0-alpha.30","@storybook/core-events":"5.3.0-alpha.30","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.30_1572106868317_0.5962442963091179","host":"s3://npm-registry-packages"}},"5.3.0-alpha.31":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.31","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.31","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"015d14ae6e811455b34bc4c997c5b274c9231742","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.31.tgz","fileCount":68,"integrity":"sha512-E2J47hwZkk2NFh8W7De1HqRuasl5LuS557UK793qObX3YPjLQK7Rs8XZOgpqUg8mW9mUG/JJzRYjgsHslJXqWQ==","signatures":[{"sig":"MEYCIQCHVZbNaMpgatURqrjEJYdlzqED4JDWqaXx60HXgfxwuAIhAKoB2/0z77AKnWDakx8Pz4qwYRhQ6xBSYjRxrmBeeXLx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdtIZ9CRA9TVsSAnZWagAAAuoP/iArHeMHNd6bRTGCIWkb\nXNHmHaZpglyDKIgvesdh9PdjsvIio39RtDA9Oi2YmY1PZP7ERgGWBueCeGyp\naQ5+00irVWCnzgnF+dD0ZTfAWdhqnP2qC9z17j3J61QTXts84QvW6jYcAWnI\nEamsnjftG6ystp2Yhx2AHnS65IcxgkF+ztxyeUCfiwjyEcC33pMmLccuAuA1\nQFcDNiNJRJFJk9R25BwW/gnRFhWnsYbPMwfhm69MlweytObJr3Cd4Bh0TLJw\nHY30e3SQ4tWHsIsFEIhLKpuyXwIJj7YV2ufYs0dyYVVrJ9PrgLy/dvrPJ07q\noj2ShERdjNuMFQ3swinLd2ofX9zUPCVaXFX/NzHmWVwpqUl02q/DvsFaTEle\n+rIPkTeNhBFcDGf9WOtTGSlwYy/g8/MoowufYFYf14FkMr14WawFIvZpRhpd\nciLkfvx+o08U56oQ/qzR9adeyYVmHQ+OCrYnhRte1DkjedMigZMs1zvL5EPi\nXWc5zGRHTOMalwyRAz79z1dm4bY4D6mK91vcKNTMIFJKci842IozZ0B5vtp+\nz+eyvFZW5V8WHuNcPc/gLBpmvfbMagI1rQFARDTxBHyV7KtxpxJ+T79N+6vT\nJjsdy9xKvYstlIQ/4BPz/GOTwNt93VhkgKuy5m7AqtKYbLY/w6Iq5H74ZJDH\n4G6X\r\n=dwIO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"d92ff8900eed830ba324067d765526c03ebdf07a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.31","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.31","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.31","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.31","@storybook/components":"5.3.0-alpha.31","@storybook/core-events":"5.3.0-alpha.31","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.31_1572111996530_0.8667010968047233","host":"s3://npm-registry-packages"}},"5.3.0-alpha.32":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.32","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.32","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"bf6b28adc3cfee308047426a5bcd083835fe055e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.32.tgz","fileCount":68,"integrity":"sha512-GNqF06PLKq05KvTYSnyiRyrqBO51G8LEx3x4NsSTtNxakVjCUgZk9kXM2XmQz2+uG1FQQvOhahfU/sA44HJw9g==","signatures":[{"sig":"MEQCIGeseuOb8leGPJUPiFz+Ibmr/3W5bxRnCep1iX48kGELAiAq3Oz3AeHKX9EoFir++zYqu4xUL0TYqXOuGHfzKY5/0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdtey/CRA9TVsSAnZWagAAI+MQAIWBqSEVLhjcmxoQUwPE\njFUJj7yhGhB1QgeQUlyTsN88niq7BnsLF6r9PApSjZ/pwwcHSlOL/127zLPU\nnUlwchjcqJioZtjW5ILcFJZFHHgMQ75PqehEiqs9QqvBq3imCG7bYNLzkhXB\nvr9P7jrwuPuMxMBL0xEyHFOK+nH1xfIerL1+dPOJqJv32JTz6d/WaT79U+E+\nIJMQzK0qLioxKL57I99BG0L1NXkLSbHQ2zAtH2BWkPV2ZcVV8FR0raSdG/O7\npsAIdzPtSG7qBQ3nRXlB8pY9EIBunggh8rH6zCEXQcG1+qhcSj29cTOF7dDQ\n515h8zKnqRW6qAlgTi3UO5Od1ha+oJnuzDoM0F6UnGvSEksWboJt/5aZNHKF\nSF6vPJ3Jym+dGLlHhe4XVRXLs7pfEPn68yWuEYcndqLH5yK0a2g0DNikKNx1\ncPVW4K3IizetnOD06K3/W1jPHX/FgPBrNZojdSokwdb6P4MSYk+Ezx5pyjBU\nKS3bu881oHMJHfTNOuwgGks7BcoMWsscUNDgfoSC1MThMdSKgkkWr/ei1Q4X\n7TmS6HmdqZEWyzCHUwBcEBin7EBX/ghdnApnO0bVcGm31hsQM0LxyTm4/IoL\naAyohfJ9Zrbi4QTgL/fD15uOngFBrZRuve2zG9bvWR6boHGg9OU8nilgFEjB\nmBcV\r\n=ZHXm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"5de291a862f2951d5bd2e8629f06e1611cba4acb","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.32","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.32","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.32","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.32","@storybook/components":"5.3.0-alpha.32","@storybook/core-events":"5.3.0-alpha.32","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.32_1572203711273_0.8981100519297511","host":"s3://npm-registry-packages"}},"5.3.0-alpha.33":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.33","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.33","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"bca6a0212787a15e1f8ac3a8d6e8c8dfc12f13ec","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.33.tgz","fileCount":68,"integrity":"sha512-9H6vRaWlagXUqPo/5nZbNkC/rjyGn3j5UbaWh0zTOV8FwZ60RI8zFchRmVPWg/iup551LEV7DgL7VS9S1LOF7Q==","signatures":[{"sig":"MEUCIBmXv3ZtdtulYDqj/w78/htvDIvWfHtB6YyDjm5r1NuhAiEAuc0AIMrPTcWM7k1L4trSezJojxRId8LIGEnW5tMkcn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdtksQCRA9TVsSAnZWagAA9/oQAI/yqXOFCcbxcQWo0zrq\neNsHvkGsaVHogqPY9Ds24VmR78nAne+OG+o8EirCQCLRqqNa7yjzocowGwWh\nivZ1KOZADAj6ObEGVLGBVwdZtfOakFwqccpYtiefmGnfHay8vasr9LwoVYm5\nmWx24FexzT9R+oNe2fT2fFqlk68k9DMkm4SlG66/ezJ1/jZUubgTgvz+G/vO\nuwIsAvdXXhC3qcwOf1WlKzM/NNKR+1FeL6I0a3audwhlgShKaFaEQgjiQtL0\ncyCFUoXUriJBA9m4mJ1aEJHyIYLtxUWJWQ3r2JGQbsGDna+g29TDlFyDbwLW\ntKpa31CPNQ1gg22UiHQQUMw5vgnbin7XBqBKgmBoQfr8662j9h7pBoEbCvzx\nMDYKSxEco92k+HLchzxGXWEgIivfNwuAFD+/Omj4pwLx4vvDt6aB5xwr0tnk\nIBj2W9AhZcngwSv+XgQnvQHqrv8H48WRQrD7hGhAC5SZprGnBFZnz/0SHLyz\ndHzNU+m0uASEkdOszDJPxyCmlgpzRi3h03uOYYqAffJ3+PB1JaC9uGu9FnJO\nj55YG8t8ki/Dl+Iwcx3nOp/tZ9BNlbBeW00uclKiqWNnwPDd/XEB9DQulykm\nkfVHZt4WnPJjmt6zwkSGpFGCvKkikyZtryxGhteqAaBBBcm2sF4bKbmR/6pa\nX3Sx\r\n=cquC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"d7d7992bb4b2e2fa4f98ec7cdf21bccc3caf03db","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.16.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.33","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.33","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.33","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.33","@storybook/components":"5.3.0-alpha.33","@storybook/core-events":"5.3.0-alpha.33","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.33_1572227855646_0.36349066517154127","host":"s3://npm-registry-packages"}},"5.3.0-alpha.34":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.34","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.34","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3589527ee2f67aee0c92f94960c5aba95a0bdb48","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.34.tgz","fileCount":68,"integrity":"sha512-EIQXZCYIcFQfJrNshEDdVayyoPek5+jpT2jZjM7VViMhKOpnMGtj3hM8YU44Sm384RHYJv3v0QK0xRgBEa1kyw==","signatures":[{"sig":"MEYCIQDd+WSR03M8BKGJBEBCXPZVclrccWOSOCdevU2Ak6pxCwIhAJAhbPjlAMhVFKvs+/fj8X/x3naAjLqjaEMga9M+AeZR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduVkHCRA9TVsSAnZWagAAzcMP/0uw+JSRRV6PCq9cetyM\n7FQK9FfR7I7nalfoBHlZh4tW/sU7GAl7y1OUR6VPUAI9WSNSW8er9jne4g98\nsEdu4II4CAlNUwY9BvybAxEh6ktVH/eAqyKKVSGQId5ev6M7L7rMlc/9SNmM\nchvzJifqZn2JciQhRnb1qi2nEkGVyAFuvLx3EAwSOJwXODFfpeItXVw/QGoC\nLpVUztrpxC8IVcIYuOE0Bu+QFrz2+JH9q0OCGlaXZVjvZZjwooZllRXyMsQ3\njM6QwfYVEiD7RwiDPJgCrld2lHc9dgTxPcivQK2oVMh4bXhIHUgH8LwSXkK1\nuFMSraQCWZ159WF4ruxoIrJ7aPwzb0M75uC0u46wFO5Fl2NPe9qviE7hFKIJ\nnMctKdxpQA1t00oUljGmmlNd/nq377CbdcAwGdz+9aVvuOjlbwxZxo99LDYn\nM+au2WDzsBYBwlLxRJUisOA1kze9/5O2u+AmqUiJoXcPdBBQFKlD7nvXw6rW\n6TOjn1bin9vXf+ZrF/oEvJvsqA8gG9Vly8ey1x8vSCQoFDBRSjqCfJ2xy65F\n6sfo56qC3vfsnH4xznXEkdfkdGOUc2JmtfIpw47rGPufvFy3jPcSGqL+L8qR\nFC7VSx4YpAwvUQKtoLpjh3sNnFhTBxO7IHG9z1MCiZomomHTp8MpyFv04Tv5\nV0fy\r\n=W6lw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"fbd809ea526e629ff95345942aebf0bf21cefdc5","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.34","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.34","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.34","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.34","@storybook/components":"5.3.0-alpha.34","@storybook/core-events":"5.3.0-alpha.34","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.34_1572428039064_0.5740478740315209","host":"s3://npm-registry-packages"}},"5.3.0-alpha.35":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.35","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.35","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"29504ac22305826be48702897873a5e9f97f9bb2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.35.tgz","fileCount":68,"integrity":"sha512-ukxtMvm3qP0g3X/EwOYGYQ2BZcF7qnrtBtk9EAyHDGVnQ1kT7LC3YpMwifHBJE6fyXi0gcWey4MIpgt6dXJsiw==","signatures":[{"sig":"MEQCIBbfeItXBX6FgCtO4u713Lgtp87O2MgvUcBj78AQeogIAiANZxM9iMOlJWPOF9JJw7cYJZYvcoNDZUbB/5oqY7BlrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdu5ETCRA9TVsSAnZWagAA14AP/j7m15vJOTGWWcj5qMoQ\n4OEnmwrAKPoh9qivjuq2aE6OsT9zbuwivi6u6rwBnqAWIMOE1V9pHKDLilnw\ncfmNjXXkYVsRtEGF97LEVjx/OEyGnSNl7zA6QblOi1tcspFO/N/V7TKAiSub\n70jdtCqwhmqjQwLYpUv1V3s4jpO5Ebr7QIwaQ+Mz5QKCX1SB2TZ7c7rGky/Z\nfY4PAoVHtbL/HhDlILqymBM5nzvl4JBA1TIzP/4SfaxA8Sb2XQQdHmSD5nRJ\nj5CS8TgS+jKIo5RyzlWC04+3cSMXCThEkvOSjA4DOIrfJ5mztXhPlDjHVlkX\n3eCD7vvRqC0V+j9IZLoe0JpOL9k02JRtpXYvRcJwBqnGKZEmb9USaIofh1xi\n0wWnfD93o2vBfW6KlosMtha0oYYPRiQOzsSLXOGBEJK4UJ3KDfi6ilnwjU10\n/cXAdIXjw74ia1fkhewtl+MnTOmLX14wBWp+jmcCyN31K41m8iJ/W/jFqr/5\nFdfwNOUkOB4I44C4zDSdEzBLBcy+OX3G8ri4qQBE1p4pwhOblahQnnsIsoow\nSU4YpIJN6OgSpSGd0WNmeF2jIFgbQpEfTr75nZxaJvdnsr4N6XuJxkDWpkyo\n2vh/D3ztwjoyUZNzdESI1X/k4i1x4RggAsmdVkkTJd/AEgO7BFaWVdX/ppYO\nMVkC\r\n=XoPw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"f1749b5824776fd5f8bd773d0b7efc6c6289d14f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.35","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.35","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.35","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.35","@storybook/components":"5.3.0-alpha.35","@storybook/core-events":"5.3.0-alpha.35","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.35_1572573458540_0.19724395540551698","host":"s3://npm-registry-packages"}},"5.3.0-alpha.36":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.36","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.36","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3e2a104d6262e1437c151ce3e1ea16f0b208008b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.36.tgz","fileCount":68,"integrity":"sha512-qqomgEpFEB9Vdm8nO5NMf4qrSuYHUkPL0gE590gnx8qBgebboikkg/noAmKwNFBm2+bh7l/2T0vCwWixQGwemQ==","signatures":[{"sig":"MEYCIQDDvLm3yF+HZOd1znZRXBVcGoVC/y3sL07B1sNXshaptgIhAMEtqERv9aBExZgRZEysCKMLHbZBMdMe2w4yP4+cwC+n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvG3cCRA9TVsSAnZWagAANqcQAIda7rvQ50JgXAkrUtfi\ngpXLLRrtVXH5M/4iWF12hnQWklwQUxrt5QFAiZFop5K6wod8z5qk6BqLfUxL\nR1ShoHeFC+Pbrzd254ZQfAZNDBRGxH3TlRTO6p23zWnaAMdAhlWKipgkPuTM\nrcqdRyRsk5ZixVt+2AIVtsNoGkDZZYPonKBThnMNfWMpIH6j2F7nAE16+2PD\n7qb0TpmSmR0qWI5Fm4an6IerfMdEXDrPEduAAg86PxeIl+cD3ivl3zLnnq/V\nDYU1BSFsp7l+/bnltO2PFCJ1ioNwIlyookXCa00bPgTzNgSvxf993psVe6dY\n/FP1vCXX8H4Yo3BKOr4MCaJWeRz45D/BC7V4QHYEMGXRR/Zd3JxHJP1bsBtv\nMt9NFXOktfyomWxicoS3QtlPwdjBWs3pl69yHTROOHe+EST5DaMUVj2j/R96\ntSNsR/2OMlNTPPgEKcXX4BvYmQwubJieHTN4CzsbAzSKXKBu6oZ+DDIiGoIz\n8bFRcdTcgLwC4gWqRsJzDDP/aw6PnZck0WxAO/ZPx/v+Qpj4DOOgrE+53E2D\nOKb4ZG3ezssafqjTeHnY7rfpjJDiv3qGIZdtl1XlUHC94vpKLOo0HtdI9yFV\nWUzGllGYh09ow9kbVGhyOwMYZPm+1SdQ/aEHqk6tPMZOIsdrf133b5yKkTv/\nxwlO\r\n=Ku10\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"ccafaf46d4dece4baea0536e9e3c2920ff172b5c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.36","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.36","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.36","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.36","@storybook/components":"5.3.0-alpha.36","@storybook/core-events":"5.3.0-alpha.36","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.36_1572629980304_0.8828294644236556","host":"s3://npm-registry-packages"}},"5.3.0-alpha.37":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.37","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.37","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ff55c0118b5eb8e6e8bc0b6e02ca102295a400ca","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.37.tgz","fileCount":68,"integrity":"sha512-IeMJu+tPhATlGQ1BZBK6KzMuq+jStKYHryvf3KTom7o/LjA1ZB/JMwYnmm7Fk7hkvCYQTMH6pQoTos4gtc85/Q==","signatures":[{"sig":"MEQCIH1S5Tyl+1m73Cs/RBHMAOYqZPdRz+rhdlNtcnzInPz0AiAwGVMiKlLDZIhdPUTiObh8OkUURItuKVPYnQq+OjXhIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvOk5CRA9TVsSAnZWagAAedEP/2ZmZd7duOJDn/YAFKNM\nEVg+7XrUSXwDA34YJYBQT3Bdymdk/NlIyyjA/FieX+A5VL2yn4mRGblFN0h/\n4ufptRIjiB4OHNRAEs8IRsZSHtbRUD0K0ZmFp6JpDjzGfpdvZ+LRIxXzKj+i\n8+CtfxyZO7hBIdcEAaXKu4La9GC5nCAZyHtrBKglWEXEIoTaj1t+9o7fzJpe\n+N4IrTcfrN8nlhKrG5rubyHFV7LAiTmdbX68rOmVfO9l8HowOTYpaz4gI0zS\noQylicDrxIeCW61nmFm7rJcooa5K9YPbb3mscp68IXCu3LHE3OJNo4ZIc3Cl\noexp1BVNyT+zpTsQSARYkmTCg4BGLELVhU98YqcWax1G4MzcgJuW2ciGBa18\nsGKtCaw3aB7e07hBDTYEsH2o1QSBoTI5rYBCKSPz5ROid8+fpjtlpPct1Bdx\ncOjjhNnRBfEiOQak3Pa6YuAAywgwIre96kyV9r6zUA2f/18qeR7k3eWQIbeP\nioNGp70I+f12Ug4Db9DkJAdgzsaccWnqIXI2aA5WqcKYl/stJUYDzj8PtbMQ\ny6o8DmQ4hOZ1NuNiErwxJu/VgT06dvmUAgk48lYSWb8un/U95HZPIcxH1+5N\nCG8K/W7vtyiHh6qaqWCBs+2iv3TacS/kXAC4Ov24bhtx6x6jC47WGReEa3s6\nG6aR\r\n=Aa7v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"fb19c3337d60c58e12736cd25e781fb2ad724576","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.37","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.37","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.37","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.37","@storybook/components":"5.3.0-alpha.37","@storybook/core-events":"5.3.0-alpha.37","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.37_1572661561029_0.8668360742417227","host":"s3://npm-registry-packages"}},"5.3.0-alpha.38":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.38","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.38","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"fed42fcb76bdc11b1537fc59ebeffd0de72814cd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.38.tgz","fileCount":68,"integrity":"sha512-JUL3dhfmfJXaHFtAKT+qhW8l5VMcbcvgblcZ5qrDM08WUNFzVs6Kh6nAU7jqiz9M2oxQIFFiPct181fXMae3fw==","signatures":[{"sig":"MEYCIQDWLH/1A9nC3f7J1swGyzJZsLN8Uaup01fY5Fky72Z2KwIhAOl82KKNQDITLa4j+GbCDwTvcsiYJy2L0aGckIgl+l5A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvpI/CRA9TVsSAnZWagAAlPcP/R2Z94LzvwoWZXREUSA9\na4PvZhe8y+qt/DB1l2EKtVQNpYgpX3xRwkV7tcvSaQNxX82zgO6FtjNOirSV\nd06lRT8w6fSwSNhakL/2I32p42oYvGEimTpl68vhGV7lCuLOWnp8qXE8dD7V\ncdCFDzTbzb7DBAP0u4Ha1LfRgOjJ+m37MvorNoLIQ3G/G6vVMNYTBqpmE3WG\nCyQlWvpQUH9zCA3CkMq/bbIo5OBwHL4Soc1c/0rfE+T56gij/AHH/h/eGn0g\niDUw3Qq7cekMcyaIy9Y29vv/xCH5koXoeN9xpBMBD6dQhQNp6EFCFBpSemJF\nganT5J3I3jmyYYfjZM/Y8AmVae0YFBmkj2EFMdbXs9Hbo0VZY6WhyUVgbNlB\nyxaoMTYosCN55IGozdBxlJQF6cB54+xRzwzqWsBUeJozZgGa/WQElYf69Tff\nHiMLt8UuVDKXiWqs/xbka5cxXB3T4qW/HV8xhddiaHYcF7nOEYDa2YkosFTd\noP4Qk4g0+0O7f0jP0t+JRCTO1zRKFGnWpSA/YNp+Eo5NJ6cP2NOrw6zwJMBQ\nppdcnqY6lHjfvE3JIG0ic/B6qHcuM3CvhSXqDe7nC/oBJsrsppo0eFtmQx6C\nBwSW/iqa1VBJ78Jzh2/VNfJhO8yZpNNP4icR2Djv180lYNf4vPwNc8kKvSKI\nqHsl\r\n=DDEA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"528c6617d9ee28a6457854a1175a26b29476be73","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.38","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.38","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.38","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.38","@storybook/components":"5.3.0-alpha.38","@storybook/core-events":"5.3.0-alpha.38","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.38_1572770367094_0.25559479599276047","host":"s3://npm-registry-packages"}},"5.3.0-alpha.39":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.39","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.39","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"881c066e81285822735710298848e65e095f022b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.39.tgz","fileCount":68,"integrity":"sha512-Kd0Ikb4x6rgewhj6gpIQ+olcOdHtZJF0uoKyxUIhLwd34mI1FN+WxlCeXgqW422IBrfwoeYp5/GB7louydjhpQ==","signatures":[{"sig":"MEYCIQD0iq1cwQJLOi4a4IPtdd0gq+ljSTlqpuxSjCWAnncTlwIhANybccDxGRMmqqhugqubUjBLlaprVU1QHvGmeT7z3E5N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwX0sCRA9TVsSAnZWagAAIOUP/RVRbXkmgqwbPefrv+4l\nziZiUEEg4VKkNay4XjtKdzKodW2sJCpIfxGHZs1t3Lzxb1H5yEdYUU71APRU\nxRZ72H9FBGfksc6yFTyfYo05etbbG6xHsjxaPF8BTqWDNYiUYDr2eyrTi4G4\nXXWm3SjZ5BXqp4Ic3+AeNuE/mhMaLP3AF+HxBO49FwpJIer99MPrwEd8TBDe\nt5J1pHH6q6t98zGIAs0Q8p1RyafLSPTvVDhQDchq8WW9p+pgKev681VhrY2H\nLrbb1U0RRSGn/aTLtEGeJ5vEMHR2Vp3oEWsWgLTsC3VvgSFi8g+RMtUdnZ2q\nrr1aNyt4YB45S2WxUYmVA7CR7w1wpCmkAQN2sj2ygYOlbHx0bwz+vqBrgCJQ\ngQfwEnE742Un9K3EehBSSfFM5ugri9pcjRhuOnEDRpMfphue4yHimr/SSwKS\n/tXvulcsLB4qDmASzFtrRvwEFxcKMNpv9pq7hVKO7ZGPoj140DYNEBSB0YJw\nD+NpMHUVPiv5H2KD/B5wJBIDie5WovHZPIUbYQHRoEdLbrjHW4wzc6dNpYYV\nGPQhAX4e8XrrWl04ymsJPzUMSAsw5Fyc9xGg2yjyE8uaEjG8UaV5rKnXtoKQ\nOVIKjLC6BS1AxyZkb/8WfY2eyTdsu3gC7HqBss6s5DohTo2xyz3S1X7/Wwlj\nfkZ4\r\n=1nPS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"8f09ccc687bd5a026ae8b4d3563f4718bf945c65","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.39","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.39","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.39","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.39","@storybook/components":"5.3.0-alpha.39","@storybook/core-events":"5.3.0-alpha.39","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.39_1572961579753_0.2715294788761735","host":"s3://npm-registry-packages"}},"5.3.0-alpha.40":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.40","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.40","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"991fee7bb7462f02f49492cb80590d97b62ee24d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.40.tgz","fileCount":68,"integrity":"sha512-oHppRakZKewvVfCcnLpx15tov4Yj/Odd+c02CLRVLYH80xn4ADD5ZGU9FGy+jc6GnCs8ZmNFbmKCc55f1Ej3ew==","signatures":[{"sig":"MEYCIQD9Lk3WtYocPr4vMC/7+MmOujXgu8+5Q58ZgL/UMLTx/gIhAOf7FSRnvb1ZPOLftqA9kThwRQP8F458gf2WQz19K2DJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwjb6CRA9TVsSAnZWagAATzgP/1EXNA7pgK2DjBtBdQeX\ntV06MzgKYSsTQ7Ds6ZyNVmTLIiXATcLQ695M7ejdqoLX8QOp49ZwZKLCwc8o\ncaN15zO+66lv2qPZYhfU/nfXnKr3vHoHkuxzELt8yxpEnRLZ1X/jUKC1IgtX\nkhZdj13/qGNE5E1+FfmQl5mikn2lwTUfUkLq1MQ5LemC+61Vcm0YkVD3Azhj\nGGC/hI0QBsz1mc7Y4r5KrNoDOrytvAE0KchhZh9jlFKRKSQmvQM1W62Kcbkc\nWD6iS+u37nY4sY3vVIjcJVDxNYfjHJHbR7ExnUqBBqHYaPa29Ze9mlYiQ4dY\nrXrKHl/k6cMNJvhBKkc1GwfqrW/5Vr1sozzgM8ATXCxbIQLBvE+bs/uCkJiK\nHaslBFIR8c5yDT4L8Q74YZNq7nsY12CeCECOM67KcOccvREWA2vXM5MUKGTT\nX7X+DfguKVy0S5G1Ef9z39Hj8mxtbqljkGd00R7krSVNXyzICH9DcZW6Sqqz\nEZ43W6GV1TXJBS8O/oKsNLkrCYr6jDUMcavtnIa75mW78KFGUbpZi18p8Mb+\n2vzWy71RUY0DieWS2jNZYwUVWhKidUZjc0oAFj2MsoPB6670sEJa33/l19IN\nbXMDd7ia5Ri2IeBbH1jGICZt9LC80DxS+mx6GtyIA1jG272lkGEb88nmpRd2\njHk3\r\n=8qvQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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';\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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 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\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":"8741f83b3f6a8e31fb5480f9fe942812d5bc4e00","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.40","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.40","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.40","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.40","@storybook/components":"5.3.0-alpha.40","@storybook/core-events":"5.3.0-alpha.40","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.40_1573009145957_0.20061601636959514","host":"s3://npm-registry-packages"}},"5.3.0-alpha.41":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.41","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.41","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8f260fad0a19ee7be8052dc79ba983221b9328db","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.41.tgz","fileCount":68,"integrity":"sha512-XhVZwqmbZgbIV+8na3mpNeb67Tq8IliMRe8Hjt74/G9VXcYJinHm/WFuJspwceJJj/Ksc3stmIXcgWdYymPu9w==","signatures":[{"sig":"MEQCIFKnS+LskcVKP20aw0AUKr2Yg+z7tCDnSH/pSSqpgzq4AiAvRraKwm8Alg1fRqbfRWa49e3eJfLuZBxjKJRTvT7idg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdw40OCRA9TVsSAnZWagAAN1wP/AhuAR1q+9wYc5+orOsw\n5+na6AByB41HSc5mhOJpP1qQpmqpHXZJsvdQcw7rYr8dIsJi0W57J+Olb6C7\nKeQERI9qYpQiYDuz9ToYEhrgwDL8hMUFYQkuv8ITE1iwD4ctoovQQT4nE/91\npai/frlapl5qhCIroYBSXTc62g8xe2i1ag4AB8E2yc/YSs50ry6kYr+LR+pX\nHmcOegXugbZJODkfEG6spwkOjWnlBTspQa0EoU6KGr1wKeFjSdktSV7Mh7cm\nLQSEszEj6IrnbM1AUZVZ8vUdVXPwoMO0lF9LooW4CQWOrkvVDAhMdhYisxIa\n8/qgRZhSyP0KBVL9mhd075KjwwbwdkFcn6ns2JA3Y1B6266G4aIuOv078d/L\ncI6gIjP1x6RQbb0sCMx5Ag9Z5NCE53bE4dlQRJFyIE555XTstu+FJfkrzMEe\n4StpXIhTH9N4qiYRCvI524JYdPyDoo/VD3NENzIr1pX6nNkh1/b+/Hs4a/tV\ncSdA9s0K61/fOaNAi131XDK1nlWJ7j2pgduj6/e31uAaPEzebLuOAt+TH+WG\nY40soOcrSJ+P+85suUHSvwr+UMkk5LHdYiY110CqlaWTOm25uSvsemkmY3VZ\neC16l0Rqrn2txYyAU7+OlD5ycKQ2LbAjp91XrL/76nVNt/480MpRGr0jU7hr\nbCoj\r\n=KeuR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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\n> You can also provide options as an array like this: `['red', 'blue', 'yellow']`.\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"a46bd1bd89a1e4df9b0eb5f48268742c785e7e8f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.41","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.41","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.41","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.41","@storybook/components":"5.3.0-alpha.41","@storybook/core-events":"5.3.0-alpha.41","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.41_1573096717565_0.5604063112105031","host":"s3://npm-registry-packages"}},"5.3.0-alpha.42":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.42","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.42","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"648051f05d0a566746486cb61bbd3fd35f7fbcce","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.42.tgz","fileCount":68,"integrity":"sha512-sbMfHMtFdsYsdZ2amZwfXrMdcJODWcQig5oNqfch6QG1LCLiC7sfZcGckdxFjCeQPV3ell7A2S//RgM9+8xCYw==","signatures":[{"sig":"MEUCIFyJqqg/L1Uv9b7dqNEdhoTH+seyM2FW8aHR03McaFdVAiEA3OmpdzkEmJGxnQqDnlhBopRoNS4rViYyqOm1uZPCXlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxnNfCRA9TVsSAnZWagAAl9cP+wYlJw84ZGvpG93qIjSW\nOWpvDDC76SKpVSWObIN6xxRPl5xy8gAfj21bCVaWfD8eOefcmVDKialuFB4z\nnskBpUQ9lPsoVs/EECslDPUbxA27l7lpLbD9vtFZD0VtEepobFBbcpQmalXb\nJOqyeq5bZCX+OB0THrUkxhQujS0AZRXyK3bfKNW+AbzqU8P80UgK3RuCi84m\nSqyOlFGRpwhmHNTbclA2w1DBWp6Bz8SI7zpn+hAvsqCDFxnS4grh+ZAa56Kg\neowzL18OJL1r2G1jp9wl5NV4PggEzdufWH7q2rxiRIyWcroahevVkVPp5AsG\nRD/TU9kX/5WB01oZLrYpLG7t59wIWufwxUD5zZiVJ1mW1ruKowZi45m2qr9H\nNc+jjyKxb6Czre/5MC7/Eib3vCErg0ZKk2TOnLegTLyiIiEuZVOEmYphh6Ke\nlERkbkJjR+lYAoMyg/ecpygn9rk5FxRuoR9xdlJ5ButEYwxVrTvqF9s4RiL2\nABcCq6k8lFIb1IQm9qzjZYtrA/X+Ysc/5TTdojLkh1KfPYPldzCyOgBt2gxc\ngKZTB5yeCS+kZqdsG/6sRMDBLnIAMKkzpI0rmAtMzT5/ic3puSwwaiWmbn3G\nHzZ/sh7Zs8mwd0kvHr2XJbxs7KbuHYcdJ4xuAlG67Qhlzy7931qdqsu2A+t/\ni9wb\r\n=4OFL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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\n> You can also provide options as an array like this: `['red', 'blue', 'yellow']`.\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"5242f4f190d2dcc5d4dea6186449ec1547161ea6","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.42","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.42","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.42","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.42","@storybook/components":"5.3.0-alpha.42","@storybook/core-events":"5.3.0-alpha.42","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.42_1573286750935_0.3756366777147897","host":"s3://npm-registry-packages"}},"5.2.6":{"name":"@storybook/addon-knobs","version":"5.2.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.6","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"28b2c74ea26519fef204915142a03bd7476f247c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.6.tgz","fileCount":68,"integrity":"sha512-whEZl6PpUPtOWBhmWlZ11EloxN6ad3WrJk5FyYlg3BcXG/HtlMVogBKdch83SYTT9jhHwbfwKnAng9J3UjgPbQ==","signatures":[{"sig":"MEYCIQDbshu39gxxNMtGXnaoGmtdyNi1x6AjTj+D7eROEG1euAIhALYzOCL/5Q3HsMQacvsZh0zp7SvIA1EehodkbIkwpcd6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1278123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxoxDCRA9TVsSAnZWagAAwH0P/0kLcmKpeWJW44q0+pV1\nOfYDhYFEA4YOHSL7bZJ6ZXtpD/ZtFJJLTwshLgk1yx3koL9TOB7naHE7AzI1\nf9ahIb5q9Ts3UoZG+bo8A0OM36ZGM+RI10a/K0pra9zdJ2iZhm5S1sk0fZkQ\nj8fCwf+nLHXhXHBe1ftsMYKfWV/x1W3yGSdnhSgrsT+/WeIXrxqDzwTRyVQH\nDHbCZy0TTa5/qqF73JWdLwDv2Axx3IxgvOjlAOTt6iBawu0fDXj179hCUJSW\n9C46ZeGZC5DlwoXZ0bRPHWF4d6d8LEfVV88ajfDznhsi6BfVm9NjXWT51RcX\n3ksFOIlIClP6O4IqeU5VzPP7xOBYoOy9izQwbRmLNAmShsuz3coei5+5jjQs\n16AE6Gs3YeWQ7qNX8RA399U00s4hBjyjIx5Y6kAm9tc1s6ncYAJ3i+Yguawf\nr8W6T7MVVPM1FstruGzSvjNc9aDjOAuctEvTASmbG4MFIfx6iIEwYLpZqfG/\norTRQ9oo/Z/1SY/id+wusb8jryORxp6D2bFudEzWrTNB8lmey3RdPuGPgE/z\nsFUP0vfZtEgNsD8LuIlrvQF+tWGW/v+ORASkMsf7zwtLObZBEaloClEFlq64\n+5wv8lShXPDc74N5aS9NQiexlHUMKEP2y7rr1VXSLG83hnWdGuvZCa485MTr\nnAcp\r\n=37Hc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"ec8ef5c144e73ce8f762df03da0ac6c2375c223b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","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","@storybook/api":"5.2.6","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.6","@types/react-color":"^3.0.1","@storybook/client-api":"5.2.6","@storybook/components":"5.2.6","@storybook/core-events":"5.2.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.6_1573293122864_0.42027371445700146","host":"s3://npm-registry-packages"}},"5.3.0-alpha.43":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.43","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.43","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"aa503e10056cf5bd4f448f2649678ba578b146c3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.43.tgz","fileCount":68,"integrity":"sha512-A+LMji9x20In3/6nVx6LF5CO1cumrZZTznvGdmnSALir0MpvIsivQidc3Z6NhwNaHsjXaXUWhmS7CgHAYTaU1Q==","signatures":[{"sig":"MEUCIQCgQP9Ipr23IIXVk85wdq/CdlSUWzc+kQ9f838n9TbicQIgNhq0h12gxEoykDLnj2BdR01paU8SeEX65s7WV/2iJEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYIDCRA9TVsSAnZWagAANhMP/ivsp9eBVvlb3/6gCNlN\nFGJPLAfCYx5jJkvHtIUdWs2yTu2HLCvzuKd2ZLGT+GNfVMEgVKN2jGZu1lvl\ncG7LPye1uBrQBe+tI8K2JldmHZxREReW4RxAj21bPlF3qsAGdda1o14BmQ8K\nL9hoZkQu7zWN4PHROZ9GjZpc8eWW1CuIHu3oQ8P8lptB7UGOCdMEYG95zwTD\nKZC7ZR0RkjB3aHt1hU1t89iRP3eTY6KmP2U7okv2c3m4xvOhV4uS6cupE7rG\nHi8oB0DdKJXQatayHBtRwoRbauc0URHjhfVCxhJ12rDvBWug/P6ymhsIUFqu\nEKXNml6nyQWdUzedpvS6yxmRSZXHSVUgX7lompTzY+dMNW/i8vBQysQSPZUv\n/i/jiJEb3w9k/236UujkoeY/q8I7c5KjIkUTbFvIvE19AjbyFib/pnn0r1au\n/KNuP3ObxgKx8V+6dvRu6bBJq5Qa231yGajedL68ysScZCFU+RYJNii44qzb\nN9b2mF6BQaKTQ2LHm3jjbJRIl1LJWLvsw5Qf43zHdmbRBQPZVaPa/dG6DfYa\nQv2EmWZzMFZrE++USizNvgm+qbm0AAa8ueo03SGBUXgtlR4/71rqQCJVNedF\nTAHoZehNYjFv3Rgsgw5QUpGdsIGaPlIaXd9fyFc7hoShmj55UVGVccuyHgHn\nNWvC\r\n=pT9F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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\n> You can also provide options as an array like this: `['red', 'blue', 'yellow']`.\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"c5aadcc5360831a6635ab5cbe8ec1b3f06670ffd","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.43","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.43","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.43","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.43","@storybook/components":"5.3.0-alpha.43","@storybook/core-events":"5.3.0-alpha.43","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.43_1573487106608_0.20349782298645192","host":"s3://npm-registry-packages"}},"5.3.0-alpha.44":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.44","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.44","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"5153396b48c2a9019650a1d3ac174baa67ad5d4b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.44.tgz","fileCount":68,"integrity":"sha512-YDibrwd11cobnRTHrqtZqURMb+Ax3KQgPToI7Y3CvIVSSjtH+T9fF+m9amkjPD6K9Q0hyZG7UvqJO13ysag8jg==","signatures":[{"sig":"MEUCIQCft0dKwixfG+UW1o2nyW3BI87MSq1K5EOjftRG8gw9MwIgK5drv9lN0KZmCGlq1FvPFkDTCUVVf7GhoVmy8lLhloM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdy1MfCRA9TVsSAnZWagAAHG4P/1HYjrxoShHJHjbMDFCs\n3LXGL6ov7whUyXqx8GrglAIg9PwCxS/vQcbiQwiU72P636iPJlMdPybkdfV8\ndwKvZ8uw5GvPdPagYtBAL/WF5EHbooXs5q+PRN9FoCRcSetmP+78mHnIGER5\n16TfO2yQQTmDlUh8z3hl3lWlEiq9YoAS/gEBXAxmO+T/rcRxKmd6h4yhN3WV\n7BMdpW4lh58kGBEgZNMs8Y10FXO2YseqrVSGypLxo0IUr4RCziXCo0kt8RRl\nCXJwMIW5984Gh9+wYOA9NDjv3iER8YXMzocN3+oPVV+SEH9Iq82z2XIRNKvQ\n7JCSfmfY5fZusqOEDVf3j6EBZ8alqfjJLZ3FQjr22c4DCOz/vgOVnDKFOXVO\nApNwOrdEOfezF+FX64YyIwXL/yqVt3GLq3s73ZJsJCWxwjqWsOQIrUuBNgI/\nQZU2ZjyrbE9qHBQiBmJguYKUNmmVF3+KOrkdvtn140j+st5Hu+bDSJdBybLi\nUJDePkVOd/XVWXLYNYmNKbT7qz8t2Ukon8EV3vnOSbohvHYJg5t7r/XMzUAu\nzUSfEJXTpQTXh0yF+Xvnjd33dQ+RuBWeWKPx/uBKgncKeOzMx9eLLI7pFxAA\n3n5WTsN7GK/GEWOsVSRWV6UjIc+aRx4GgYjPX1roUoOnnzfQ5GxKJWfPSBpb\nUnFW\r\n=SmX+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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\n> You can also provide options as an array like this: `['red', 'blue', 'yellow']`.\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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"be73c10751f6d6513b857ab6049b18249e1d158a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.44","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.44","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.44","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.44","@storybook/components":"5.3.0-alpha.44","@storybook/core-events":"5.3.0-alpha.44","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.44_1573606174964_0.8684371818578525","host":"s3://npm-registry-packages"}},"5.3.0-alpha.45":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.45","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.45","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"515e2f21bd746316091b9b7f4c329c7491cdeef9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.45.tgz","fileCount":68,"integrity":"sha512-DqRRv9JyJ+4EXfYn5K7hhcEZVELjauhbWPqmHACAzjdx4nTVKc47lvGfXdztgEsU0Hk36e/64NQxeteujnHk0g==","signatures":[{"sig":"MEQCIBp3GqVmMPinPxUDlgSLZonMpq/FaXpeOiyN1JHds/SvAiAjww61uD9CYEvfh7xMmLZDcR03H+WMutb0ibh3kk046A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1154669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzSAyCRA9TVsSAnZWagAAW+cP+QFP+PXK0iCfxXprlAWn\nKBBYv3Q8LiF3C7Ef0lfY45K5d3alGFhHHFk/InDRo57XLLOiICYiowCEeYJd\n4l2vFU0owwvyewyZGL80Bt1u4V82JM+9uSgbgEBB/CNhEo8JDJUy0R8aSQQc\n0MPrFW4gK+FM/t2SVg0Tn23V7ayEIT3ADzANC1b+C3EfcjNMX5Gaf4ExzHGM\nmUmUb4yLbFbfNZcWGHiIjE4diAyCUn72nv7/ekXlJjKmTd9/iwFHY/mEboPu\nHNQw3wbSocPDgzh25KVtLpMghFBTOMPYTh52fVyWkHmvIj83PVIUX90hGRuC\nHwNiF3cw6Rz+ma+Q+n8JJZSyDG22RBuJxM/TwGL5RlfFzl0owRC5rmjaRUUx\niIs1R/AutNpF8MVEgNVo6qrxWZBYN+xtoZi6XXN9iK1RBwAdvBgIQu4vEb3Y\nY7ha0WUDHDZEqMkPkNdq9ntqPvKzJKaLUsbwLlyrC9fa60Lkt9rfRbUT3iO/\n6w5UTHb2QiXE2IgT9chN8L6F1DEvmeFuHY1rMU7HpAQmdW1oiCV/8dPIhi6i\nDlOUw89r8DIDv+fW3z1XtWT3IfKDKigChSLmrMwaQrygYv6rx0I+Do50+NLx\nWLJmewQzmiDcy9iu561VYmig8kX3sNwNVeRoSTjliqMoXAhx4kJgCGwyh1Pf\n0p26\r\n=KRSP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"3e45911bea0aa2fbf8cbbaee5d948376ff793678","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.45","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.45","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.45","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.45","@storybook/components":"5.3.0-alpha.45","@storybook/core-events":"5.3.0-alpha.45","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.45_1573724209761_0.7161517028451998","host":"s3://npm-registry-packages"}},"5.3.0-alpha.46":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.46","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.46","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"20ce131f03274ac7c3bf496e64b0094f534c0ea0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.46.tgz","fileCount":68,"integrity":"sha512-pdksRqbN3zNN5s1COlohoo/zw3w1jbRBM9pVmJYO9cVY8JLpWCGy6YS+9xdJbIrJ5ZtMXOz6M6PaKu1lBZlldg==","signatures":[{"sig":"MEUCIB/ljRICaj71p0xuJtE7B8TV3ALpg98SkD8g2A7VnG5mAiEAlLJkG2K8QMALgYUOXYcMV5eQ9+iIks6+DMbV0ETltcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1154669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzx8HCRA9TVsSAnZWagAA4QwP/2J1ci/xkpQq34D3AmNO\nP1ZuXjj+hs9OS3U7454uItkmw9N2DYMvmbSuzoD4nXSIIfZeHZuFDVnsMUkx\nSjD/aui228PDfJPQgXLrCO5pkhTTxoh41Kb8CnsSLeBGq/WjG9MuZO2cc7KR\nySoK8ccsZsFB0aZNgRfS9aHlgR4OpCM43PXeoJjDSjcvdULZzLJbhVwMdbDm\n5bzuJMTQR/Gx8oA0ERnaySWsx1IFMu/03NU4nU6mVc2z4yEDQPX+LS+PiJTC\nZ4JNXquZoOhZ5H6MWqjQQVFN1rcanSjyo6COCOfUug8QeTRLlP/51kYRKd1b\n5TCPe4vxBglLgbPW0MGyfs5b8Pgo8JI9XPc5D3yaxBD5ufLXtcaJAk9OkiS6\ntzjl69OUutI+X3Ps0vkVMuDY8HPbeaCETPLHllSbBrbADwAKjJI4cwSkcsOC\nIHf2Hxn9sLoT8mlVolOjURQufV8VJunMzN69LEfchqNkew8uQrI35wrZlJP+\nb1gjMYAyKUKuOGpaWXSTrqVOq03oCung3tI0koQZA9/adwn0BRUHP3RfqjgK\nil6rs5kDxyNYCvDrdcCfH7yfJ1UbHIWGctCVzzpLPbyDF/nlWG8rC5bTcJWL\njwu0B1VUz5V4HDhBZ6t6SDCc2F78gmjXnA31a5GdpWcFtNQEUfoNtJqJpL5E\noEUE\r\n=lMjg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"431322bbd9c7232984626283208ae890eeb1b8ec","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.3/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.46","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.46","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.46","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.46","@storybook/components":"5.3.0-alpha.46","@storybook/core-events":"5.3.0-alpha.46","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.46_1573854983396_0.02853493197309187","host":"s3://npm-registry-packages"}},"5.3.0-alpha.47":{"name":"@storybook/addon-knobs","version":"5.3.0-alpha.47","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-alpha.47","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c195a807c2f8f09e9c772bbb08585b8255a10619","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-alpha.47.tgz","fileCount":68,"integrity":"sha512-OL8RgNjafsQY4kjzrZEocFXK3E6xw72v0eYul5s9ZG0xqW3dDqvARN97sfXF8u25gaK4w1nxCgnX06SxI0p9jQ==","signatures":[{"sig":"MEUCIQCeU9pYhGdjn1P4untPd4fy+hEPR+JqsybKdkYtbGwzKgIgEBpUg4FccNZcmM4Z0V2ZLr1Pfki9fKcNQEGAkDqxkvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdz/QhCRA9TVsSAnZWagAADtkP/13fQRR3iS+AK7fTe5Zo\n7pYORMtXPqa5ISEpBKNY29ojk6YzP7BO85rQm9Hh4ZIpLYYM5a51ypasfvvx\nWE2iXC40mQDc6JEhnlYq4nvumNpKvJ/6cq5hWIYRWOUfmQqqUJcdyj2NBBVI\n09Xo3ar1TQCUgqUbpN912j3i10/9iw7NZwleiIwofPomARkoEmbwwbhKzMtN\nVQr9Nx2VThNjTquSO3Ta/7SdJzdlC4Y9NCMNQy+lMixOD9Z41nRgJqdQcJoP\nYVra04rGXn46cBzVhYqLlOs1NK9KUePBULE68vi+xaLUxI03s9ud0ge37L6Y\nC7i5PEDBOXHceG9xnAmA064XTZtHgWeQ/keoMOnRMr/i0OvPEAIWIUl2VDas\nVS7/YqM7M6g2YierwEhO5j6TTLUYSIibzmZz5PityJhzW3oWasGq4uMnJaQv\nrrql2S0LjkRXG7rCVYYBu8y8QqSnu5hPX9fRQEX2k3LZoUl44fOabKvjnxcf\nA6TLbegNHvZ6wrvk9cK9CCkXR++5mhRlsDIKZzf7qW+JwVIHKwwyv9OPsJHk\nJdNId+fiwq8mW7Cdddtjtp1Xd1LLKn6AoFEHlOvDMkVqPk2YKjR6kgy8aHBZ\n13rVWwUf+3u5CTo2BuIFdIV79ZqjZYj+b7UUXvTC1BjRQz2ThcXyFS0KNIcs\nZ/4G\r\n=4So0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"aa97d03bce1a21158383d13a2e80c8bc29be4109","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-alpha.47","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-alpha.47","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-alpha.47","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-alpha.47","@storybook/components":"5.3.0-alpha.47","@storybook/core-events":"5.3.0-alpha.47","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-alpha.47_1573909535725_0.8919571679938079","host":"s3://npm-registry-packages"}},"5.3.0-beta.0":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.0","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e04747eb1e4c311eb17803009747d43b5cbb37b2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.0.tgz","fileCount":68,"integrity":"sha512-WHSLCLGucmr/QwIblnZa2Qihmi5LIyzcs/NOR0dhq1K4tXVPPOM4rTING+TiBsWJwbM8E3gDGYke9Bzj4YZJig==","signatures":[{"sig":"MEQCIBKy665Ep3QqBVpUtrt20+895m03yS83cDw0Y8Ocr4sWAiB2ByGVXmQ9MfH7o/H0OhaqmqqSDOacc1UhQHBo39Pz3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0BbzCRA9TVsSAnZWagAAls8P/3INQHi8rQlhgPIxnJew\nMHW4gyLLoSveTJt2D5vALQnLxF+655EbADPkxI2FVfIIZ8yHsz7hb6Q6Rf+S\nVTS7ps/XMBPJ8Xc7JIh2p3ragitNbzTJ2cDBWzIfr/5tyPDGxoysEG7H4aNf\nMAijTq7kHFmNOdGuLU8t5W5P5f6zpAq7W4sQq+joyeN500QuQpL0Vi8omwdV\nt+SQVpypoYJuOXN2UEOJRmzidd0iRE3mXAOIYW5palLlQI5u3+3kEJuO56Dc\n3Vciqd83G3MqakA5CjLc8hZXH/xbLlXiPvGv6L3Qk1NKRwuPCmF97N/jwp6g\nbC8W8riqZ6+XYlwWjjZS9y+JnjfL2RXr9C/lGhjzVNiOVQpw+Y9O8mAtIboI\nQeBZG/pbGpgTEHFUqNN5QuZP3TqsaBnECmbvxeyRHE0hCa7sPYRGGC/WtTV4\nVURmuCvViFTCEM25+eTbQ7tOlMNErWiB/QwA4wBiXfaNTIdcKqVwNmAfLy2B\nd7wk0igouYmEM5GDFP3MhAMj6vPCuWjjmHff+GElkZSh83f8/LwRnOgbagXl\nfXLGwCbWVCesyNHh5bYJ1bwQ0b842PuLaSCT6jJYK+DNRpf7M6EKm1c64d5B\n9uJDANrV8HNvd628rbFyNkP4iOvIlpMKIYtX0XRrksjIu90fiQbo/7eHCbNE\nq4D6\r\n=Kffp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"f57888b0e3c3d457bc25407af0b885fe1012aed5","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.0","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.0","@storybook/components":"5.3.0-beta.0","@storybook/core-events":"5.3.0-beta.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.0_1573918451496_0.9064638151012061","host":"s3://npm-registry-packages"}},"5.3.0-beta.1":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.1","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e349497fc308081db64ab0ed14335848af740430","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.1.tgz","fileCount":68,"integrity":"sha512-ghIHjNN38lhDLaii1lono+cbZWqvrzzjMfJDg+m1oBJ5Vgx+qfBIt/uWky371Z3aK7wvKhf48bDHKB7z5MVzPg==","signatures":[{"sig":"MEUCIEE4bas3gDiP0RkLeKMbxNt2qrMTHRJqYxkrBgI6MqrSAiEAunKE8C+6g8S9SHJpFsgZqOvw9TjDZSl/R05E8+hEYKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0qzZCRA9TVsSAnZWagAA8XcP/0aDPy47dNLwnI9UxgiQ\neO7TdWSOUlKS1/CImLh+W+cNyLe5xyb7mKR2ZPDwwy0gBNdP7gtFcazssXhD\nBkBFJWNvFhFvVlsRj3mqsI9xx+xDeVntQvDOu31D1zVheB7WsBPXP7g5HP88\nV5ykLcg9CyBbjqjNfbwCAK/KADaIbqKLkvIFsX2h1j+qHQrx63ZMby0QjV9d\nS0ZzuTXbibZVhJMx61fWgFKFaklRcyGab/Gd33cuNMypYtrmtDEO0BE1fPi+\nqWaWDJdNOeOrxXZh44gwXu3l2ujrt26JkHCeWho4Y7AGzS/7yIprUw4RK9E2\n2hrJscJffWqfZi6AErYpR4M68jB/b8ME9eKUYPrgppzyq363xT55aeGjBetQ\n7p8Tk5SwQH5u+wZjD0nHmo89oQ7vfHC+Dr8IbdAW20GopsufVQ4MTeCIrV6l\nM5nr1Aa0QM09SAyAkvI2Kdo7U2cvLpzNJmIdJn6WO7X7F3ajQLevuuqg6+5E\noP3C0dlE7ClMbTdNWLfhJ8ncesJo1jD1vlEIPZ3aWIS05dCFY+yASf4+KhrX\nYQC+7cVpk943M1AR8PAL3Xt1Gi2UY1zAT4gS0OGOhO5IWEJ3TGDOjZOzYIJ3\nWSh3wSh0hzYYm1POCQiMvz1x5GI9hgpLbYJBDHDUHaRGB/SKeVObFQAABvSI\nkrwL\r\n=d26H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"93002b5e79b34da66b10c7e8b6e0f278661a039a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.1","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.1","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.1","@storybook/components":"5.3.0-beta.1","@storybook/core-events":"5.3.0-beta.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.1_1574087897157_0.2340544598306742","host":"s3://npm-registry-packages"}},"5.3.0-beta.2":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.2","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"bbf10efab4cefe07f1492673bf7dc5f7a49a4354","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.2.tgz","fileCount":68,"integrity":"sha512-MZTx26wEaxx3TJIPtxh+VSQrTvfmfEbsmPuDdU7sVNA/okG0As2qETVrQZpW1elb5YuZ5+iZ7f0pqOCjIxcW1A==","signatures":[{"sig":"MEUCIQDmn3tEIaNiRiWffX/9mdroXYCIdI9j9GNbqggQkCe6ZAIgeHC50gkleNTEPouZZfo55bOP2VDfhodJOgD5SglPVCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd08QCCRA9TVsSAnZWagAAgMAP/3n8rPY6FXWbVjOpiFmy\n04Y0XvGQCwL3+gUURZNokMUqE37Mhxq/eMy0NoA/Ohlx7joifkdUIXIvWvLB\nEc5A2j6ZjGGh6h+gpy42pKfQIfKMawMqBtSXKYjIyRUWyPy7UWEIrlLLxgG+\na0sWOjXY9a6CWZdRdbS3AyO97er7JtOQT9BOwlsn1RyHI02ov9zFm1D/Lty3\njKUjFMnHBzKk6MI9Ahmj+ACzLuUmVMWXqJfrnQlqYvoolWNCUgo/LpoMmO8A\njWu9ejSyt1g4lXgoZ3MYI8RYzblE+EydTJN4zo3kTc+xTqxvNYA8micSx6n+\nmJ15zA+Et/+r3nasmEcdELArh8bEy3kcmDxlRwdn2BCFCuhlUUwvWMK7yd9Z\nmi32T3MNEQ7MaePf8lT4nhDhpu77nNMenH5I2+t5+0fGqpgPVCcPGKmDvcP7\nhGWF92SxAv/l1ETV7YBGb4VWTVBsKLoL1jcJfoUEcVefI6D61HOhSYgod6Fv\nDcZ8bA6goUVgrBFjDWf7wSDKBMC58GwzNQI8DIEYpHGqRd357AAifD2+gOqk\n9HjPNThF5DP8uD83PSe4wTy9W8bYQR5sqBU3q56xscZ6RMVifinWE4Ml0ZwO\nAVssO6iulyryz6qHOAkc0fdQChr1Ljle4d1lR+SWTjJJ6MNzWUDaalsvBVDw\nNiUO\r\n=U9eG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"27dbfef1d83b0ddfa3d1e9510212ac5a2b82e25f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.2","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.2","@storybook/components":"5.3.0-beta.2","@storybook/core-events":"5.3.0-beta.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.2_1574159362428_0.5735161736364078","host":"s3://npm-registry-packages"}},"5.3.0-beta.3":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.3","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f942c49678326a601f843e15b6150e03e04093b9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.3.tgz","fileCount":68,"integrity":"sha512-yb8l90UAasMXvMC5X80rNF354CC/BSL5Doqbp0fDC7yBoruqR6xVXepScHyl83wrJ2yaWy3BF/c354W6aXy/VA==","signatures":[{"sig":"MEQCIGpXSDlJtLPnBzf8KfJwVuEIhAH9BBDi7I20slGUTcnTAiAJYoeclT0FAO6KpArBvWg2z/Iurb5T4FZK7tVuP6btDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1jMBCRA9TVsSAnZWagAAYRkP/08fV1G6jD8YnRciUOky\n8sX0BWEMvMK/5XB6WeejvlpAkSIlOSsnOVson0Xhw/gytRBsYmKMw3G5mANH\nhPeJK9Spq5XBDU7i7uvbCM1Uo4EDSPlPxEiHbyJ4BoAWDWlokQfBn8vNHBEG\np2XxUkxD0R/b7cQ3OyZjpjOflbW/7lNsUVOy+6deTJVymcquW20w/HsMlIUM\ng8GJcNvz4Lr3KMs/b+6bFgrgxeLyorpYWXrgsK1alVNDIijQjjCNoRa94VCB\n/OsARaXByB+MVBPL1K3JbcS2LpqW+U3wihUNCHKUTCK+s5Gb3nHPCUzktJUD\n4rEEu/dYxLZMedtuSEAc/H7HE475Lm/A1AfZyj3QmjUCco+tF+KYDM5tARxy\nfjA5gy5IoEvWyUnNlrGDiu1BLaYjc37L60eV/1RYSrFL+gbS1spN0P9jePBM\n1p0OXwYk5N1WRGJ9lBXzY/Mkfh17TrhqBA76CBTjZmdA8+GiuNJvquk79KHb\ncgJajzt9ZESuoTq7iCGwnldh6t3VA1vQogOOxSu4waRT8r/E2hR9ETqsKpHF\n8RjKE1ayH1iZ89cRZIvbwrc6zI271VJsZNcI9wRpBIAj3Qh5c4J+o9ABm/Wn\nO5WeDt6cXd/KB3aVLw30vg1m5X8ipaUeVbL0uum9ZoshXhvGJhaqXxtAFXcM\njxMf\r\n=qYuC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"6472a3735300cd43ed4e34c9d4316efc41f3f043","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.18.4/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.3","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.3","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.3","@storybook/components":"5.3.0-beta.3","@storybook/core-events":"5.3.0-beta.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.3_1574318848632_0.7554899633927994","host":"s3://npm-registry-packages"}},"5.3.0-beta.6":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.6","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"93960f8f89450199a9aef80a3b3e2cf195b77597","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.6.tgz","fileCount":68,"integrity":"sha512-Y3vk46U3YsFleA2fKq9aU5Ytfh7ku7QRCFbT4JPYnLCcxmobS1nWAwFycm7vkMklUDOTXLCSfodbm60OJ9u9og==","signatures":[{"sig":"MEQCIA2bprjJ1x9MVfBtbT8fOhB9ei3ZT2n6Tb1GW4l9Sx8dAiBRidNC8BWKtp70TFXNzbUNxMG1ZuG9PVOIhbw9nYjU2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2kYzCRA9TVsSAnZWagAAfSoP/05v5QYzI80KIqTE2zAR\nb06buUG6kuJugl92wBNXRA/p9ljdJeLr3HLrIq73TrXFAM+LqiX1sqFudmhj\nzVbnWbq147vkqP+XrQLBU0vPvOzs7TVIwdGCdCl9lWT4u4H87g89WdKdtxmB\n1pvQY5D0EW1E1iWHTKT6y04dBXeW8G3PxXLtoftmOE4Y7uDvlxPtw2wwqI0Q\nz0/OO43dyFIJy58XpGB16pST+8NqqeoMNmZwzklFmQk7z7MIkQB507xO8bh/\nt/P/38YSq5ErFlZHRIL/iPDfh3R0qVgtTTB72xDE1jYDfYSKJpwZ0003znVa\nODOye1mYFN5I8IHbAL8G8XcmJL+VQBU+/2n5mj8ORVBtADA3pktICDpbXggE\nl80me2pd23aOnGiraJMQ1UFEMR0/Pf+2NBKGsfq4m/ncAVwLSG/2bwY9er7a\nReW6ftbAQSPfZo7MHcC9FSXLwF4D3TADt9+jzPP3DI5HN5vUJLRafBKCVhXb\neZqpeTBdK+Lf00sdPf70HiJq33lcLGZZeKiYgVuuhsJ33xyz9ppZxgfp+ZMV\nK9i2voYcFsOVD3pLLyw2UZvx7oflOcw3QK+sbTICxvw/ojcsKJ4nnlGkIHAn\nXgIu6jlDGMxbhxKituvjRWgdtaq/MMQF3Rj5WPLc3jh8jbnc3PV0LUYN5TuI\nTE4R\r\n=c2D+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"7256fe638b4f7a38b39552470189fef4604b834b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.6","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.6","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.6","@storybook/components":"5.3.0-beta.6","@storybook/core-events":"5.3.0-beta.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.6_1574585907026_0.1159609605342109","host":"s3://npm-registry-packages"}},"5.3.0-beta.8":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.8","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d668b0f90a4a6e52a307aa6a088f44ec211c1ed6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.8.tgz","fileCount":68,"integrity":"sha512-y7awzuuP6ek+Aoz4e2gTD9vhOx5blLaT5H7HigU/j/RZOtpehNtakZ9j+iwLqEb6h9LfsGJAXNqZbhCfopZwJw==","signatures":[{"sig":"MEUCIQDMl48L6PlwNPYNec8Ke2c8/tpFJ5JxPwKy2IzyfqXpgAIgeq22tzszQ14uSdVE5madb+zhfA6dXbZ8mkof1RMQDOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3HpOCRA9TVsSAnZWagAAZD8P/1ZAhEiYt8q3sHjIt8ZY\n/boM2KQwGVUzCGqgjyW0CkAMlG8LLO60ipBRB/LcgCstJtmNqYcY0R7kZbg5\nuEgsIzaDDIYEFfl0nsXgRNX9ZYobbUXDPN6l7bUrhPQs8NZlU8NLZD+h3y2O\n1HBIgAQ+SMmK1ZjuqaVB765fE75lrMXZrTETsPz774oRLIX53QezTUb5Geth\nB6T3ba2JR8XgX2DLtRBiNJUsqzoAL/N8jsYkBaXFhoSkKxJ5EwS2uGoT8R1+\nH7SiHlVrKwnFZoSshCyD6UUw3M3n6SsAc1BEOL8h/Uf2xsaI4uU5CerOK/a3\nQ98eQ0eC5h/NdMBbdqrCeVA0oq/t7EqjRFpEj+MQrfZPeWxURsKAvBBYSnit\n12NbYjnCRl6qgX+F7yzG0F2+mC93oeLDSyHlAhpcPIClBk2ogZVXIajhsL1+\nQ9gW4pe3sR25xqnCCcOF17ALYsb+sorwuB89eFHo9wV+MTPkZjsWCb1KDv+N\nbkAF0n3gFinpKg1bVkyYHr9Szw0px4G+6Ebdu9Sen+IrkdvNeE7ha9fvMe9p\nVDzLpGQLH1AAmNTp5CT6HIvdrkWmCvSaS0cMeOhz9dcsPuaJ5i27tBb2kN7r\nOkGNC6onno6M8MegDENT9v8dYR8oH1iQM2UNthdnvdmqOF11GVPwMqwSfFnP\nbG2h\r\n=uPSG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"c6332f5a080dd32aac8da171e122ccbb9df9a2e3","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.8","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.8","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.8","@storybook/components":"5.3.0-beta.8","@storybook/core-events":"5.3.0-beta.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.8_1574730318396_0.12008613840206417","host":"s3://npm-registry-packages"}},"5.3.0-beta.9":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.9","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0b18bed472fce9fc9454f895fa0e270eb90d320f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.9.tgz","fileCount":68,"integrity":"sha512-tb3zs46s6lF5SEZEpQA/GF9VFES1XwvrqRx4TsV7R6NdLgsd72pyI/paN37mo7cGP+JWi2ftgtFFUW3R3YGXqA==","signatures":[{"sig":"MEUCIQDZQjrovX78v0w4XewEAtYZJfYr3IP6XNJlcXQzdS3PHQIge4X2/yH9IAe7lF+Zf3DSRBzAob8qyN++E8Et44LfDUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3PZDCRA9TVsSAnZWagAAXHEP/3q1cvyuYPrwGNBKrL+J\nSgkqOr88012MVy6lOsQUFWiE7ttKTz7ddWJca++py0gpMfXTdqkZTOfBcxhj\nvAjqCC98qcOMLEGV2PW03CpOMq//sPV7xTfGE/aEoAyXZyKueuA+pjF1+Luw\nutJzqIeBS7MOAHcj4LihQU6/F2ST5J6Dpdsr5ZFJsgR86IcHBfnAfRYheCzT\nRYRLGNGHzxaHB68d1P0wQkYjAnbwNzvGEQfCulz3ja1OTvLY5F72zZKcMykX\ny+OCettKelDAfQulSx+StCKJripwjVaaQlHdJpTzOf6cS2W4q2QlAe5u9AUJ\n2snWW0nhyHL/HJsMLfUK1jw2OFVNyvenlgU8Q9wcsjgNSApdkjVnguDsRJNJ\n/+wegKYq8/a8XJgrO6fwCvmFY9wAiSxgWmgoKnGFIylhV9VqYkVgwvdBg28a\na2scOxDkuKP4/57IBQotQkC1yuXfG4DXtPEh0HqAJ3ZjxzYkZNmxDol0NzDJ\nQB2pZbVIpueT8mglRcuyR47sceVUtwhay8zh/1nJfsSyiNe5R5NBEXJDf5Nv\neaIckS1O3upwGi+6ZcFJzMUsYizonZX52nGynG2JLV0j+/auX7XJCwKvK7Vr\nrx1zV085tza3paHIbo3EuU9UV8j/zTbg4ENDiS7PVi4VjBhSQy7AC3xp5y1b\nbOZD\r\n=W2+y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"82c574db7837a5f748e47a5dba1efacbb0214689","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.9","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.9","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.9","@storybook/components":"5.3.0-beta.9","@storybook/core-events":"5.3.0-beta.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.9_1574762050801_0.721445705542962","host":"s3://npm-registry-packages"}},"5.3.0-beta.10":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.10","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e7cd4c937475a2d1f95e9d47ed7c67544701e881","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.10.tgz","fileCount":68,"integrity":"sha512-ibQoHVLQlvLwbC/Xndm3jKdvpK0rkr/HcjGh/1R0jR5BHTVIJzsTI6JxhDVD6gPNqwLVNXz+hFgIigvQ/JpKBQ==","signatures":[{"sig":"MEYCIQD/Yz8E8K9eA3GihR4pG0OdlLEAjfORIr7vrAmbd0SRjAIhAJ6fi4MIxVxPyrI1RTCGwMXb/nYbQVoizRdF5ssyJS00","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dCwCRA9TVsSAnZWagAAljIP/0VpxE20eOxpksat82yn\nOHEgT+fnWNuerXUoxOHX+URRU4kA+8g0vAWGELYtLebMNKl3mBQZVOUdM81L\nBRiXPSGwYQsJ0qznel5sI8c387QgESuOgqiWAKSGw9znYvwDHThY3kSQ/2mD\nt2ILElhAv9AhQHd7RKZDLt3Wf+kn49BAFalCkFrfQVTpgZr8WMXTH0UwAjel\n6fBVW89g1ExLgjUkKyD0Z5Eq4zrKX5wmW3laXoJgidG3vp9IfhNvgtN5/C7y\nBv44G2+d1Y6bj3RhR+HZGS6RNRCwu6Dz2oOVKUEk1oytD2eTXCnEqCCnUZzy\n4nFx0AoiAkuTf6hoT2skzzMzAKPx5PIxa48Q/hTOL35lFQqst743Ka7KMQPZ\nKJQyUNa6uOuE7ozyKM9NTgb9cYYeMzaJMQulu54Wu5Ix+Vev0Z2doAehPQ8Y\nW2K0fmzqhAdp/WjmXT3CtJzkl3n5W3eP19EWKE9FLLrjsNOLbtxJju7AKicQ\n+MLkCfniZ/Q7RnqJ414kPsbLZdHBvN5AsUwWL2d1GmrTj6IjSbviTuLagAP/\n6B6JTmyvZnhfcjpHEvjBcvvUwboT3PRMrTHDAP/XyG7o/Cpedk5T0DfoBu85\n6gyb1y2g/lpCRDDgmOmzCk6jFCQxvPsEHAnBvl+sRHrkVneOyyImyreCAAS1\nOrN5\r\n=GKVB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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\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 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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </button>\n);\n\n// Knobs as dynamic variables.\nexport const asDynamicVariables = () => {\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 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```\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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 { 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":"e098a12bf89f4a50b991c5aa400dfbcaea03706d","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.10","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.10","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.10","@storybook/components":"5.3.0-beta.10","@storybook/core-events":"5.3.0-beta.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.10_1574817967784_0.14734008998248016","host":"s3://npm-registry-packages"}},"5.3.0-beta.11":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.11","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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8042ccbd05c5704dd54ca09dbbc0f39161c55504","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.11.tgz","fileCount":68,"integrity":"sha512-bOCyGsWgT+728g2Pq/KImdbo5znr/Fei5O9wEbe9bRgl5Pgys+9y5Bqa4bqyXm8iF40bGawm5DTMN/uB9uD7tg==","signatures":[{"sig":"MEQCIFBHXnRrIx3Wn63MP1QjMB28UhWpPNoF8L2uufWBWYZxAiA7bI9vwxKp6FjwIfKFWZU47JInf17JFSYYdnRPc2ZVvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3wMqCRA9TVsSAnZWagAAXHoQAIVgu9OLAG3+h8W3cW6H\nX1OxYOxxga9el51/6+5FRPpZi1YPPr3A3DOYjbxjHREnNdwzO83wSKvCqI4x\nwEQ9fM1/UU2ro+rcfbhq6DFFTzC8AzI/UDuLiHvKzrpisxnXNAYVqj2JYRRP\nlOHNxy4iWhU+nwJ1l6jrk8SnSYtS2p3V3lYxGmDvRdS6LQjiSZThTFsGpzr0\n2xjBisRtVTwVa3l/yTp10lL6kLr+gLaMPoxqzqUBKiljhXOWcIXKT+gZsGxr\n/01R3UGlaFMe3L5G0GIeyx3DAv2qHZTcr6sKnHE4jduHXLiOZqHGd5eUUARN\n7TpaxG4dypApVSCs3ZMITPGt/RmBCMpycSyJFXNRFCR2PH2TDvL7xMEX+MUG\nktmYSc5qZuvwc6OGmSXJc9SSJyYPA3ypk1HyUdwKlGGrK8LpGorQ9SLxek+F\nUxom1VuvSafB8ZlRf+pmSHPmgPgq/NektyU+j+L+C6v7Uq3euw/Pjn7G7n2L\ngZYxXJ7XPKerTvwB+46DBlqL87xUUZ1QZ1VxvTz+7fMCweMVq52hATGWcrfq\nwdUx1+KlLCW2bhQjCMQv/fBRfRnsikPLBzM+ElSH6BPbUX2vodOxocROx5ir\nsHHIL3+67ve/hU4affY57h/hSGCjUKQxDA5jq69sQlcs88kydEYu0d1cbcqZ\n+FHL\r\n=CxI1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"51b1739038f6612b7cc6366c49e4a30c21747f1b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.11","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.11","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.11","@storybook/components":"5.3.0-beta.11","@storybook/core-events":"5.3.0-beta.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.11_1574896425657_0.9298316186017419","host":"s3://npm-registry-packages"}},"5.3.0-beta.12":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.12","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"420604498afdb0286a7e3a927892a84b4cf6bc10","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.12.tgz","fileCount":68,"integrity":"sha512-Ica+spIWUuZmbSRARSpvxlL8+TY/u9DfbK6rGmWsLGP27czewcVsMeZNH7e+IkExE84lseu1Ne6ItP+79NBMIA==","signatures":[{"sig":"MEYCIQDa9vqEwRM38VOAaX/y6nEF1LU38k1JGriubcEUkbn1mwIhALRvzNOtmAXUALfT+vDgYPXybAVnsphhPvFrt7xlmvPB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3/+pCRA9TVsSAnZWagAAJK0P/3JF9SihDUEYzMRTUIJZ\nGfZnaIqHHtYU8rEkx21/pgDpNHV2FQJ7QNz5/tpriJdtmg+X/qXKgNbgx/66\nrwWNo+82j/dsjB3rGCMXP7Cb8Ws8Yrou4EjUXPyyzvB7xusJ9dL2ne8DTQ09\nUfRAEvCkGlGaaTkLp8m2xJmGF0OAM+b1/qdnbQDqd/b0FoQ1zGTr3Dl+0NWA\nd2NoYiZ8KPv3y0gXYOvGi/KBAUHd2DoW+iHSkJV0CEU1SxHZKsFuH/8OZfbb\nqVcCF0kVbz3eVepomm0BrrQ8d/wnzA0gYOY7u9awe1TeS86x/w+4Qhj/OdLK\nuHrwCSdNp4eEpeEGNc0a9r4bUgWWRMAepor3KCS9QQPOiML+I9BkJkHjNd1f\nWDS+fu09Y+jZvNXgzUKuirranuFgY3q8E06W+EYWY6os5mzsx4Gl5GgwQsEX\n6uvCDkRxHOrSyU+/Pd4i0PBbGtHhPsMchtpHisaECrHUkx0pDi0QDHHyw3JO\n/hLJDyi+hylBXAwt359sTy5VG1op5URWvbJXWnxr/DImMh0lzBWS9gP9DrUh\nBZd/UhIGSX74tPeR1Zpzt3IVIYIsSyJ289deIKTocPFFgTAuyNOVQ1dY1BlP\nPHIINUIw8ktdSTmLTZvCwivR9AbSkOu+Sb9vuiileOL4eQT+p+1YGnv8wMc4\nRFvz\r\n=hUT2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"0577c421a7c7d4fd1f9c03ff22cd1cee0b55cedf","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.12","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.12","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.12","@storybook/components":"5.3.0-beta.12","@storybook/core-events":"5.3.0-beta.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.12_1574961064877_0.07457364800110788","host":"s3://npm-registry-packages"}},"5.3.0-beta.13":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.13","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"013542d0968884dd17c8fae25aaf23dbba9fdef0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.13.tgz","fileCount":68,"integrity":"sha512-XcnpIs7rx8piaO1PmZxMA1jELbkcAVdyyzK61ziZBSp4pN4iK9YPGOCMWr8dRUAb0IxD5kv+svOHxdi8LaLYug==","signatures":[{"sig":"MEUCIBTpuG3+QvmbI4IW77jfuG4ZDkN/5IGWrJYBJx3d5f3DAiEAwGbFNynhxsmB2hzgH6L/fS9bye5QDRmrIaybB99F0mg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4jmACRA9TVsSAnZWagAAZ8IQAJGfAv+a/XGpJAv7djgw\nP0I+GLJmIROixPHuRBSwI7ZJKoWY63xoEulhDISC6T4cAyw4Nq7V9uWnSQZ2\nZzMgSpTg7giEId4QkyWvWMB/xgAW+NO4oUOBbc78Mn7LhJuZ6kc4anKhEXK7\nxZ6duxd16l0st2n3u+9PyAXbkW0EQyrUULTQhvVpnCkOLRK/Iql43ZqlfYKJ\nTTSfCjPaaHcdM5Fi9SnCxMcMt4OHmhzyu3N+9ErYEnYULUh/buP0e8QwNitO\nTX0uQXKCcRoOr1tDQ+wL9nUHybOeDzk/Tp+VO7B9NZ6fyohUUW+Ypw+Fcc1i\nzSnbcLpNQhcm1e6dADv2Ewx0N5+T2sscwJdIJwowI5FOqRJLsBHB1KKSDg1u\nGoP5idgWwpNMZIsixSb7+e0xnKM44DGB8yOxKpcs3hGDySonB9JSDYJZAIQl\njIWAH0W0WW7rFZpSpRnulSd1+UstBdtN9j4lbjzbhYXE2mbc3ycAoOZ+UHrA\nlrHaD/O/ChQO+xxxGRQA5hZxsTznqrIpcVsg5BTGoZJQ9gz/1Zp89ylibUS0\ntvi6rfMnUbxgK6Ou/QCSfwes8qXt4+cuBkCmObtg1X00OPHinWj0Aijat+YF\n8gqKVXJyACTIZh1G9/bz/yC2eBqBtxl832kVtWHQ4+mWa717iGj7cKdbk6Rr\nyCMy\r\n=cw6p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"830455efa9a647d14ccb0b5db8d556c3a98fe3ee","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.13","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.13","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.13","@storybook/components":"5.3.0-beta.13","@storybook/core-events":"5.3.0-beta.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.13_1575106944511_0.6841857564839433","host":"s3://npm-registry-packages"}},"5.2.7":{"name":"@storybook/addon-knobs","version":"5.2.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b1fb82f84a8071b8a6e97c4664a7600f6bee068d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.7.tgz","fileCount":68,"integrity":"sha512-h54QXGWNSIh3uYcYhKhX/F6YN0dTjs5dBcr5tCquEtHzUqe1oYRPXj5fEH0Nt0R4aKQ5jxAGoXMqj9XPz20CZA==","signatures":[{"sig":"MEUCIQC06LTQ6BEAdCqW2ag20jxM5BNSqe7SfU2U76eehVKbxwIgBA2ZA/3uA/4iVUzfbcTq2Og7K0Ok5tpactvR26ezma8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1285121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4mwBCRA9TVsSAnZWagAA5oUP/RslklMSCfOkyPp/TrGA\nMXJfU5qYWl2vr6wDz01J2BAIOcAEjtZp2tcTy/z7gUFwFnIKh1yqaPnzO8/W\nATQMqm3B67bx/AYq0j76Si3DiPxjx/8LqtKvKy8rwyEIgqu9Teu8J6JQWxzI\nGy2OXLDALFABC2DqJiGVK3YHAy3caSfNOuxjJB1kdfa7YIkJltYe/reFO8rc\nU/c7UIBmeI7geOZXeViGmDsI9hOr8JnmYE6AbkZzLn+cQjtxnUmpKi+tv4wu\nazrawh1+Ed1G67tR3SSU9VLiN3HcXKYqBsO863QdfLQEKbwY9ud0dB4DCATQ\nLVs8V+tmAGpo6tBExQ3ORV22dRJMjHP4uErKHwbcNU53VC88lKE/QuLtUNtU\nOWSFeZv7HAi31QmlZbWpoPDBPiy5+YZZPNHSoLI8i85ZCiPVIsdAz7y9A+Wh\nBI/eJ2l1Ty69CeCCETtM+JRvjC7FbX9fKyps5Q4JkYvbbmi5VvdPUYujiCSe\nbU8UZt2ueYUKErPuVBZT5yWh7SDEwsb19us1Aukm1hm115m+WDYzzX5O5QL7\ntC4BQYvq+lwAr8oYJP7oEIC7CgiPq99AC52/9SUFkGL3o26KNrfvz6sqkB5/\nXIvbpJYXKNfRlu9gixC8iRbG+K3Hm0Fu3qczJBVKw3iKDOrCYeBgEYbGawi9\nJs7l\r\n=oTgd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"cc73963b943213cc0e7f291d4d813d5f04c161b3","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","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","@storybook/api":"5.2.7","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.7","@types/react-color":"^3.0.1","@storybook/client-api":"5.2.7","@storybook/components":"5.2.7","@storybook/core-events":"5.2.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.7_1575119873387_0.9198780694064528","host":"s3://npm-registry-packages"}},"5.3.0-beta.14":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.14","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c5354a9082f2dd82485e12209cec0ce277c6e24d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.14.tgz","fileCount":68,"integrity":"sha512-AMF3ljip4FD+r+cAKfaMhhwyXi3t2y03vqd15a2GPc26xYdBkk9FQu3+iWI7kAMEM35vy/b+Pgb1ymj4EkCPYw==","signatures":[{"sig":"MEUCIHpO4f1Gj5rjLAIkfHLRQvAzpen8qTB3hbpHf20jzYrqAiEAkixOtuFoBO1snC5lq0y59cnDot242yhzlELcPIPv8uM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5Ik/CRA9TVsSAnZWagAAFLsP/3p9z1vU7GTZnxiGZIOI\nCQ/SPa8C9Go5YPBMJFiOvjpU/MKGYdqK5m6bRghL6YoxCfa11fVMTGddu8XP\noZUsaw3mkcaHEfc65YGX8aYADOj4HzQdrbprQxwd+n5fqSC2bChMFo6oq822\nd+IiLc3hGm0Y3eF8M3pUkjHaFe33LmmkisAMKFsFgR/fV/xO0czK+vb8OROd\nGgCOBFrxDzJUmVXULUHYdQ94DocljnV1nW4/wQHNbUcS7owRBCLRQaAmJ/dL\niCY5q6q6sJkTnmpngFnwGw0BICXmc3TxSE6c1L9fCCkmVKdT+BHpF6g+92r2\nFtMkAq+gvplM7/bkgBvB3D216k5eTL/KNgcturPbLdn4VwKxTpbzxert+/BQ\nEWe4TQ7PmhS/8M0pX+/ylyUx+EJt9jYv00gvgQl5icy7dKNG1oTwyFsM3IZh\nFE6k0lZ1TCo65cdpOWn5IeKabw6b2xFoq62nCoxN21mDxjmW7zPac4KZVRaT\nMy8MBi2lXKJwY0vdys1Lh7E2eQ3wmwWakVls6h8Lmf4Y3vV82wXw6OSoqfO0\nmGd9WO0qmnvtCCBD4D16+TS/4HdMvrag9sb0UK2nOivStG2jqAAJiYVisy+A\nO59WD5zcjXZexkcsvqH/LPKQ7PYbl6it33mCc6qKrzI93IWi2yvplwKvyLED\nNsRe\r\n=NlHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"1c93a96d8eb248ba1647dd64536cf7f9ea9f63b0","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.14","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.14","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.14","@storybook/components":"5.3.0-beta.14","@storybook/core-events":"5.3.0-beta.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.14_1575258430977_0.8423617766547813","host":"s3://npm-registry-packages"}},"5.2.8":{"name":"@storybook/addon-knobs","version":"5.2.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.2.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e0d03823969921a0da57a329376d03066dd749ee","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.8.tgz","fileCount":68,"integrity":"sha512-5SAMJj+0pbhCiyNkKjkUxEbM9L/wrOE4HTvM7gvm902fULuKZklb3wV8iiUNRfIPCs6VhmmIhPzXICGjhW5xIg==","signatures":[{"sig":"MEUCICRTV6FPlrjsflsLIOwjtI/QI8WdKjpckvPOziBKs9szAiEAt+lfIQbRzxwoUp3dAPEwXC/q0n7pM5osqeCOgkty/Yo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1285121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5K9tCRA9TVsSAnZWagAAa+4QAIZy+hISQBHoJMvyDyzO\nM7bQa8mB4pGzltVfLH9ebYQR8vR9jPVtW850D7pMctyE1Ud3QaLbRCg9NHan\nOY4SMSWEp4LC8D1EOzxvnwXmJjPvyDPgIshOsgUliFej+s++ZuKqUAdlRxyu\nxLxYbT+TZ8+0BLp6hxbNO/0bEmgTLyT6Jr9EcTC0VfQKST9IY3yVsahhhsqZ\nV3SeU9clmHryhCK6MgMAgcdmsFXnKpkjstBfy4GpQhGOk83HKE/MWj4OTXie\noBMo37S/a/Nn2FF7oz2KQvBzqQDA4hvPP94L1k203hZf+hcpyc4yyym84Va1\nJDhs5LJOYABJ8N0Cl9HkrLV3qobVGV2ICljbzNFDZ/RG8QxZrY3ZMJvfsjU8\nDquy0jHuqLBnnVckmx0jtVTpxOjJR6b9szKWtr+Ga9PFopIh+pMRI4MSUabi\njlumVuyLnNtch559JJU+9BXXan8Ne9n3uyQkS4vmUdGQdrGItGhdrNeJsL3r\ntuAWNFUyhb4yOKDaaKl45avY1Ww8IDbIm5ATg2XbU+RmwjG0wncfoWaP3TIW\nYqzwvg86lc/MQzDGjm1tSWqQcQG5+WS0x4BQKwh5Bt3VzkHNf06xOrA0Xumu\nHDt8khvVETI1Wdy0dnLZigY5UsyZtoJRo7tBAo9OTqOLLUF9nCJWzCyBDoMZ\nex77\r\n=NoU8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"1555b7b6a159a9803e2bf48fe4b2095c27b810dc","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.15.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","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","@storybook/api":"5.2.8","fast-deep-equal":"^2.0.1","@storybook/addons":"5.2.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.2.8","@types/react-color":"^3.0.1","@storybook/client-api":"5.2.8","@storybook/components":"5.2.8","@storybook/core-events":"5.2.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.2.8_1575268204529_0.5269692205690877","host":"s3://npm-registry-packages"}},"5.3.0-beta.15":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.15","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4c90ce4179d4dcfce18086c7aad95adfc9604e82","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.15.tgz","fileCount":68,"integrity":"sha512-oBrNBH24zw+rQrb0b3d7zSRD3x0dtw52I5LWilIku7nCx9jMNHKffrYSkO6CiSmJrwjTW3f0ORoEP/r/aQiixA==","signatures":[{"sig":"MEYCIQDjey7HTqMBAQhQiYkNkTrtPXvSnvgU6uuqeObMy5zR8QIhALqrd3D4PArBwdO6mtPxYDp61EZgRlwmyuvuaWBoxqhz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5y9YCRA9TVsSAnZWagAAw6AP/3PAjqbWJXBpheShWX+n\nEp+ZaMFC9q8Dr2mgiRZ+CMgVTj9YzDVbaP+IZI578JxixZeD/pU/7D8E9doY\nEIROS6JQXbM28+hyCdTIrya/Mh8h9ieFzb0BZu1suDGb1c25u5SEnJ5boXYH\ni6nEuusrYDKYcozT1antknVtvS5ulfk8v0MLle9ew8C5yrYsACFTJCmJJo+m\nEuQCcDghTxN5FOIWO+X0CnLvgEX24ria0AtjtSD2HGI39J6eA6gV8HXVtve0\nqkrFiQ+i7hybU5v8m/jIH78s9ZSC52NRcCYaG5badajO6TFWM7cA3yjIszd6\nKT7raoZMbVQhZqPg2sgUvrKO3cjZroQoMqkHbxF0ah120Gg1kKOMpbiPMTKR\nlBMYlIJIkD7BBc8jLPQ9olv446SgoaiUwRnwJQagDTtzCMsCVucteehAhb97\nA1VnAnqwGLb4UWiCT9oeFT6MQc5zrKDInt+/RUJpKoJQ3VwZpyhzzbVIfJU+\n8xDI6V9RFt87dKX8lzcNsSva9WjNBaDqm1WTrZAbvv8u8PM/qjh/P/shmnwg\ns9XbNin2X5kt2it/d9L79HySl8FJzskSSR/SaOWqovXMmz2jXkIbQ2zmst2F\n14qYi/1pwzATfFGZqBtHz9N7sQ3y3dMNwfLmaiU0wRGS+WyjQTaqq9lEdg6n\ngsE6\r\n=B3LS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"95fba51683681b34117c9f1076d15bb6f257dc86","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.15","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.15","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.15","@storybook/components":"5.3.0-beta.15","@storybook/core-events":"5.3.0-beta.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.15_1575432023565_0.7040208013684737","host":"s3://npm-registry-packages"}},"5.3.0-beta.16":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.16","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.16","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f89df07534116b28ff7bc4c93780ac0324103081","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.16.tgz","fileCount":68,"integrity":"sha512-f/vCPFvlNnkjh24C5l9pBrUSY8nprFrK39wsi/84FJKuCVvjVlFUVTriFDjHCr+IWRa03wRRPSM6y37wcUxBvA==","signatures":[{"sig":"MEQCIDjvAEI6vNf/Ah4S8iyXchB1BGDkHber3rxkDHc3gRJNAiB3cmg6HvEC1WMKVKzhiI25zbxTb3pKYHYjUM28v3Ol0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6H0QCRA9TVsSAnZWagAAreoP/2H2nL6CyfgLlL6Yx4p5\nyAj8ZeguDoQMZgQx3KqWwh84MlaJA9fi8qaTN0mEZ858fms+5lD79tKyxmRV\nj6zr4oas+BQtgwsDw8KsxElC1b/4lBt1rOi4cx+63deNZNWdilwVaMvnU6WK\ncanhWHRuQ2j1Vt0VPn2eIRhQ3ISryXzVoKlCA2No2//SzMnJrKCmlbKYRNl4\nCgreOvPM3HR3bwdVMCy7IT4ZoB/kUegP33v7Kujw0S9som/irCeOitdPnvj/\nstDuk0Bqdf/ko7j0spD34ZTi1kPLYzkB4aDg6w1yKcL21XwGjCp7MnBnjlba\n1k9xqTsh79v3uTCn2rD33jzIRCUJGO5merkzPzHbYtQJ0q4YlJib5ueZPv7m\nBVn/cFn9mLCNXHG19s4CtiyHFEbShAMCWyw2GCoLUZvuLAvdGp9AWy28uFss\nzp4CqJSOpPhm3Y/5MEWJ4iwR3/Bzl8xUwg/eOcLR15/qUOxDphxbQf6uS8a/\nI9EHdte3a86BqmkJk8up6tk89eHmITGntcH8AGzcTvxkdUvlF894Cv57StTO\noJ9DIAcw4fXSR8axkefFgfT3UXJkTH8JO++tDDlnqVYfrXba7b2BfXxdu1P/\nK9ysqlnZkQpuzxS5gw/t8fcDfuMq5k+K5L8YsvLpgKIvV1VHjRKpk9tCHpc2\ni5DM\r\n=Q8em\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"eeb36ed8220c52ba15420a090f415ce2945504c4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.16","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.16","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.16","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.16","@storybook/components":"5.3.0-beta.16","@storybook/core-events":"5.3.0-beta.16","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.16_1575517455755_0.2518820277230125","host":"s3://npm-registry-packages"}},"5.3.0-beta.17":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.17","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e60223d939673fe255452a49a8616fce542fa017","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.17.tgz","fileCount":68,"integrity":"sha512-+SLmthpVXANEdKipn5MFUiCRpXfkHr2GW8oDVu3vLdRpneNQyB1l+Hnny/+Oe3N5nu3XtEclz6u72S58V2dp5Q==","signatures":[{"sig":"MEUCIHCQHZIzMIkKTjznLUPN+WA7Seeo0t0maSfwS7SrsNcJAiEAotVXDp3rd2cUL8BRIH2ncNCY0O1Nh5R3l0C79dg0TEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6mnUCRA9TVsSAnZWagAAWBgQAJX+UVv+NxqbBmYC3GEp\n/c+oUjLaiiqS5Uprk0vI0lnYejcWFynjy2dpKxqx7sQgWTE0GX0a5cUN+3lA\n2JVKQkZpCIZpkVEJ5eCLzZiruqAPDsCaucHN42tu+GgxAJeAL6+t27Aa0wIx\n7UAtP+jrae3p7Fw6ErR+21vagbqqiGQki2jN8U7Qx6q4PeoQjLyH/CLeNSZ/\ny38vEB8DWp9TPPrvKbE4Xx93EGpSni80MgF5wpXif0fiCjiPjo+eKeGwhykJ\nRcJIbiUPBf2Jx9/FeoEe3MVYZSelS5IvwL27cSL1ntuaLiOP89FnWye+tdLY\nBmxxLOzWQxL0cd/LMjtaC4eEBnGZBbgAwa2mhFJtgRfnmaYK2+UmhPZ5eYjn\nVF5oT37mR6BHTPcc2FfmT81yttLobHKAnnGBytGr4bSUKPXwP8BrzmDSfmaP\njpTI4kU1WeZ5IJrRPyqoFeD8QEkl64MVRVeUSOTKDAXSFBo05WkOMl+4ARlZ\nboBiT7BQfm9sJ8FT+VEfBIfox48OQ3oGJntijMYkpgrIZHUCloRe60ktMZns\n/uC3MgBLpXal1lGEJeB9GRB7JICbpd/L3HrtQXaC2A2iLxV7xXMRLcLO4ky8\nmsIIUzqlmZOSxQqc4gLLVZ9hAOVjVN3CsAm7E3eRTYrPKFtUuolOlroj9okP\nymRU\r\n=Ts1r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"796951f038d31a7d461e790606e6402bbf197c84","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.17","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.17","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.17","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.17","@storybook/components":"5.3.0-beta.17","@storybook/core-events":"5.3.0-beta.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.17_1575643604458_0.8489419508784646","host":"s3://npm-registry-packages"}},"5.3.0-beta.18":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.18","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0433c3803257b9a6c7a48d51265be39ac4e1efbd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.18.tgz","fileCount":68,"integrity":"sha512-tfsfwwxT3Qwld31WlUU9NhcqebMiVIi4k3Cy7GVFS2/aaIVebXKqonnQ4D9tO3iJ7u/Wwn91NkrpIZD0sH/CSQ==","signatures":[{"sig":"MEUCIECZOPONIeEBbr4jWlWmCLdNxGeMKKp8+onvXf8atpcWAiEAjnDMBge883gmR6nDFMuUt4VRTviHbtznFYdGJYY54kI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6m+cCRA9TVsSAnZWagAA1RoQAII/ooAkfdCxn8joZtcx\n4M4lGsmRxvXgUOg1frBVXg2GwWeAyQFnEYnx2113czoOslHZODUPxQkzlYsY\nzrqr4jHix0mus+FtqIplluUOvP3guM0PnXJWWu2D+08ZynlOf7HAx7OT/9Qz\nwwBT7Q2Cbh5+VwVTw1FZxOKhcMaA6uKE0rXgXk9yTAASvl9I0mArOQstPyJJ\n/BgHeagCCMxmVZfQMfdp6bc7eMYoQagq2FRtaq/OIc37gbq3iQ5MmJ3ioAOI\nA6JyjiM/Q29fEcYwQA5SGDq9+yhfdLtlOdzKC6AkXf5jEzti2jV+r/9XQiL0\nZKr8EyO95yemH1ofEXkRa7+6dFVsa2Hut3hhgu2Km1BFTZ0IGdqdUP4CqJkZ\npeecaCccWuYWzxMZ+40fpF/Z868bN/aRaJyCdKOWThu93yIz2E5k1BThJ/1n\n2W1lC6nTAln1GUf7L96RU6sILG/+s77j1CXu1bKb/dS7J/eeWtvvH9b2xMFo\nZ2IFDIF72HRnCg7vl1l77t2j1FP2B5CLAbgCyY6DFkWu4L/bcK5F/kvQLn9r\ndS3X6A3VME4YpCMzTkstobv5rtwMwWYES3kzdZ7c6hSpjgofcy/mKUWtxrT1\ngcWrZydNXRkywuwbycBUiVdafUCWszxYzd/e99KrbgIh3u7oHx4wYXFmFadJ\nREZY\r\n=l7IP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"ab6ef5333017d3133f5037b5df39a3eee4e3f05b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.18","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.18","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.18","@storybook/components":"5.3.0-beta.18","@storybook/core-events":"5.3.0-beta.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.18_1575645083768_0.6911679427461057","host":"s3://npm-registry-packages"}},"5.3.0-beta.19":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.19","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b1b3ba3f96c4e22c3e215539b8dfa892410da4bd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.19.tgz","fileCount":73,"integrity":"sha512-mDMz9xPx862M22N70xxBqiXsaPQ64cXgRduU5HkDPipgO9uGTCcek1avAHv+PHt+a3z469fFsu4eiobJds6qig==","signatures":[{"sig":"MEYCIQDcoi5/Y5XRsq1VN0JT+c+sZFBr64zp1k9E6WW62kVtiwIhALL0m/GpELir0VkaWKgMhcKXWm7F3DtjQgKgYuib9bnb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd62itCRA9TVsSAnZWagAAsmEP/3sbLbYV5rQKT91kB+QG\nZVaGB2WPAWlS7iPonPJaNlPWagNqB6965hUvc4Glzjv1mwD22PDkbM9e/3N8\ndw1PKwoLDHoOWJuv/P+y3Z8D478Doe+5VAfrX1+TPBtPCW2JNkL9unPxQ1wg\nWkDYSSFk+JZmgD/btJsA3SLD4J4NQixIqWtVEFcVmpfo6NZrciTbho7Ku6CI\ndHQVqd2nl/gXJC6nWZkmC9UegkP38dGl5h6ZmcgrUtd8bMqbVlNqfMdvYY1o\nzB9Ik84vhqMzulNtUfSCMEXT+xc07/wNjnduZG7FmKMur94vKosiyETNhsR1\nBMExM6H1/RDNFQk4zklH/Gr48OflRQyXHvLn+7y5Av/GjbgLgJ9F9brxuHib\nYjr5vRnJcyqjELlyF9SaVJqSMWRX2ZXSw12T0xU8lbq3rzVELSCCP3mhWm9E\nvhJJp6n4VEL0qUFmSOyEAmP8hFm2I0DkGfIT+/hzGK1eTFnTn3yp31zsucFM\nMjFBfYQQvoZiUDH51GsOBxC0ggXh9JS9d/v3IkOImbBnwhP7hV93QOhP0JPK\nW36daHRKen0azbuvWFbJ7ICqR2yih64BOvcXiY3gBxd5kmdoxWetRrH9bxzw\nt7RJytPNFRKlNjD5LvlzleX7I54kBTNOzKkX40fhrAXiTvDKFWg11wQtVzsP\nfPcT\r\n=eR28\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"9843746f3a0a831a2d9c234f21754f30ae403965","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.19","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.19","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.19","@storybook/components":"5.3.0-beta.19","@storybook/core-events":"5.3.0-beta.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.19_1575708845463_0.09290998734722389","host":"s3://npm-registry-packages"}},"5.3.0-beta.20":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.20","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b787630ccc13e1f7929fc13774e63999f577b040","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.20.tgz","fileCount":73,"integrity":"sha512-l41J9lndAOIm1DmsiLqWv6epGe/3EEdn2MnxXSqZw5zrKlxbC1J7egiRMlRWafNd9cTpEG65cThZSXq7wuFyVA==","signatures":[{"sig":"MEUCIQD6NtwPJMJQo99mnC4I7fGcsSICO9t2d1iHi+LWKDWPMQIgLc9A0jioT4R/fGMpa7FD3+K04a6XCp0i9Vjgt8dgTv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7kSLCRA9TVsSAnZWagAAQwgQAJ4oRVXFUpng3mVgF5kb\nBdNfnovc9+ZGLlllK2tlF9aVZ4mEumfasvEXUasvQqPqPbBs2h+tgjxQa6Ts\n/wEC88PvNJt8Nx01nhoK2lCiee5x4Z6TmNqvuAnpVQNsTRpwTijgTplpsS9U\n3hn6n/fRvrZ+66urqPAjhQRUvS2NoiDg/NUdfthqMoIcMb/+ncHAOJgFVq+x\nqjq3FDa1stGWJA8pXmZYnfLDbxgFcgN+jLrzDw63r/eJY7+AG/aByzS+HUJI\nobd30XlWNi4h/PeeM3gzJEhvKg/SkiPDhwqUbE3lhE/1liycFxvf+raAjW95\nDX3qB/oEImWKyC9IKQPDv3w2hoqLsBkFTyzbnzXRA/IZImh4X3L+oKyB3h7V\n/Dg4RW7Txv3RbRMoZ/pSLJBvr3TiOADISx6NRLdbE5neDyn1nvkP+R9AVPRT\nue0p67BuJV+RUAFDIZK/ukKKXbJRDLGfZKv5z9cwya36qvCYzou9DC33yUl4\nf8C5qOod/M7PMv3OFgAVMqA+v1lEhBsVfeQHf2btybVDlU4AW0yVHWLhzKht\nl+iXA4FMRcRZcaYFOHxty5lM9wbXZwu88sQ859CaSgVWavfIMURl6KCoP5KP\nOC7wmfzjyy+MYt1MNE7K0re4XMBMVxbroV0TOvoFJwIz2zbuLqQrLjmpY6bT\nv0F+\r\n=42yc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"5d890bf37b8b20d6c8f3483166689afa2e030a76","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.20","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.20","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.20","@storybook/components":"5.3.0-beta.20","@storybook/core-events":"5.3.0-beta.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.20_1575896202979_0.4146050502309293","host":"s3://npm-registry-packages"}},"5.3.0-beta.21":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.21","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a0219fed4ae041b6ee9eb8f8f14792cf1c10bf1c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.21.tgz","fileCount":73,"integrity":"sha512-E6V3GSV3bhNLPdiMzajhcy1aNrrqK419NrQtuBHcf93iWFGr+/HlXYuVAy/dvtpIuXpnKvaTODN//X8J+WgRMg==","signatures":[{"sig":"MEUCIQC3JjkpecFibhCzGP4XNbfGD/NdVumpX+VcOv0GZPM1mAIgF42KGgUDMpDgVgWNKOi2v4T9Oo7WbllxruOvp0zXmXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7837CRA9TVsSAnZWagAAivcP/1/2ankdBsECwZ5cUjr8\nq5Rm7jCipR9t12MCT3hVeJSpN9/zzGfpPd1A/KpkKmnR8/Qh4Vt60x/UqGUu\ng4KcpsM9+Qawh8hEATdjofsVt+WXSGBZlv5D+I7jtO4+LOFK52pbtIumgJzH\nt8XBHwmTZJzvatybaoFkFf3daMqMybfqTzyIGtjiFnUcho2p+FIHteR2mo2q\n60uZ3gLyqLixQgIB7AABgqxCdzZuRHd4kUa8RAEBMlmGTK9bB0fB38llNIaK\nZnICmM93oWFCw4Y/uNSpwRF11nyo4FDnXmsZn78NdehthgYlGIv4tYmYwEgz\nx0ryzTR0o2TK+00qCQnYoSmWUBiw3OOjrN7l2OWwnbbszXqXNd3S4hWKWGtZ\nWTXIhiSB8Z76s2RVOlVe2enPxlLvd+ghm+wnys9reU96TM2jZ71QrFiZw/q8\niaPqCWiIb000kQozsQOZ6rCIUvc9hEFQF06GQl7Cs4PQe8TnfuH+JkXgXre3\nlAYDzDyeybKGRV+SR5UPmc+DRJPZvN0DvBmLG4X2BonAZi3aiXJ16VR+njHZ\n0oDMw6PGiT2ESInwS4IXXJTRixdbN0ca+0V6IFKst0BYeekWzMNGwzO4rUSn\nGlFu9zM5t5ydxaoUndPS/pap+4iTL+EUp3+aNhBLSQtV5RTa4N9PoIwd00ke\noZHi\r\n=g7Zg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"b4332a39eeada108caba2e8f6f7f6b4391ba5733","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.21","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.21","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.21","@storybook/components":"5.3.0-beta.21","@storybook/core-events":"5.3.0-beta.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.21_1575996922633_0.5805019690809261","host":"s3://npm-registry-packages"}},"5.3.0-beta.22":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.22","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"572a8f51fc884fb39bc1bc54a0552b3de3d0cc3e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.22.tgz","fileCount":73,"integrity":"sha512-fbJeKLpBlI+nP61OqpyE6YA8yD/k0na9nQvTsr2Bsv2BYvaHuZrzZQtXcgtBbOW/TCxoUYrqEf4OdYXaONCTqA==","signatures":[{"sig":"MEUCIEJXxtdDtUFfPMnPTd7VC/rWYyw5/xH6HgSyjM4clLgmAiEAriAdXUK6lV5PGoc/EhJarX7EcBld3cV0upCAuF3SR9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8lz7CRA9TVsSAnZWagAA2w4P/R1Gj2tHMXkvLizabE5V\n0UpD4tU6l7u0dLRrcuV8CTPfZGaiKscgy+NRXefFJgw8dXjDLMyEZWRDKA7K\n+XS+pCOykefRhWrWP/8f0tSW7Wmeh25F3oOdc+0SS4BBVP9oS13tZP+vbjTB\n8W8ib7V9zqeQbvAQCJ152wUqDU8ItM8zaN8JwwWlv2lEn7o8NKk0WC803c4C\nuHO8YAEJM33io5dUMeE4v+CyBi8c3HQnipHBXJiRj0Uz7YSoKEr/F82qLhLt\n42TyvQ3wkHjEeH0z5RIt0mZn3vbSGATNg6zi+zbu8Z2bsgpfv2yRvK0EGir/\nObeEta5AqfM3xNgQZq9iGTduG9jHK9RT5EkemTpAKRJ5cEjG8Z79nlErMMa/\n02EfVP6Gdr8Ln6hmB2DJLEVJyffUfdgRmoShRDg20kUC0i3LE8ck82YcMcsU\nZkf4vQY1HLTjHjel5kVhPP66ryRbm8pFLt+/lklE95Q+uQp6UtzXYvJncFOo\niWSs85AjMy+bb3C9f5AmcKMgw/hvTUTtJRpe+F9DG681z7X3zCOpji8QpYeo\ns3d+faJebN69nhdb9nx/83UNSBy7qby8d7qr2KvDqKIy5Mx69N8HSKZahuWu\n9f9bx9qmGHtVHqu0KzfiVbMrZe7IiBa7dYRnvgcRmJUkGhgCRFtGah5Ivcuy\npGt1\r\n=uwSf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"cb706f32ab672669ab9ab8766fbaa9775c3de07b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.22","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.22","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.22","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.22","@storybook/components":"5.3.0-beta.22","@storybook/core-events":"5.3.0-beta.22","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.22_1576164603305_0.22475524487661303","host":"s3://npm-registry-packages"}},"5.3.0-beta.23":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.23","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.23","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4c9d8493b79932967e5dc4ee27ce05afbc6990f7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.23.tgz","fileCount":73,"integrity":"sha512-MKVffuPvRSEzvvnu1aTuWSbxqAjO9+xphBh2+Ss7pZ8IdptV66O/Yl4TelYHrtvwuzwtozpD6hMBbu5hEt8hZQ==","signatures":[{"sig":"MEYCIQDzstn88SPHeCzljStysTicNypzoi786dcj9dQtVURifQIhAKMB7VDIdSqGxy95K4h+kMfma2Ikq6oN9iq+nioHYAfL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9O5TCRA9TVsSAnZWagAAfdgQAIIKNq2avdvQPsThQQVN\n6fOYOeWuCrUrdnlFd1yRfCVz95lK3PcnCdfsvAFSaBP0bA+qEyqFBYFi7172\nnU6VypNpnxFIOAVlylnzSTDSmNEdMqqWiw6n9tet9nppCDI2MgcPV6iPhMjD\nZ+HHvk0JtYRLMpD7pkMLXWUi8i1rRolyv6FgWFrYVv8wtYjOC02PE+UV9ugH\nqa415fU884zjRMUF7qGOp2fSVX327m73dakd1FPOnYxNNsQBST/B7x2c5Mh1\naSY1XI6FAVhhem8dte+zWsnlcB+/LuEYn/qzwwkwG772ADwlZZ9FAE5qtR1m\nLtdxRSdSr9JUOFDRYkTgExyBGavhQLJpGgC2l6Ze5cfX9Fy2kw9YnN7E5gLL\nOeLOsjVRj35XbnQqMmp72oIWNPQSbiWc8NRJRalfQ7SUiiRp9vJPCJFA+fCp\n5jYGmfUzuM/PbghwIUqrLP7RJE8lGaArhv2tqzfK8bv70KWRGDrsaLXJACYv\nu7nCuZqJvltgsrIk0v1v30DsybHHjDAgClYC1fuB6ZLXks6n1T8t/8OX4ck5\nP8X2RwSyGMo9VAFoXUqJ0AROx+9NjYKP5oduKyrEdpm9dLqNT/z5jwvnfzwE\n2Ut0n4LgulWFTdxIcrlh9fKJaZCuOcBUem5mRUl/WJ1E6aEnUInjvwTh2bIb\nDRae\r\n=0TdD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"e15eddb8874f11bd239a890a327bf999c9c8e61a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.23","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.23","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.23","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.23","@storybook/components":"5.3.0-beta.23","@storybook/core-events":"5.3.0-beta.23","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.23_1576332883168_0.5000655192910506","host":"s3://npm-registry-packages"}},"5.3.0-beta.25":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.25","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.25","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b38af3ef28934948052a5d6a35dbb7934baa9750","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.25.tgz","fileCount":73,"integrity":"sha512-dhMjDOCujbS6b+Z2hSLDlrYKSvHUmqKzRUgIt3zgSk9GRZ81KVlhYIuO7BArIv2VLBrycpXkRGVx4zUplQn0TQ==","signatures":[{"sig":"MEQCIBfqXFLJ0sgfUtCQSF4y1Yw3Fg81Zeg8Ayn9xONJczWRAiAzunLFi0xmlEzku+gQQ2THfZO2P7wyAPJrmRzMJ9WpHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9gdvCRA9TVsSAnZWagAAY88P/3+rMCtX0bDYarIeC7tN\n9Cmd5Wo2LTt8lfaFnLILUuAmPETcV/VrAePYvdBgV25KYzHYbCNMMXDYqyY6\np+o9ISZOLjYiwyuWG6k+IqGawiKcI4Zz+moxV1/cyCKbIDMaQ6IZsCBrXqYA\ntMXa8xa7ZsNTf8kWH/TqhykDMWqPeTzzrt1IXrTIPAVXgHVaWQlH4v/Wi/fo\nwKkFY287zvsO8jrW9rehYePuSvguWnhFVW3+z9WawSd7vAlDycNV+vkSH+Jb\nkE6JPA/I/n3WpwHSQvxnI277upEqmGhs4l+Ko4LBDkrNPB+wlBGHjqLoLWmT\n1lG2b4TTGg3KtLe5kTKtuh3C80vjBmuhRFMZTlNxkJyTnLcovblapZ+xnuUD\nTRo8tq39/vUSq7R13LicdEVyJvfEoWl7aPlr7pXzQFpuPy67zfrbdzhBikMd\nIO60y1780czvvyIGyCNKs9uTGlclbM3ZyBv19G2tq7qRCCDTxhP+vl2c4OpY\nj1T1Fq1G42BuBl1xPSozjlRUsziiW03IpfYQoG7pUlQb+LGfbr4IJfGUHx68\nhlu2HKPNS6Hd7wyz7o8Kdc/al23oQg5jrkjCeLJFcjWTEH7QNeqg0ek1ije8\nFBIFhzP1chcbjQu7Sf8n01cd6SxoDlmeFwomZOOCfB/rQi1Kzkuv2ssmT4mZ\nZOv6\r\n=+au5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"c84bb43e8723c4422f2967e5a4033f495cea11ef","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.25","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.25","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.25","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.25","@storybook/components":"5.3.0-beta.25","@storybook/core-events":"5.3.0-beta.25","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.25_1576404846853_0.018528171555385553","host":"s3://npm-registry-packages"}},"5.3.0-beta.26":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.26","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.26","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6bc5c1f1bc5dfbe8d0ea113d895b790ee03aa3d5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.26.tgz","fileCount":73,"integrity":"sha512-eYq761IVNtjrJ/FflBFbXtQ8+vcXZ+TwUOWgAVKC3vFc6NQfPpvL0+0up+fWYCBbGHKvqLNIthpNILEbIg0o0A==","signatures":[{"sig":"MEUCIQCU+VRQp2gOp7fYkmZ9ySF25XF73EYgkBrPKRVOP5TZiwIgG1aLMxzdL4xmtOTxsHYfoO4LJzT4Z1HLhYkFgYWI5o4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9v/uCRA9TVsSAnZWagAAXZ8P/0z7e9YqdrEazCftQii9\nH+mb0rm037yi6F5V3MoBbWT//AtuFVRxdlIG9H1pLV3UQw8TBf/XX/4FacGo\nX/LmFkqErX9inxGUTQwy4oaSXLybZQdOSv/3Kw3icchyoaUn4nD4olsP+T3j\nZZeEn6fSiPBhaGVt+Xvcrjw/PAcG66F4w270F/k3NNCXBWjzVKjq7jaQj/aW\nKeraO3BgxxJYXBIZTwrUebUd4iDg+wtxFQJpa/pedNnITZH1qHoLNNnyuheu\nx2wQTtoG8r5V5eFjGjDrAcYRsItzGPiYmFI2cbtUqPW5KeCRFiyYMvHzDZJ9\nnU53Qpu/edUJG1ypxJeFUyiYXbYuqbWYIzMMQ5UoZ0nYBRRdUAZPKLZnN6kA\n9w44l/jQi2WClNUmF5WWt8sUFmMN1j+uhXDEejZDyHoACJnPuvbsYwZPdDYK\nk5m/IY7LMYjoHYpvTE0M2hhnIXHYG9dh/6Dxad4S27hGwKLryjsLkXMFc0I4\nU1kFMsPrgxoR1Vm6zxmLrKTcvAMlCpmm3hpA9EiHo/q3XVnYmnpwqyM6vHD6\n0LXHSX4/bq5XNHRESGJENXyO0P/8yVvr4NVyVteYcqMopC3zgNFG4gJh3lNI\nbWUq48Q5254fMJvjPjKTxmfoj1A4Uo4zz50rEcmnBaxehoN85h+s0ng/xZmd\nZfRE\r\n=pRF1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"d6a13a22877f8f4e9fe136ef5dcdd9c075537c15","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.26","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.26","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.26","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.26","@storybook/components":"5.3.0-beta.26","@storybook/core-events":"5.3.0-beta.26","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.26_1576468461236_0.5376044027949889","host":"s3://npm-registry-packages"}},"5.3.0-beta.27":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.27","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.27","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"086e6039e9838dc597ac36c0664d69152e0aa21f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.27.tgz","fileCount":73,"integrity":"sha512-62vgliChCa0f3UFJoK7mTDfW/hYU9RTmkK6i58wzKKFRsbzKIvbV4Jyt8FkPS4BZq7yPXdl5ftykRrlVqeTyfg==","signatures":[{"sig":"MEQCIChJRSoCmPsbwLHoetkvWrwoMR8/pc3acmpFIDkJ+tCyAiBt7mAo4/UU5AsyNJ/HbVuHV11DLvfuGg4Y3upVX33Ynw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9wRxCRA9TVsSAnZWagAAX9AP/26eiemfTockJ7sTZ6br\nymTyka/+Djpj+9Az7osNNF+OcW428HspW5tDblBVLQ2lN16Fj32/fuj61yd2\njCfj5ScGP4yRMSKeo9kWgWKkPm5uIvRZccGag+37Ft8CU6Xgu+MhYfzYW4bz\nDXg45nLluaWVhTXUz3nneIRooCY2/dBpo7kFxl0c23VOzOWc0hl/LIMPhc14\nq5FKPYfnMl2tzevFjHelPPw5VNJPHuUnh7lShnDev5rTIhh+bDhwfILFn/iU\nwEIxfo7vukAmR9FH8l+TONCg2p+erW38/Oc3YRyAqQSJci085lRPmEOyYDt0\nRkeRikTBjs7KNFs4E2tTA6WSRkyI5VWlOI15Jb8wy5JfWNxYavuFeloWdY8A\ncqK6Uq3wsvcvMkcLvvEnYb7SwfLbv9/0cnsisBfpc6vWtepD0tgtdOTuknTf\n7wS5RiuLu8jIiIQbjygKDMjtAbb4B9S/io2lUKioUrXLJi7fexROCNsomdZw\nmFPrFezyIl/WEwMb6ZD8M/41BREVlvKoPo9Y8kEvv0iCrSTBQOElOvk3bxXy\ncZQZAeS6UOrExAHt8stMuk1aNQvuaGij5l1s7iQ7a51wb6vYL94n2R+grSTt\nyraWsfXRsI9+5dMtgvJuWw+x/0Vp1qql7mHfJAT04qqWYVTp3EXOvlsXyrfD\nhQmH\r\n=TpIl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"ec095b015e45fccbaee4236f8936c2823edc5649","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.27","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.27","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.27","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.27","@storybook/components":"5.3.0-beta.27","@storybook/core-events":"5.3.0-beta.27","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.27_1576469617077_0.08000607104435797","host":"s3://npm-registry-packages"}},"5.3.0-beta.28":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.28","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.28","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b930143a1adfb56c5abc3a13d860df3d335b9846","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.28.tgz","fileCount":73,"integrity":"sha512-PbjWob2U70s5lg1Z6823+MP4WM6bH6cDypXyNtW9LkIjChhCg6vSUzgNjMjFmWqp6FXZNl92JuCdsYh758I9ww==","signatures":[{"sig":"MEUCIQDBQm5BQLfjqX2J9+QkMFpUXJtB6ChAAZhZFEtTHDaHCAIgYgCoy2rIqomZ+jQ2dlZC/CGeEQ8cji6gfHELYE0/Y5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9xP6CRA9TVsSAnZWagAAmqkQAJb1q3Tdq0OM6Pfk3VKt\nD5dLqYpJ9o/I0yflmT8rFUERp8CxOYE1vUhUoWL/+aKEiN1H2nNN0guAOu+/\nOcex02X1hb09FDHzrjPIxCadInv4cViW31kEnVjpbzctSb2T80ywbiVKTt9S\nTYb1+phNHAv5+DvQyv5HnrLbof5yYbO8/bbqg2Ma5DHVcnWyIVZCocALzYG/\nGYX0jGdMchStbW2lyKh8LKdHQtqvZyHJA2upiU6r0Trgz0NLdQab0069hjzl\nxBnAB1VbMPh+YoLfC6L2f60mKwhpcaTbLIzPwYHXPTy41W2++iHufnoRLm/s\n/PF891n8JSj8XHsuzt3OJ3jBH8JAtv6Yk026V9MpUj/EFMbMQC2PIXJceUbV\np8x/Rk9B/YpE8r8YPtQOt/HPpbOoD6j8143SksUbsm8KYU52IkICdz1NLSl0\nWU3fZRPQAQd6LHlv8xShchUvHgfjZa4NGHNj13GRzhfyQ+fFmO8vhj4vDopA\nVaijlaCdMCRGvYvAt4Hh2M4lzw4QMAh9jXeIM6w1dnFG1lyotM85vBCLyxJa\nCjhFDvezDBQ7E0IaMlSNzQRvdYO+urxIu8nfdGQOq9UQ71YBV9mI4SxBD+m5\nweG/kBSiKr+/iEmEwOoUaOcXXOF7OXDgwaOlIgVJGqoMwb2aSiG6obouzYGe\n0hqT\r\n=j55W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"5666c2c62bbf417c1f13eb3b45ad4b1dc7bf345b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.28","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.28","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.28","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.28","@storybook/components":"5.3.0-beta.28","@storybook/core-events":"5.3.0-beta.28","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.28_1576473594070_0.9330535055034226","host":"s3://npm-registry-packages"}},"5.3.0-beta.29":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.29","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.29","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1b5c419770efa0f9e835ef6fc0973a7f39acd74b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.29.tgz","fileCount":73,"integrity":"sha512-xrHVgJDPhz/d+L1AWeyMo45v5jtTKftFRoQqGw/lEpim4DccpgCQrurKtBKn9c2FpIVqa2x0XO4gu8RtFhvs1Q==","signatures":[{"sig":"MEQCIDkqqAgIL/ycPMedWoWz/F4oV4Rf9JnVlYZHXN0wtqcrAiB5J7y0Cna/QyEukBxY5v5yLgIVn/8PU+JA39yhV7vo6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9ylFCRA9TVsSAnZWagAAmfIP/jn+7jv2JNpyDK30aNcC\nkPBatfJjTXTBcTnwew/jbntFu3kFOXdqRrryGCGqulfLk0OP+Yi58tViMoFr\nOxz4GXN/weFwGzKF7M4TDjNbW9O/S+jF5BavhjdsA9uOL4evvFqn3Zf3UJtf\nMdKTSd/iUFbPLIzWi/bmCjhTPnLXSGFoCnto9G1ocDqIqfBjz3Ym1K78BNzK\neRT0DT/bx90m+lqHqzfq1hUrYSKMNtQ0//Mb5SZvLJiv/OBkTSOXovYIQizy\n4N7k+clvCdonCwzYtxJs38X01Ut1pJx0slAcGBjaQMP9e+Xq567WCPSiILuo\njL8YKD7janfWz9apbHmhxMELBUSpWtl8PDN2BojTC7kzdgAtRBwPad+NDUWf\nE8tfB5b/6LE0q8ikOBRtSWQQEeKqMkLPQ9az3uWu7aQpQLaBXvb0YqxILu1U\n1Qv4B31hhREyugDHqWXhH1tZe8JEpobUq5d1El16INfifkH1h26Vfr9g8zkX\n11G60/xXgFJTfrDY4D1zEYU3iCHdRAJEpkjyebd6ZnfgbzvvJwD4FtRp/Via\nUgI0+iXbPhmlmyKYiX5a31bVucyElBzJWoEc5/Iuf8oqF++kaMMFquFr7DMN\nrBfbQdVU5Y7pOSNZyRP1IG6Dzyz8ZpWkkf5yEalrZh35K76nzwoJddKZBwwu\nHtGQ\r\n=sKZP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"0eb3cff488dbdd83161dae188cac4c867725b8f0","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.29","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.29","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.29","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.29","@storybook/components":"5.3.0-beta.29","@storybook/core-events":"5.3.0-beta.29","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.29_1576479045401_0.9755032780603308","host":"s3://npm-registry-packages"}},"5.3.0-beta.30":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.30","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.30","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"218fb3d5d05e3eab073a594943dcfddda2ecb5b8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.30.tgz","fileCount":73,"integrity":"sha512-VqcUfW5dXok7ekVE9xTeEeY6gnh9OsH3TfCbLNMqJyCn+MDbipaUXkENmhA7ZWFytog/uur+4n8BS22oOMGL/A==","signatures":[{"sig":"MEQCIHr5L5SnmtTl/0qoldWaI3QcratftdVVx6PA4+mtxsL1AiAtmYVpzGygiVs6S3JnqpjhQu6JKDgtC/4F40IEqOXfyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd91HRCRA9TVsSAnZWagAAvLQQAJq/HzGrj/Z5EoL+Vher\nZ+zhVbLYzZ7A67acaXM7GuLneQUttEoqRM2s8PCj0gW08Y0x2NIF1urlYMKB\nkzMvLliqJQ30FJ45DuBY3hfBX0cAjnIdkOIOxrOpi+La+eVxqxNrF305KjLP\nyHpRNZE9sLjxxrcedjgkxv1xJDrtGyafa+xC9GiI8WRFtWQItfEIzV5Djaaw\n4/1YBLZ09LjvjUBC4+PUWdxDWE+ixkZJIF8N9/1iQMH3RM4DNh/gVfEVtubl\n+HC9GOGoyDf4UMxd/mR8I3415iWMqkCoszIDqVAdd1ZWOjw2A12zqurexjpZ\nKXrwRuOXuRG51aKOu6sre5TneML/yY0SRGlhtkqj1uiY0NXljIKLcuIo9uDu\nm6DYvXmQsVK2j5P6EtGf+kBot8dcaUEKs6qjrx76wz5zKo1vKYaaN0PRuLGu\nYL3GiCFnLR8WeNqlxG2QDdpLM++mwDXSdHKQ1JVqeCBW+SMJyuJzu7CnWR9G\nVWgzTuvtF7uLjOZTX+f+mBUbs7KseT3lbHbqJ4bV2DfbFD9rAtSUNHgdxavV\nP2JLmLRtuXpl3SOb6NoKJDT2pBVQDWcELc/WmsFUc68LREhP2cLVdsUFWyjp\naSHamDpwGob4EMvMZA5diKC0wNXIC5725XS0iZ5bjVhzrnOyfYOh+kaXb5Bm\n0dO/\r\n=4fPJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"52147410f243d401b27c9b9f8b56afd199c4504c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.30","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.30","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.30","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.30","@storybook/components":"5.3.0-beta.30","@storybook/core-events":"5.3.0-beta.30","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.30_1576489425292_0.8260556866270796","host":"s3://npm-registry-packages"}},"5.3.0-beta.31":{"name":"@storybook/addon-knobs","version":"5.3.0-beta.31","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-beta.31","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"37493d6cc5c60f5539aa5a0f73990d1b67328cf7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-beta.31.tgz","fileCount":73,"integrity":"sha512-WnwRHTVJIX3W9SgB5ObSVkN26zwHsb8srkeQlLyqDzxuS4W6Br3J6/Z+VkaC1RbGlfgudCVZFCtVUPnPuUNZzg==","signatures":[{"sig":"MEYCIQCKok5JGGcLgJcsA9relkHkJRzhE+IesInzhtZ9uOwBqgIhAI5su7T3EUWtVWUclns+lFJWB/jMuItoAdSck/xEf7m+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd94T2CRA9TVsSAnZWagAAA78P/idGhTixZYEvk3jPV3bi\nM34RMmf/mV2IVK/9JIXtDJINMxQGVhp2k07cFgAPw5nSI6c4wVN4j4DK2/pg\n0guJe2mH2nOwruLwRtMpZrwe3N1ttfCO6NKhTUQvHQ09+0sdT1HLJNaGILvS\n3Im1Vo3S8+IKC2zthAojyzJin9NroFQ8qUkwgXrpelLikVnrCPOGMCqHmBXh\nQryYpq8oh5zKdsv+xkBAHM29G4E5v98ajcANQndgEghrwCMItsI29UooEW//\n5oEb5s/XpKTS4lW8shb0h4XG7GmbDWQZEAhF5tgS/e4AOxn+z7J9QsChqQz4\nJJaocfNpe0Yy6ssOc+P3QPH+68INtHGPqpB8m4drZ9sV++0+1G4koAAcUl8u\naTaTMRDeaW9X1ceuqDfm1bWWJL/UdCPpnYDOOcXWrOk+vYfaOX2BspXVRSAq\nV0UV+Oq+VW4W6ScXrnRhv+TUieSGobniB6L3UadiOsXId4+0NCk8a62KbG24\np7j2DAUeLEsSh2Pm+4YHPkm6bLklhx+Hr+JF/ziexaPReSz+cxsPmumsLDIu\n1xC5ItzR2vKFgKaxR/X7ElFbOBSHBrZ2pnjHa6Y6usnFdj+uEnGRuctpfwIB\ngKlAA8wmR9fnImgBY8921S1aidRNUqkYyIig13AG1ylSzfyK0ArszhZ9ldvP\nbB6k\r\n=clhN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"4d2d0bbb2dcfeab6d790c9fa4ab37de0b23435e8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-beta.31","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-beta.31","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-beta.31","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-beta.31","@storybook/components":"5.3.0-beta.31","@storybook/core-events":"5.3.0-beta.31","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-beta.31_1576502517690_0.8018371377268763","host":"s3://npm-registry-packages"}},"5.3.0-rc.0":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f630db1a7c671c1fcf7773455ce1be1bcabed360","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.0.tgz","fileCount":73,"integrity":"sha512-OC8jbES8PVGk7FJXSVmYZdPFCxhwQrJ5ifdMgvGjd4kvi1grrjf98FdsOEivzzAbXb3Z8Y9ItNx5g+esmsRdVA==","signatures":[{"sig":"MEUCIQCUadw5gRb76MfJDhnIHglrl3gdkcLU2cQxsFQPj1wiEwIgd7/l90K3RsoH3JE9GYnBr151RrFhFQ0IRqrq1WfCCS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+zugCRA9TVsSAnZWagAAXnoP/26Sla4a4VZH2/QYaXuG\nBdkPCtQEJMx4Z1XwpCgaBBw3mnwHwYRcR7MtXjKRK2iHeNKolbhVBSU86ddU\nS69NvgFjlppLynzEd2I3trMYlWqtZCp4VBaXdd8b9EQ/wfVLc8YmI84r/x7q\nS9Dhym+kTI7ppGsL4131GRRhoUjXXQi05NuKuKFSpo59J7O0UIa4qxtFG6Mt\nkZF5OuLjZ6ziiXCStpAGlCPgZ6mfGbkRIDNx0w6/RnDjjeiRIuYDjn2DNUAY\nLiGUoQMokBxe9BKQbv6iS4O/De/3FvTg547H3uwaFKiTVVrLpVxXHqxLejoW\nMiEmpUULBsNHpcu93S17Gq/Atp16IxWR5JVB/pwLr3h6R3J820juvnSo+EBx\nzwtERmzCJRmu2RBzsFsH2xdmtLwnX3tM4Xa9WsZ0lmZ9CHYZbxVL2KoQkT/m\ndtsBHfIAmvJoaD9jsL6FIM+XiY3zW2buR2KEa1UN2ISSsy7Wi6spL3PjoQfc\nTVjW2mT9x97xrbCfNmkAlgeNx8aP/ZlnAKc6roPEoLZAXNhOia1dBCuxwAug\n46FLVVib/v7c2DdpnHC7IIc1cMm9Dcrlg9mA5gde9BjZtwWU1pxkUQ5jFa3X\ne8MEvNY3Gbl/p79Wc+OFM3qYPTBvIe4LvjGOXKzwmKFH+IoMq486LceZ8JkJ\n4SHM\r\n=BST3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"7acb51d15ddc748b464394a8cd63f018bf96b527","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.0","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.0","@storybook/components":"5.3.0-rc.0","@storybook/core-events":"5.3.0-rc.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.0_1576745887679_0.08743944835644846","host":"s3://npm-registry-packages"}},"5.3.0-rc.1":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"38aa37f7db49ae3dd938c4a76e4500b109ca6202","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.1.tgz","fileCount":73,"integrity":"sha512-bjxUsMh6lAspQZ05u2iYY5+bY3WTA/6QDkXhwVSCPcm7V6q1L4gOEewNN4vciAU1agWkQufQ+TWC50FVRuTmpw==","signatures":[{"sig":"MEQCIGumMuqgE3rMCKBTcYDQ5vvJjEWqCVwHoVmTN/Nq/ifCAiBgy9mxYMHAR/wRUjU9gaGSi1OTHdj8rp8ggGtWzs/xDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeAIf4CRA9TVsSAnZWagAA4JgP/Ru1CKPMV0PxOYkKZBOM\n22uYjl3jWSm2iESdZ/y/9paQCGaq2erWqPyaW2OgmBkY2UuDCiU0lAGETr3Y\nCYJs1Q33EVHTuf43EpAnLdti7+xcIkRaC6SHvCGJGUoa+FdArGzVMYwA9OZa\nfBLAdPdoZnRVshyuXvVOz4aQFhs7fpK6u2RQDTgvD/XNtau3hWdQZ2PuHA4s\nHZ77FlDNORzIXNEbhgjbzYEVJZe4WgvY6EqUTpYxlxS+pN3Hb0WBOGoOTGT3\nbVm9nHT2GOg0IlLcYY4/e5RBuNoi3iNYRI4+M5DZhnYfop56WaHmIT51utuA\nu0svo+hZoJhQQ79PR6kxOsW24p3Xnfwi6v8zaZtGQp8ffHKXpTkPciier+O+\nDIWkou21Bj94n1xshbZyvz6bhLCrq6HvQ/fH8nsQmc5hei20ObwuqozyG8XB\nOZcfmsoqHR53m6LchFJGXKkr5Qu3vlglMpMJo/sG3e72LBYwuY1UiDBPmSVN\ngV3wLhB9JVzYWqdvye+7BPvfn5F0XW1nzHNCNvrPbQ+ckpIRpX2/DOmZc9K0\nxE/ZiutcF5Az9/GzhXj0LAo6IQBt5MTYcv6kdleKYH4ada6/5CNFKbPd469D\n+VzQOW1fqEeiaNldEBdt/YinkF65VXYEPU/Ii+51l6/LI9PfaHf/Y56LIhG4\nV4E0\r\n=mHSf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"c64a498a62180619dccf905a25346cc3e00247af","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.1","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.1","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.1","@storybook/components":"5.3.0-rc.1","@storybook/core-events":"5.3.0-rc.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.1_1577093111936_0.3677881193587449","host":"s3://npm-registry-packages"}},"5.3.0-rc.3":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"93ffc6324d1671344b90f51152a741c8f3d61f61","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.3.tgz","fileCount":73,"integrity":"sha512-C1rL0YNaflFNGzrqw2Xfz59Qxa78rygkolYz0pf2LMWLXYdEl9FGy+gWk2Z+dsDs5blKQzOc9eHPbbeTZ7E0Qg==","signatures":[{"sig":"MEQCIACUo1OozwtuUAwX3DFBN2MihTplI+S6QuzqZGytDvxnAiBSQSA7QpoBSfekYZbOXyaPsO78Q36t28Puk5K8FillGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBKQtCRA9TVsSAnZWagAAuNQP/jML+y7EDKZCBiGFWmIG\noomEZGdTRJBP4zZGZNQbh2LcphgUR/hPQEGj3SzWaarL36/tnN6fyqIccLYx\nP+3ALS6B0V9WpnJGws+YkTes7UeJXGlacKe2xEQi4KT97ys/6IagTiqFNadB\nQ/4pnDY/b4CtlPh0UJNQRtxYyoiLEWaoI319PKP1Ssgs71rLV/XfkSvZFXOD\n+F0rSaYlTjAZVuNkqWdaNTSI0Bhbxt00aG5zhOR6ZEH06iuK1GHLIxtUWEN3\nVCtjpci3MNkZGwlZn6bDI5k8OHTl2fCMva5nHZvV5xWb1ijwqIXOC3eDxjLW\n/YAmKddvyKWBoJi+DfDU7sgBqynZJa6ETGyr68t6o8zKYfZR1MbHLRW2sX4C\nqywMlhD4BuP/HxK9svA2NVK0tPhhOnsssN1VNQQrHpjLytFHNqTVliTeRQXW\nyZoUaS/uh7KAmidUL+sI2YRRq5o8ADzRZ1B7KyAbMEmXmUIx1tDSnQE2o2Um\nXZCr24Aotd+K3Adbk/gZaFu4kCiHJjeikpXxhcDEKqFJutxbRDGbU7N3XEIT\nxFz8QCHaYQOIYwpmHAhVQdylFt23zAyxLU9A1O8MHOZWT5r405OrsrQ99pKi\n3EtAN4ODj6uL3fKSlrMQCit74iL02erczkQTYqYYO2INwWJBP8r9vWcyF13f\n2djW\r\n=qRIZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"9c5005e16cf7b0acf1b36acf3e783d3ccddc0953","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.3","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.3","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.3","@storybook/components":"5.3.0-rc.3","@storybook/core-events":"5.3.0-rc.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.3_1577362476759_0.45060303445590755","host":"s3://npm-registry-packages"}},"5.3.0-rc.4":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3ec58ef37efc7a7f0a4265675274a999048f5633","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.4.tgz","fileCount":73,"integrity":"sha512-uFt44tWXJkLrSgvd06ggvjNIL+A+hpN6uD6O1T9v2Oz2xbUbNOVV2ad0SXhXKyevUEW/cOS91eOxvInxhfz5Mg==","signatures":[{"sig":"MEQCIAro6c+Rxn0IjsYeWRITBh1Dr4/NNvhyK5hCBH2Unn+AAiBeSq8hsniC4ohX05K9o3G89O2oONVoAXXrov+cUiAoMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeB1T9CRA9TVsSAnZWagAAa0AP/2ROIyBKSlxQbzrwM4vR\n8lBUtNrHcIQdtZUQy0Rpx7Dh2/baHG6V+jlTHqIgovhMypcHa3u2O/AgXLcP\nExFBNYlrbGec3GZWQu9KoP6RtbiC6j1mEuFL+jhanfPCBq/yhsN42b7o0CoE\nK7OeohlqXvEfNiTsxNn48HbkS5QbC4LaKLIGcjNFxHu0mHx1/D1nQk1de7Ty\n8UN3qMWDjg5sP94JGleqFDXGiNV22R0vaAkU+/yiVOketL9PglMJTIsLBlJV\nNbIQdhVhTbwJFpLPkkfsAvh8wN4J6ve7v7FZZLY53Ewf8KJYozrfx9Deeae8\nLE7gDGSwIvRbR45Mpk6dccwTV5lENIPIn3k/88vukz7QTxJGkDyqLnlZ+p0f\nbUWunA2LvzkUAwhOQZ91fXR6q2nlFWjEB1DIVHJmsCIyCA8Jrn2QEYe11wE5\nGGmh+TicF1BfocUax8TPUzeVp3qDyEZngfQ2C+LnocY8xiaG+FyVOcHG8Kh4\nFZog1dWqn0qxd9YYUCF0uQ7kNVjKZe6NCKHyCmv/XCM3tz34Xa/AvY1yL9ze\npZElcnkObHEw+1n4Mk6fFLqUEmtjJy8O4POjrHynLnlXZXptzLFXy/oFdzQ7\nOj2YzsGrsAvz8rPQeWXBq8iiGq8HBvfEJXmJPPFp2ypZRtIiGjg9ef8jglJH\nO7J5\r\n=vrHO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"1681a28c83f7f5644103e3204a3d6d669dfb821a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.4","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.4","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.4","@storybook/components":"5.3.0-rc.4","@storybook/core-events":"5.3.0-rc.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.4_1577538812925_0.0074507817471549664","host":"s3://npm-registry-packages"}},"5.3.0-rc.5":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"5621657957e2a2ae9270e8b261019e8e45061aa7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.5.tgz","fileCount":73,"integrity":"sha512-PxcD6VOBgF9umJM6QH9Fz8Gf81m1CA1SIAkUj8nv0971IxPig3gQK4pClTPIWQB4+Du3KcKRRyty60uLkQWA/A==","signatures":[{"sig":"MEUCIQCYL5TS95gu4qaDZdbF8Ox0WvnwDVrowAc3TCpVMnTOUQIgDSFEkHsQ7YSvXyXqJsvF6+4Or6blaqahAZ5x9oIgC0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeClLICRA9TVsSAnZWagAAw8oP/0Pw69aRY9oBhy98WKEc\nU64VReraMGe1LZ0XzNR4KHn/uvCccLUrQLGwq9JTTqeo1NMP6/kRhA2/rtjI\ngOh1oAkUt3dOIoE2qva/Jqu8ZKsgeQNOpRLTzO4wHm0GHdHtu+zniJ0gFozv\nWltEbQcuHZonQ+w46TPc/6lKfZKRmh7H6btfEinmgWkBJ18y+SP6nhddUAiY\nhVcvQ5Zaxirnm0Swd0lFsPi538NiYKActuEc8VO2JspQrgt0c5R3hMnmqUDJ\ntt90RYa8h2XaKyoLGsg40AvbmhA6TzhXwBTLfgF9fQ4JEvvZCgP7tjYf5Q2e\n+8zchcXIxc3t791PdtqMK07pPcg+j4m2a07vhzPcC6kKr0ZjQTv40WwxzSDU\nwJnGzY/yOxxUeHx1g/dHTzY2hNI04TtQo+gTfxuT1Sn6CI+P9WHLHU7W2bY3\n8GiyhKtEO5AEdiW35NIe3VgM4S1l46Sebj+zdKFJxvKZjp61v9776yJEVixS\n0Ybvcob5k6h9eMc1htPLS3ckX9pqsvOL963/hBYPBqnBVpNzoZL94Acuew7/\n6Dh5x+GN5eqWdQ5s51jGGJpsWo9QpNciX8R6h28U4om/Qu84/CPvaa4CqZaM\nb9Pfu48z8F8aW78iBcizYdo4JmZHlteQFAXGKZLkvcZorWSDBhodoJ4cQtnG\nqNT6\r\n=m14n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"49e0ffa81181dc692e5a26c35eb74a4e7da7aad1","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.5","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.5","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.5","@storybook/components":"5.3.0-rc.5","@storybook/core-events":"5.3.0-rc.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.5_1577734855588_0.6721835737330659","host":"s3://npm-registry-packages"}},"5.3.0-rc.6":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c41d57f2046e9ab0491531d28a623810809154c3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.6.tgz","fileCount":73,"integrity":"sha512-yaOcE4o8rK0t26069vsKVXh9Mc+Ixjh/3/LelTqE/1aHzvnLw2MA2WrK4TYgMXY30CBsNQQ/PQgnefqGXQbHeA==","signatures":[{"sig":"MEUCIHdYiFX9w0J7Qp3rPavHW+MjV5T+HxbTYH4Vmt32k1f5AiEAt+t1LO0NrqZuxDCLAa8o+5bhPcaqj3zGSBfYVC0Sl54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCwbzCRA9TVsSAnZWagAAuLQP/ioXEva5sZnIoLjxmogW\nsoo5T6W4li9c+32PGGbtqH4iCSnaIqcNC/+It0y4yzSgKtEq91dGhyNkzJ7C\n1hITySMHrxJQ0llO+u4f3u8WdlYlTAZV9FI6Ks13DHPXPAbLEhy1lDzSNjaF\n1p3UrjTvw2mBdNU1nLoA9vGdrxO5q4rzKyZi9D8Mqrs1yRFb6xE8FioRh5KA\nDYOwHuU7GMZ2TqsONoFTfcBkyySQ9I5p6aLUhY/PUL43tcQn+RniUu2FDbF0\nuipqJoFzTQRwm0uMjBIYoe390ZNPTjUU8BfEBd4k3bj3lsMbxGV1jHdp9CxT\nYSGdDxeQ74AFfeMmpdFVC2hMpWgk26zornGbD6hbdMcrOCEBlKBehQ1cPdOx\nA9SPdU0IFqrPg0wiFYFU9Zg56sw1oyfq6f76WUgM7dbQ63u7j3lK7dWTkfl0\n37pn4cgtBGcPt54pbIJNsDaBgzRmZ0pIDYIxlm0QMKTamcTfwob2aVCaGBuE\norzFkBY8pb8J+mxnPZMVEcSN6SuN9fFhxWs5C8qtylNKRujFV8FxY2wnWjQM\naPv5ui+pwSwhn1+1gIs6VTT6pKLAmpUrKVMm3dc3Uhj76Q1YE3tBdpXulO0J\nu3I2AV8F+MRugCc6RmuaGI04wyqJ8duxTm3ghYX/nZCLPAzc2aCzyXd7MfjE\n4Cxc\r\n=0Vfh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"25f36c6492c7d815aa70d9fb5615712c31019738","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.6","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.6","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.6","@storybook/components":"5.3.0-rc.6","@storybook/core-events":"5.3.0-rc.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.6_1577780979253_0.26840333630329516","host":"s3://npm-registry-packages"}},"5.3.0-rc.7":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e887c65aabd2d358b3a1fea3b7d497de7493f162","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.7.tgz","fileCount":73,"integrity":"sha512-uDfz9pBbzTCKIl9uvThpNtRaSC5A1ppEqTfm+tsK3rUndoIyzLIC9WAYr41kAJe2PPOfI0ad7ZV3IXChJ4gHpg==","signatures":[{"sig":"MEUCIB0+5U3ijLLloOaWhG8uTdXZYVIzwDg42vWKwZYCYPD9AiEA0AM1bfoeJ8BMzoQqLIVP8S5+CY3+E+na60Dc1wJFSFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDV62CRA9TVsSAnZWagAAunAP/A/bvsWjhwZHTd+EsRe5\nmD9hbzO1l+y8wOuuW2XO28t8V2t42UjWnqEmZizsO7+zzjsdZxvw6PFpZMf2\nDcqXl74P3eVZle9tG4NbzkXvJs68WKPAVTZ7rTHqgdBc2iFcrJlGebK8nDWg\nT0a8p1w9erLTXmwaExqKUTF/3gtZY23UkwGuMeq0LHlTsvggX/Zz9D2HbWto\neuSxZvzAUy5LIFV/AzcxzvYyWkI4c2z9rhBr6fOGYr8nCR0A5ZFyJ4hbQNrz\nSREKZyFSiEDfuPB9ylEPas+o71flyX4PfBbBUZ1Dk62yj7u6hDuZTRijDFK+\n5QepLLvTtXczcxMglN3bBWyTUK2S3MJFvNjQ94+5S4hgygrsshr614AwcnAm\n+dY+JNPa5gWlOUd1wrv9s8HXLDlObm9ONuvqW6UiHSM+MRHry6tKg8QXEzM3\nEj7s3MX4BWM0rMRitevp5Ux3tackdgmuP3bkRQT5mdu2Hud2KPrYnrNFGbNO\nxy4GJXGLIwdME86cBfeWY/hNDflm2VBdL48DaMcSRrAwBirbCRFxO7unv046\nIpn9PZxxKrXNIymb1vkJ0i4urYMJXO4k/5RjVzdOsfLggS2px8pRlUu9cPN5\njdd0YeINxb7a+qpQUWko8+hhh2QnLsMbrZbLCZfeU1FRLV7M1qRb9Y5b5zAw\nD/Jt\r\n=5Azb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"f54e19061b27204d2b569db1c0cd720eb6a5b25a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.7","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.7","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.7","@storybook/components":"5.3.0-rc.7","@storybook/core-events":"5.3.0-rc.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.7_1577934517660_0.7219963524081363","host":"s3://npm-registry-packages"}},"5.3.0-rc.8":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9657be4b9bbc29d4001d0615ba99fe90b97ce81a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.8.tgz","fileCount":73,"integrity":"sha512-CCeTZUJAmfE2mZpbPVeFGTgOGl34WzovLpY56z8+GpdugZ44nzQNl2FuNlH3Au+JlM5aBghedMG4hTEdC7qCug==","signatures":[{"sig":"MEQCIHzpBRhyXVEsHoK6yN4Yw+SdDNMK6EKlVcAs+RyvyzgDAiAef2D5NA4DqNq/EJioLTYvg/i+m9SZXJcrSNVINOTJIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDwDrCRA9TVsSAnZWagAAc74QAJSMnlhCplDlJ+RGMMzR\nTp5RbEze1HKupZZh8RwsVB8IMT/bb4RA7pJLdpu58Xw0qxKc12Cu/zqO5OkD\nB3oKZuO4mbTeeS0wpUPySPFehyp5n/Yj7kmifWo+qJ3OfAwrk+OeQrMqPoEL\npzopxr0dhGVBR+HZK03ziTJ2gWwfc1pbyYsQHFagm0M5KjQ890FB9dDOU+mo\nfsx2M2SUDMIAe27wYRr+d23Oxd7IiquXKWyTMv1G2cxEgIFsV3DQx+SwRmu+\npz6i6pC+vvuDVOYWq/cVeokV7lbIHX5eElW/jPduyU9X1vTd8sEIr3HT+hpB\n0e1lcehb7H3aSq2pmHnN2vzHE31mgiDcG1Rz66IaGlf7/zdKrojZyVm+I4ov\nWEjKlk8ROx5qIUF1Cc2s+g7eaRO2UuYOyklanzI0bzoiq+Yia6euuCREwZwt\nzlKAqLyzbKNUt37AbT1mCkCpC9SRUxB2qLSk/F7sNE71VYdo1TVnMvCEZBfS\nAzy0tmsOx4jzgbgC1yDNfiV/0atyCtwWarjslYwyByQCaoWLt1D8zKQt6Lle\nRVVIkTnxE0j/PVeQFiBQj78hhw6jAb3GY59UW24v6kt05o9SFN2PsYL81KzV\nTj/CFxuwQKpdNdP0QR8H/7H3HmQgMAKAzKABzFkvEBf2eTCpm5bcyWRyiNjr\niWnK\r\n=LQWR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"755e90db0fc60592298ee8cd327227fa86dca6b1","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.8","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.8","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.8","@storybook/components":"5.3.0-rc.8","@storybook/core-events":"5.3.0-rc.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.8_1578041578964_0.2533047716418","host":"s3://npm-registry-packages"}},"5.3.0-rc.9":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"2457360fb6ea565f64aa1588c03ac561ded998f5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.9.tgz","fileCount":73,"integrity":"sha512-eHDWvu05wCSSerjHnFJir6yCQCqL3T0h9+RYOvk4xna4irIXYFUASnMa7oEFIw/5scHcSWBJIay/kOAexJPvWA==","signatures":[{"sig":"MEUCIQCnHuwfjwROdNZ09df1RBA+AVi6hsn+WSbwMn6NMpKVqQIgOJaHzagKomMUekIcFLUwI7T2uf01kTQXKmVJcgXkfow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeEIytCRA9TVsSAnZWagAABp8QAI7+D/Aw1dXkVe4eHuK3\n4ASVst50It2Ix8cvoSQuHxyrbJkYcSRUwN+R11KOdTD3VAE/lHFRgyCmtkkW\nz5ZufFqbEReB4eSbhX4Rv3wiTyAcfkfEMWKcNjP03sjrkaeM4AyuNpNSt8gz\nS68tAuD7uhK1ABn26Wk9ugw/zgz13wh8f4hiTHJME2SN6o+7gdIUQjbeEssK\nO4pLr992yy/dGOs6XhO4Lp9NJcvzrbYGtRGCuzFmsu1Reola0fQPOi3kkmoU\nYF753D/yGHpyHJD22Q7+oIvaRzH6LjcNOelUdO0e6ratx1IY0CQi9O/2q+gh\nDXU/j5bkb55LxxgfTZzy19WCkZPNkcMS7o6ZqggGpMXr+nCxWLTMoCANsHQk\nZVe7Fa3snACtGbsTqty9uhax7FmtU0ETGMEW1HipZaaDRXSVcQ60i4gZcx/m\nXc7VVOGK8x4p4zGaLztOzALSfVMcYcGqU/q1i8CZt9eLPEPHG6gmiA2DIJSN\n0w3v2yMaVNLf51hLBtq7ZvlcHAV0RAaGRj+IekJzoOUpap7mEoOFlBrmWQgh\nEfqqCoW6klRtYzD9mLdPIgTNNLz+Pg1OGDOGMunCaeFtLnM7d+BUqn46rJgY\n4m2XttfymlbpeILjJZFjgjPdLHqCzAt8EwwS8r0wLctUiC3kr69PTUHPUMh+\nNc/y\r\n=b5te\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"16da56cf90998ec4da7c423dd3868850bbd250c9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.9","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.9","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.9","@storybook/components":"5.3.0-rc.9","@storybook/core-events":"5.3.0-rc.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.9_1578142892921_0.4618832634396761","host":"s3://npm-registry-packages"}},"5.3.0-rc.10":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.10","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"54174f133ece9849df6306e775eb2ed2f09e8266","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.10.tgz","fileCount":73,"integrity":"sha512-6rRYb1UTHPPHlXed8ODgalqn8W1ikmEFFE8WVn7OKCyS6smbCrGWa12bTKDP3otq3CEyGv0qicie1dI7UnLzww==","signatures":[{"sig":"MEUCIQCPHKamQ6MjatLiib2hd+8fYZpnejuND8ys0HJSQ2Wn5AIgAQ7P4Cp1SUXgVZC26WyunPJDS8nVYIG025QsL46oq6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE0XVCRA9TVsSAnZWagAA2nwP/1VFCiLIKbThoktpjEr1\nc8jy7G+ncBwcgYukYVtlXcBuv3uEZKzP2PLNJflIprZN+UaNNAM66EUzqyd+\nbrzhLJ6auqhaeUdC6/wHoYgphDl0AAE9VKLeowc4sJzzJ/8MSC0myPMtwZAp\njzciYdL/iXzfl8HHX4W3tUqAqAc6bIdmgcASl3w2G0/xEkHBl9GZ9nRot+Pb\n6U/5VnjdLT+Ik7XM4+nHmV3Z1kWtNpT3CLJgaM2vuVtPUxBbu7RMzHTx36aM\ntXyvZ6WpSvc0XhJE/J27/Q7Mra+V+FQ35cAbVQ3x27X5BbRfRGwNFVnaX9ed\niKamFFVk8BiK4ze9ZbMo7MV2qqsAABou/jFP2DMz9NqMR81wM8Iomc8a90u6\nGgWTMOWxfA8pydEvl5L7Gu7ZVRNfg3aRWwiHTNAStdvyfpV9MFJTleWCuQig\nVkz6qLD9EQqbUwEhk7TbuYJHKzIAM9S1H4h9gqSkMq8kGyrCURyNTsNKPHpI\nm2W88RY6o8BPek9AvFx67OIpIJodp7O6p1yKUXCuLcHihCw8yOAwGuoSCrD5\nsQ1yWn1gtshAj+TW8OJ5cK8Hc1BemHghO1tQprCZyYFPNSWRrhF6naaOOAfI\nYPMaFx3wwrsFX6NC/+VpQ6mLj8Gbzg4R4/E2UrpdzfvqdEjoUDRis10bZNS5\nDPZs\r\n=hbvV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"70b3a7aa30b5465f11b42f97599144eaf00e6fda","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.10","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.10","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.10","@storybook/components":"5.3.0-rc.10","@storybook/core-events":"5.3.0-rc.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.10_1578321364532_0.012293643417459421","host":"s3://npm-registry-packages"}},"5.3.0-rc.11":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.11","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"321296e2ba033d03a998e39c8ed249e4df1994a0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.11.tgz","fileCount":73,"integrity":"sha512-FEaqCHTOPU1nU6OZvnVuz4XIGwzU2kEqi4PPf0FdT01KosJVhiggw/SxhFU70AIzMj//3vw8agGR8o8pq4yyuQ==","signatures":[{"sig":"MEUCIAvqrK3QvHxmlm1fWFOPBkvkG35mC7bnqLQN6X7gYHDWAiEAoacLXYcmOIaezRxcbk9zxqj8Ruy1PZLpacofHmPb0/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFI9yCRA9TVsSAnZWagAAhbMP/36OrywasKwA/0Rg6+mt\nCnRgSUjtUTsN++BseGdZqnztusxkOpbV6rnI5fRzBQrxpynIcy/T6qNTObha\nYPR3RchNH+iqQ1jwbIa1rUeyPeBamzcTLDiBmpbGj8/vFG+5nIy+IlG2d2wr\nW+pKbGh/WGOCag6Mbrj2+8e2UKYOPhPJxgSDW60l4ccNQTIf9mNL0Z2SRLhK\nl1nh9M7pT0ruES5tfgJKnR9o24hrJHAHb5cf6vx5mZJwfQieDQi5R17Ylm2S\nEMwB2OsBBK3xCIdErkeA2E2SflA2v1vhfq0akGqDj3cbPfUTyK1m6K+VcFOB\nIbDK7ANd9ZHfMpTWGrq7PHqMl0dYJ9oMaEjX7YmETLauUZQ2RBuYpX1xYYF4\nNL1b/cO4uu8sn+PijEzSPNDr3HpuxT5U6Sz5UuM/23fuX3rLJYa/A+cQ3NJz\nOO55sxRDZ7JKa/V+AGHqv4j9Uipn4Pvlj9j6FjeOPAeOeKCzGzTWbz35vZvO\nuBzbAy9EFIQ3RMixeHLhz3/5EBzkk3QKTDcwblAOuna6vmFWHkny+pBcNanT\n3RRjTwoL07aMFBtSpf0j8pWMX0hESXQxKULmrkB44hmQNUUZRV2DoqzrtftB\nmEeiisVKlUOJ9HXun/KaohoY7ZIor1GDUb1DJBpJZrJnSPTJdLMIZQjbQn/2\n+zJS\r\n=RkTW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"a44240e42090742fcb7cfa8e76c53cd8cccbf3fa","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.11","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.11","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.11","@storybook/components":"5.3.0-rc.11","@storybook/core-events":"5.3.0-rc.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.11_1578405746373_0.7539837279223793","host":"s3://npm-registry-packages"}},"5.3.0-rc.12":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.12","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"74be99e09608e5507acf429226102ce6897dd515","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.12.tgz","fileCount":73,"integrity":"sha512-fSvfYzHHZn5Ur8QBwK6tFc8WlQUCZvg2HP4VewesmzdcRK2/Q9nlb7XCZqPGHaRo76RhuoopCRMcFr3xnFZJwQ==","signatures":[{"sig":"MEQCIE899iOmCGJGtc0uu+SgvmUdiR0c+7VP0zXk5kMrs9ssAiAnfrVLle4TxgRLBId388S+z7eEZvNPOVSHlwz6SFQ+kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFe4yCRA9TVsSAnZWagAA7E4QAIp+3cqkCs0DzKZ4SLPu\nbOw7JlVrgX86+Z9s/P9pFZfIgWKw/x041cWgfwBSlmqRG8myYxp1nv4S8DXK\nUPMf2lSsyFzdyJFIUKeM7PgBZikksKr+xDfji1MYEqytSnzN3e7qiYPyvchy\nYNVW2q7GoXf1T56Rh1QVPtkuKrETK3hQ0jl5s0NF4Mh1Dfxsf1ptpEZqHA9f\n/rcUpzpVlArk8UhCB4hP6OmojUPjHf2/6fyNRVfg6Wux+eEA/SmwVMwNSkJ5\noxd9uSvLC37SMRha3+akf8VzkCMs9jUqohuo/d9L927rXK45gNjHF9qoXt+v\nym3K5WtxcIdrMHlBkDClMyWVRncu/xL4RGHTONggKPGDoc02/OciqaYwxsz8\n/HArhD62K1PT/4UDgIoH89VHD7VUGXR85TUG3iWG3t2b2GE5Py0ojHnesAay\nbdVZBmXu+/eT9EXsoZ8pT0z7Rx+mmzzfk1+BAUkSY/17qsT1BchLbo6aAcjB\nKwy1V/faZCvWKXPnCE9jHXdVamrAiCS2r8UvvFUmqjV2qJMfjxgSqUNUKRV/\n/hmKyQ9QMw+cswEbw1wob4HHxbpriabATtukdKdqpzDZcwHh22zJ+TsUM/de\nN2wuWhiGd61WQPt3orSzR7FyTrF5tHaW9WUqMUPIjvx1ygB82tnoQYAhSBt4\nL9Ge\r\n=2KvQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"2c0b28727a924c06028eb755e7b11a06c82ee464","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.12","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.12","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.12","@storybook/components":"5.3.0-rc.12","@storybook/core-events":"5.3.0-rc.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.12_1578495537781_0.7223844613107506","host":"s3://npm-registry-packages"}},"5.3.0-rc.13":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.13","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a428f77ac139a463a65fc0f28a23c4f1d6c0812a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.13.tgz","fileCount":73,"integrity":"sha512-Uk2Xp5cXzpAtramrKKgIsXf+F8ARG5gbwogPOfmy2ft0D22WXaDbBCxKcqPwc4ONBrgbv9TyQYpf3bKAl62K6w==","signatures":[{"sig":"MEUCIF3sVDTWggXEJaUH28BmiIm4/tfOLG19/MZVoabKBVjrAiEA+tBWTAKGY+m3Ou2ZMkjhhhE2I6QZI6FCon82jJishGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGTEJCRA9TVsSAnZWagAAgOYP/2GApqz7Dww/1RJCNVpv\nXqJpAhCEVpIxESXnXmkVuRY1yqe6ud3ITLTuJ5g0q1wZSXWmMZA773RTwIYI\nUnnAZuOTerE7JfIWQZvVXUJFWN9hz0X11CTdn+IiYHvysa1jawZPKjF/lfHg\niIDaGqG9RO8OLEykoJumnV50QKJrT8q2JcfzgOcf56Sb3vOOm2DvEytzfq9Q\neSsNR2B2Xt1gvdnBfzFBxxiSb2fDRkGKkYrQ/D4Ngb3mH3fzuk90Jnwvf7di\nMLWRi5pCvbf26GibB6m+rKUIb0um0H1th2QOvmky/RiQNTO5ygbtMpVlJ8WH\n0V84P/XnPmSKgnkzM71SuSJRVE3/F545MSfWUC2GhOG4967i1S1s/xftp2Rv\nQ7uYhsCjXH8Dp4V+Y77gsXMUyEkxSFf6wfDtntgZNijPMYd6OVY4AFztnNaR\nYV/h/6Y9GK491IyZEodNjFBp6OPiWrq8UUg1zzL4rOmMLrW8apStLOhjgc3H\nNqC+HSmU9UEGbCX/7ed7MRITDlWU6Z3RUYVk2RP8oxqMskjtq9MVaqKtk/KF\nu5ZGkrsJGCjDtEKHplWepPiJ/Rf1SFnW0yC/EC+RCzcGSfIKWwqdw8mtv0bQ\ntXvkbl0X3vE4P4O8wTvWMM1XOO5dxIbotGN2NdE9j3KlYyXvg9ZUpuzNqigQ\nXBLS\r\n=C5Xb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"90421068801bb17ca58ab29e6c10a73d807f3d87","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.13","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.13","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.13","@storybook/components":"5.3.0-rc.13","@storybook/core-events":"5.3.0-rc.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^3.0.4","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.13_1578709257029_0.16369374556115823","host":"s3://npm-registry-packages"}},"5.3.0-rc.14":{"name":"@storybook/addon-knobs","version":"5.3.0-rc.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0-rc.14","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f264a8d95216cc913f09617ff6432bc9c108a949","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0-rc.14.tgz","fileCount":73,"integrity":"sha512-wVxVFVLhpED9qjc8HKuiINxDsdtu5SG0y1KDwFqcSOiavoyNCxpLHLAwbgHJBb7IU3auaNk9l+YLN63gAjzRog==","signatures":[{"sig":"MEQCIH60FFzXZRHVs33Tos542DGyLfOdto0yQoCVKcmEBq6GAiBuC79F4G6EjHMVDxw3cy/RimsCow2RnxVcxDA5iw2Asw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGYz2CRA9TVsSAnZWagAAm/MP/iLIrypE2RGx4mfHq0UO\nEJgsCU2C4gWTUJkZufapalej0QYqIqCWCinB/liZ3LwXjjzrRa8/ZkmAUmjt\njZD3AIYDhRzYFN3F0HuWVAWeBPssIH/hJvOht2zA6dvbK8mXTIprxXhcMphp\nuBCACNmweWk4Ji4/UYcotCcEwNSugYdxcISL2Cny3QzPPpdsVYutIwPzbhwQ\nJKpvdTVWcMw8r+52RGvA0mjBgXe+a6eXflZ/DTjfT/BXIenJJ8fW73EpNqGR\npwLBX2RffXl09ZJxoUoMkcaYbCg3jqiW4bq4xP2+8mQLNnaMwBT28pJ5nYfH\nrf15IpG3fHlrPcuYr67OJkXqMWhEFGUFvzG22YiPyTh/V+zw7tn2vbSV5TfR\nwEh07GG7fEM/cM7h9cl7b1XaiSgWifngh7cJkbjMZYTloTQt1xkryOqF9bYJ\npmG7M8tZMACpswoohnKvkdKe7MS67MNE16mmFmlWJ11jkOre1DQhHANfgCFg\n0MhL3pLH+lCupdgzvtuTGH67q341qFcitDJKyV1nw0UULp3mi0Vtp9TJCQGI\ndqaDYGE66V+Tb8EkuRiffKP9F9HgzPHlbGa/Iv44LxgnG4ul2XV8swCQXSLV\n1jrTOZxGCmUj5bgbPddvEk+b0/RAEQG3jMWYqo+ovzBlqLKOXcrd1MONyAX5\nTg2a\r\n=8DbC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"aaef883c4786495bfdd1c0745df8c1302acb3255","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0-rc.14","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0-rc.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0-rc.14","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0-rc.14","@storybook/components":"5.3.0-rc.14","@storybook/core-events":"5.3.0-rc.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0-rc.14_1578732790026_0.7613338070753892","host":"s3://npm-registry-packages"}},"5.3.0":{"name":"@storybook/addon-knobs","version":"5.3.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a3ffd6459d9090c3ace247aeb67cf301deecd43c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.0.tgz","fileCount":73,"integrity":"sha512-UamwIv8c+7VW4T7QUsa+FbcOh2cc7EE1RsW3nQGNhQXGlRxQN6/AURBCsHtBthul44nZ9jZxEkbzFrdEnw0d2w==","signatures":[{"sig":"MEUCIQD4T8yW6xajF1ZRTzVQrQb08tDHRir1g8B6qx2RBBWUqgIgHf/71uuCRrmRKjTV/HMzf6E53WnvoedA0k3ZqGv85fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGZcHCRA9TVsSAnZWagAAXPwP/2YmKm1Ou1v+j4urXBv5\nGnxNrTWVRWYFW8+bJ/Henh4si/HV6IVPKzPIRMy9Yf9A9zH1UDnTWg1Hvn0t\nPA/3LTjZSGHEaapyo+2FlRnwfEfpcSDT00HEDM4CZnYKxyDL3IlkQqDpQ4gA\n1ymvHuruPrr70Fdqhdlu3MyV5sVDVipa8eFrLNQGqmb2x8wvdwL5GWz24TGV\ncz/KCSFIJg39ykGb64LrI063+j8AuHkB91F5YiOlyM4kCsbUYE5J0l+ZQUAQ\ngRSDeGjZrsyJpW3s7lQsB6HWdUeby8nbNAOtvRuFiN3lEkVYmbJGStbMkeNh\n5YTuacpyyT+4RyIvNxfbDnHFk6haL/DU1ofDmGbMZ+DikBUHvfPCMpzbNGPq\nfpkobh/pDRvqjenbs+aJNPu3ATV2cbY5X8rgk7JNvC7XQ6o/Q7dPFOTDpsHz\nWytdLiTdk+vsPgfMt4ZyZFoIw9cCCinfDXXEs2B6Ylx/7LVy9hSti+FPHB/u\noX5jFDMqJ2/yD8Zv1x9d6+JsoqV2vhT3ghfCH4VzGx4kGKmRTMosMyD4TSS2\n/Ha6gFBH4PbBzxXTgApur1zN3SlA7Detqfz032hFbYvjXdwNjRYesUCV6995\nCKbD1T1hFr5u8ueh43fFQu2rAV4OJlgWYl1NqP4BceSfnGpBdveS0eq5lhq6\nQNCX\r\n=8DS5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"ee7b9591ba9b2c1eec15e8a67bb2d52db99aa1f8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.0","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.0","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.0","@storybook/components":"5.3.0","@storybook/core-events":"5.3.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.0_1578735366914_0.6388766616258321","host":"s3://npm-registry-packages"}},"5.3.1":{"name":"@storybook/addon-knobs","version":"5.3.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4fed973e29829529889a9c887e55dacdd59e3cd6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.1.tgz","fileCount":73,"integrity":"sha512-lhldozJTcWLmfygoui8Zz8Ztk9GWO/tpowy1KcBRwUUphQaPuthnz6Png29k7JXEuiidncKDb5cIkWYZGMoXSw==","signatures":[{"sig":"MEUCICfu+h+Tddq3CxP0/YFG1DuNSqrho0yuBaNjI1ZzfeznAiEAwA8Uh8Q4SrdODmTycoQxvsoeT6Cykr5uebLo1cvptsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGz2UCRA9TVsSAnZWagAA7mkP/iG0R5F4BnHrWt4Ve5Di\ns2LOZur6siewq5dvOcUOt/kfESjN71jFla59Hc8EdYu0sDbYhE0EunVQEKy9\nDGsfl8CNaJ7CzgZc2bHGF5XFitv5w6JGjYf7+4MIW1MhP7b3kq9SOmXgvzq7\nWFSZweUdBHk85XehIECP44D5oi7zR7pJkxiToVqtUkLHKAfNBZxo8GDNNwk1\n54+akAG1sT5cooClACSh/odaNcbz0m8qQA/trCkTOBqCWRdGrjTDolSdp5QU\nzsRkllTJ044dsbsLs19Swl0mfLuAkENJ6qqKODW+o40rbk7GzzHekmXFK6h+\nq01LOO7//EcUe3peReEAPDKKQZOb6+ILefePD10RIa3YtR8NOKPCWPCXmgss\ngW5ZJuoRvZQhsUb9esZvFLX5mxtOpwMB0ZeQTrp+dYBI3AW5CDAoZOv7CF9C\naUTd7F2fa84XnwI2QbpXbTH/ZIe9hcmcgDfmLeMcwrYJh6puNRwcuqMq5r69\nkQIyjMbspIWs5tvXTVkKytpcKjKaGVQ6j2zpiEXpZMCmh+DjNEZaUJTdUHdJ\nJ1UbXAQbFBTXK2HgayR887BDaiWs1ssJGm+tl0iNmta5dpcSztVkCqFnlhOQ\nwtQKFlr+4lvkZMpqcWRei4EVid2A6AJdWtuCmxSNy7Lm8NPEgcBKjOMq3gfm\nfBM1\r\n=DMac\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"14f9760411c2087f78e3b65c5c63947c2037c52b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.1","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.1","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.1","@storybook/components":"5.3.1","@storybook/core-events":"5.3.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.1_1578843540004_0.0055364501806649535","host":"s3://npm-registry-packages"}},"5.3.2":{"name":"@storybook/addon-knobs","version":"5.3.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0d8caeb3a30d0b7647bda51445e59c57033d62e4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.2.tgz","fileCount":73,"integrity":"sha512-5enTXIoVzepQDDe55wTQOfqT1cOwngjlakKar7lYWqww2ixVJJ3xMZ9dLqnYZkROMsN67sDwmuawvze+W5lbEA==","signatures":[{"sig":"MEYCIQCfDCA3uuPSqDGjp+21LLVWvKiTHlAJhMzWJ3KvjLHwbAIhALXEwH0ZCkbIGLLja9UIoJDRd/QFBWbj76oJt8UT6nYs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHI8qCRA9TVsSAnZWagAAqyMP/jjEi9e6J6Ufcdj5sSx5\ntyamx7qjIvIsMaYDo/5Eoo5QGXdZ43SsB/jP+SXxpdossjaju2boO8im8yb2\nbTWS1a3SNXU+NKcaMWPrUS3v8l/1WJAUU5an5E54v3xLKdaKSAJ7i+1atfe+\nNqo23sEW24R3KkjbEokot4oRG3/TJbF1ZqC5cftdRZSiQ67korZujlzmLbFZ\nvfoGgszSJLXHGKa8lvj/leYnFXqVqxaDCuwt3h4YDHXqSnchQiUIYzaMD84Y\nbt35AeMyEbyoHjkVAWmIQ9CfftuJTIo0aWQhb+Dm2kEMDFxZCTOzp5Lq92QK\nrwdvWeVpjCZ1A9xe9SPkAOJld0gYK4IPXhYUnVRbMe0ueavXa/e61NNZctXU\nC33J/ZYkICLnHKlb33gHd5cagLbV3uak/zbSSM0+5E6Hb50Cba9jFhmIwvqX\nk2DJVyGb9IOcBYRKRmdz/03CQRw7/T0NBt4Z74FF6M4FTdj7J0HTdQ3EDdqK\n/CFVmoEhy/UDJrCiT5Qb8BBxSJ7s5l5WXId4sKK2qURZrSPuZPNwc10Xj+W3\n3d5XBHNfbeeiUSf90nUKv/uJbQ8YlPTtMiKJrLnOP02FfFBqaqT99m2m+8QM\nyU6ZTxc7GPP9wle1VvS2aNeq6U918H0bJpY1mM97S4f2FqtnxA08iISrPlZR\nsjAr\r\n=PVlX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"5d581285e2410e238c1f0d7d5567d9b467712620","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.2","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.2","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.2","@storybook/components":"5.3.2","@storybook/core-events":"5.3.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.2_1578929961525_0.7981847550862982","host":"s3://npm-registry-packages"}},"5.3.3":{"name":"@storybook/addon-knobs","version":"5.3.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0391eb8298efd8b3b16edf08482e79862222ee2a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.3.tgz","fileCount":73,"integrity":"sha512-PWCUtiBKCuxmzoCfQ4lTJOh59CRhFaWO2aOZaTzMixyoAbf6EjrX3O/o+PIplrRmpX6P7l/r3cq6fwU2cWpCqA==","signatures":[{"sig":"MEQCIEnjcP1u2T6i8Hyp+Ny9VckHGDLC6mEZgfZbWhDP0a9sAiBBnt+mTrnLUbVZ1vbQ5Z7Z/QKkWieid3xJZB+mdiTwmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHZE5CRA9TVsSAnZWagAAHtUP/RWIDWmtzCwpQDcgXx7m\nDN6z7793kkXxPOMQv0hLiRHFClx7bhDCe90UU7GlKBf+ES2FcFlH1KN9Dxtm\nosQj8ZhW38cymKi7C+q/cGbKyGK+80JmXh8C6COsJQktuORrub0lB6/7PxLa\nOCK2hlfksi1KiNDZtkTGbXANqGxnVEE82FFQjue4yhZ2HDttmFTcP/ePCwk0\nPDLHL+Z8903317awMcRdtlsvdqWGlcWKHjIQbBa32Kwahk+ErSnFQeAY17o3\n17F6Y6WVjreWA+1upr/UEw3858xugUOYodUZbV7p0xo/PxR8SfcSRoA1adH+\nuKVtN25qkYIhWt1GgKxeY5Iiv5SazL17++ITxT3ZJXKl61s5fACKkmSB4qlF\nvfB2qwlpVRx7GierzKSo9sjARVLUPc/Z7ti/YHAwmWNnAz1VvrVosVIRtTBE\nbxuVpEvjEeDrLgXJJ5SLpmNpYLeA8r7YDWFTPoSU7NeQUMWTbzH0f4NJhTzk\nNSJJxLq7YzKdIlpsjMYJRPJrtifsBa3JRSV6RgkjmvR9Dzm++I0FDk590Z1g\nu4me4m73ScdPXQsXNTyo2VPs9L64vesevkYqcke1SYJZbQNP6ZojyYx6mAlz\n6csTu8b0qp8fBq3w5daNnq66c/73k0EnHKyz4KT6WZCX4EJ4Uvsq/6o7fgY7\nRZ4z\r\n=EPnk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"24ee5fa7473282d0d5ff0b2ac9fa6632990a8917","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.3","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.3","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.3","@storybook/components":"5.3.3","@storybook/core-events":"5.3.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.3_1578996025220_0.8117709513518259","host":"s3://npm-registry-packages"}},"5.3.4":{"name":"@storybook/addon-knobs","version":"5.3.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"779c77424f76d232c60a2d5a23d1f5c3b7915454","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.4.tgz","fileCount":73,"integrity":"sha512-XnuVtSi8js4R7SCqJVKNKd0xQxU6QSBrfgtomoR32xq9VX559XoJpS7T4LDrQSlJ5Iz6tsN9QBcXjKGoQJvWDA==","signatures":[{"sig":"MEUCIH6EQt1yOkTvYunhpY5sAfDXMvuViscOSD4YJhk3x+PDAiEAzN2V6S9EZZSIYmZfJARt/h5f/xO9ZMvC/zR3eSGd3BA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIAGbCRA9TVsSAnZWagAADbgP/j3BVLxLuzkI1ZsTNPpt\nO0sE4mejr+9y1LXWtn84/caQgJXsySCupintXbgKhlbKF2IEAy4yL7xodthV\nm2RokRJ+ejeas7/xLMnTQjqSc71lfCYjo9zj2HBpHD8AU9mE6VpF1RrVn6QU\nPs7xD511wJkcgfhvKhHjoSG8Stg59LElZ5gWc+9yLXyfTR8yvVOB+pp4LVg2\nLm6UlxcZfR5ii2BmZVylX3TQKKY3ap59cKr4mkHZvOlDqID4/mOGnHqk7Vpj\nHsz+2ST2T+Kq/1vmVRZz/f0FDieuYH/fgWc+JNq68q9s96bhMio1jDDzXY7C\n9UMrRyx4MR3VBD7vGldm38UjV+a/iWeCADonhHJgn61sS9UZCvtW8jDAevf5\ngWUZPvXaXxkVRJPcMajVEydpUCIsf22CLi7g/iIIQCDbXD1AELV0tpAxVQAO\nBC8khNdWsaJ382GNSY5S5pdBdEGfp0uu039YvRf19UkM6WmybmlFkYi7MPPH\ncr/GTM4Bc+ty4D6yEo1e/dKGnmCt9+YsS1jcpEdOXC1/N6dJ9+Lljj8O0ZiI\nzEYNhQzqw8DhdWuycIsDaFQNAfqr4s814lRjN6fcR/Dz8bxO0Gw5OJqiHio3\n2hZ63rakGo9KMbLaBXYSrHmX80ZAYQ/lWPocmm5+jcI78OaLfvOH4zyDUEPn\nGa4o\r\n=4GE6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"25850e1e34799a8e1da798e91873d2420956540a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.4","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.4","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.4","@storybook/components":"5.3.4","@storybook/core-events":"5.3.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.4_1579155866702_0.33463848882137714","host":"s3://npm-registry-packages"}},"5.3.5":{"name":"@storybook/addon-knobs","version":"5.3.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"73c96377172182776031c6fe12cd02819b3ad4f5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.5.tgz","fileCount":73,"integrity":"sha512-H2hj8/Q8I5BpfqM7fwsss10De9ivKJ04jWssDu5f3fCravg4Kd3SpCukwDUq/NjRryYtzW/sjScdku4yq2fbQQ==","signatures":[{"sig":"MEYCIQDziWcDHl4EL6fXzgC1ifBQ7PBxqQe/KnDVaqs8CYTCIwIhAO1Cak18CoZmcVf4GwLAeat2MBO49iwsr9DlGwr8Q5lx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeILrUCRA9TVsSAnZWagAAA6sP/15tta/slFUC2hbvXl2h\nqfK+jRy6e64x15QKs//1sqob8Z+6fbrap/GFhK5ZZDxRo8ohYM0SjN16d+/5\nPSZdYfV0XRLbvCFQoVd+nm6hk2nxDs2GW46uxdfWl32PGa++SayoOl0UZ1ky\ngPcuWNDPADIvdEOrXnTFBaLno2+sBigiwQMTXNv9mmcdSPojj6zsDJEOhz1p\nKXQwMOfvvlhuj6DH7TEEhizIq+CD2gM+fIwq918EzVZw+mQR4AThwMw/vgOQ\neDcbNwY+8SO8N0feLnTorpnORz3TLaY02iEmpXghd3Il/y51408cydjI2SNu\nS2OaP2FlBgcDzf7JSn2R5sIK0TKJArOIai4MLSdJaUtFdpItttktYg4H7aT3\nAQYCYe7wbXi1Euic3xCpFRLRruMpDlAzUmHxBa/6zMPiKatml8mJ6bsDd2rR\ns7RPxZS50QZlXWy7hj0kdmv0ea8E7EPyvKO5TEWBDf16vVMSGQnW3Fj817Gd\nJt+daf99EmzQOpaIJaRWm/3mWNbwJWRnHf4qsKj/iIB1hjtFfBjXQK+ZBNIN\n45K/culJisTwy6nLGxYUEs+3jg0HXOoijsfjuGFnsSCgI94bZ6z/1zs4N6BE\nYz+500hNze5s+CVlNgHpkSO7nA8J1zIE+HVW8tcn42or+jQeP8E7WfqZoTvq\nh/8D\r\n=gbUc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"f32b34b493b30f1f80ceb2568f3965c6d3d14dd9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.5","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.5","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.5","@storybook/components":"5.3.5","@storybook/core-events":"5.3.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.5_1579203283712_0.15802261451719457","host":"s3://npm-registry-packages"}},"5.3.6":{"name":"@storybook/addon-knobs","version":"5.3.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"7d989ec0305c378c73dc5ccd57b80b9caf678016","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.6.tgz","fileCount":73,"integrity":"sha512-tf6W3Q94ie+HNZ9ISnM1vL6BAR8wFWEn/Ctn7yT+P8LgL28t8C7aOgkVq1Pp8QrDicWgQpmrjwKbkblSfBacBQ==","signatures":[{"sig":"MEUCIQD3X32RJs3D0xRV4jOxSD5R5YToJDnPEJHwwmg3oXxwEgIgEL6Fvt19epgEagd6+A8tH4d7ecoxBjb7RuTLmwPSE/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIW2CCRA9TVsSAnZWagAAZtYP/RgNhVU8pz4C9GVe4S8y\n/IGBEUyEu/GlRi1QOd7pnAumqEUzbZWdaWrG6/CO85v5Y6shbSEeqtIyK0QJ\n16yN0bRK/HwUW/iv1eT7sDdytvn0I/zpATDKYCtsBs6OV7zAtq4s/M/SuvBx\nTmOBXoZtSRy6HJtWmtMPrH+c5I/EuvwbfQvIPMcppdjTASBoWok88lJ3tSQc\nFbuzUU5T5QuFNeQ8hdjN099SbsurxEIOsylgt3wxN6ldeH4m0WV+OrOhUQLa\nY9NKCTV5RN04Na7PGD9q2+YRfC39qa5c9kAoLv8VbcRV6KeR5XEV1hgucZ6l\nmMw6vxaL3PNv9WkTE8u2LdE9A8sJw15ai0NYp60n4Jl5IiyrTTJjLmzp5s9h\nZavpyyer0jmq22FAPHZsJRG4PJJBWsVaWbE6f0XrxenC5D/6Ta4VO/gbPq02\nWiKOU2f71NMvhfIYLqwjEHDYtxO37JM3v5WrbEiTTX4hbjK9xhCsDIA/dXY+\n45U0Gm7QWpVZg/EcngOS5BP6ttQkO0YJ7Ner0mzPPDj7eINGgEEhW8NEZE5D\njRkdUpF0r9AIkW0rFXMrmND2oPflhKJO3KO6y5aPe/Bn8ZQZ2y372MS7gaja\niGWuTy0FxIh5kCSXsMDPAzZkUkDGhngrFRi82haurCetiPalaUbaKtOC27/W\n2DpR\r\n=gYtm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"b609ebbec1345c0162f98521a53c5890f0655804","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.6","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.6","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.6","@storybook/components":"5.3.6","@storybook/core-events":"5.3.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.6_1579249025563_0.33506745331989896","host":"s3://npm-registry-packages"}},"5.3.7":{"name":"@storybook/addon-knobs","version":"5.3.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"2897f8b8a6bed592f128271439b64106b92f61ac","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.7.tgz","fileCount":73,"integrity":"sha512-Qx8X62fDSjo00FiK/5IU9ztzmN40xIRc3qbCpkVkfMA7bxmmrhwinc5KC1saNApVNdMitgU1FTOsE7ExMk4+0g==","signatures":[{"sig":"MEUCIHxFAs7s0Zu7oMMRC8TqyTwr8OOvGFa4r03Cole2StgEAiEAibJeXTXbmOyTaq1O423+O7ls5wJ9YkuP4wbF7XpmQ2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJU+OCRA9TVsSAnZWagAAhS8P/Rw1bsfE3mEtS2I7CZzA\nmlpCdbxo3LFwpSS0xyeTkNlAlFo46zhr8DU8lOvnE3z2qyjT97/Ntszrc1FF\nj04IneRgshG10quMaqF2wkV0oKc61vUE0mftM7+jy9dbydujpdVL/VAoinu9\n/K/aThLkwlaja7CfttKlwxq1KR62/i+CgO/NWiSImB0KMvZ9saBbSBXC5WZO\nRglkMgpd+boN3sCPyFy9kyr7y4Npygkos6irxSg8JX0eA+vp9U2KlGO8yj74\n4WSCszfPN3zE2ZXGc+q9r74qfrnTiNhrQAWAUjvHCTqcM3sOtxLDH9SDIhPl\nHS2A67ju0RqqNutwyl3Ei18D3+kapOBWeqpxlPjsedMiOijln6S6uI53cPVR\nKAzMCUqtblD7y6gX6kDSsOVnMvNEGpZTBbeexY7pOUh9zKNcLZhQOoFOrtqV\nArL8JRssm+iGgL6W2xcjlSlt9+pI6r3wW0m+r2+4n0gmOpJRz7iUfuXGMi8J\nUsu1CTXBEakwQU0siI5FlANENtHVayMFYtQn1AHyvmyitULBB3WxnQOQlfam\nsvZ8cY8palKURIsZUFuWRFLLRjN7Bslx5j8s/f2O5j421GgebXRI8lzcR7V4\ng+G+fz8yQS7hY3/eRwlx3HptZeL9bBhSq/u3DM1vRgBNJq9/zKW8SUnNodnN\nx1Pk\r\n=Kur/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"d6d745006f0a4d6e5dc8efe40d280a52468bc36b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.7","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.7","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.7","@storybook/components":"5.3.7","@storybook/core-events":"5.3.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.7_1579503501676_0.4849230366134534","host":"s3://npm-registry-packages"}},"6.0.0-alpha.0":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3ea24d918fd8c701aa1c72883186ce16f06e2452","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.0.tgz","fileCount":73,"integrity":"sha512-pu3iec9DMvhkZzeDJboYLwTws7LU/hw2EB5PKng6rdFkauSD5ia6L3ki3XoyUCbW1JRkSD0qWdZe34h+/WD4NQ==","signatures":[{"sig":"MEUCIQC1hjuNGwgKphotYoddR1IUZN8k7/yu9JlTqA2DOV07cAIgUxtzvqc45p7olsVCc2Zpg5B1ZdLt7WdSNlO6/z4wew0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJwnmCRA9TVsSAnZWagAAfSUP/1cRLmx/umpwXIFYZ28X\n9c/s0/GYBdDwaMsDldm84IEEhoDkgxTVLjAtXhy810U8S3r+ubn/aJGlkJ9b\nXOLo+T8unl0qBL9GhNB4HRrq+fcVCrTb514oTcdk4N0pllaTb+Tb6ZUdHxID\ncxc12QMgoAR+2G95k0ffKxlL5GF0fquh2zXXpaxjnrsZKdfSjuvMOJPkJ062\nGTAoDrqrYgEUx1iQ9pgOPq0NZBGkC2xb9B2J4ZXWgIpcgUwgvRPEh9Vnvk4e\nY5L2vI9NjI6D2NlIMViUwpePmj9fe+YKooHURqGMmNDhrO+Q2AbmZxzyJr1E\n9gr0oPBuHO4CXhsiAWBqhRrox+G6tn2DG+n7bDXpzpVPUD5NfGKGI+JgOEuY\ntzDs+5J1XBHKf82NLIPUKKiv9T2v1dQEJ3gALbYr0MFriZYNvoDBhzZ2LEd3\nVHwhgy39GJqHSLVtli5qmT8HXEv8+11BPT8GuWXvojAdg70Rz3qxRvk2kiaT\np5lzpvmOzI7N2ZgEBjbQw8yPPADHNHo81oYhDHzypwjr7ECtVc9RzkCmP9xh\nbzNx3GrCXjK76zU3Z+O7V+LD1ir2x15X30b3j+uw+xwdWWW/ncFeVDRWzQqv\nJ9YmJpZXZoEpSsij0s/1xfcg+VzLjaPNAHiasa72hZGhesx0G4DPt5A7OhHe\nSuEJ\r\n=XY01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"0cccdabb536469fb0bfce9e59ee70d4fe39881a9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.0","fast-deep-equal":"^2.0.1","@storybook/addons":"6.0.0-alpha.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.0","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.0","@storybook/components":"6.0.0-alpha.0","@storybook/core-events":"6.0.0-alpha.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.0_1579616741864_0.0008057068060776107","host":"s3://npm-registry-packages"}},"5.3.8":{"name":"@storybook/addon-knobs","version":"5.3.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c011ef54925a552e4f3c245deffec012dc51779c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.8.tgz","fileCount":73,"integrity":"sha512-QjJ0VMWFuzTFMl7j7p4y1hpYWQ3E8jIv7K2EyBvx+0PHX1ytwGTlTDs+KA84SVvVHT4kwGHVEqJ0SvFFaLDxqg==","signatures":[{"sig":"MEUCIQCtrV5NZK0GQWIbOQmoV3PQORdMKIOIsIh0AF+kV5br8QIgL89pI1BKpJ0ALoHTJGzOjbfRqgMnHOEnYbpoxqMHB/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJy0BCRA9TVsSAnZWagAAvSsQAI9BX8KwMh8zqji98ZlS\ndcYvbW77HsLIPR3ZnT7sf2Z4NF8XtAfqt96oY0VCJy5ryYcAy5rJtUyahQId\nbFpV126HfAgck9wTmnd8kF7znZ1Jz/N4Rlwhz6x56HpisvUlqIh/z9kzzZ91\nVg17V3EfFPg86rrvvScy4+fCw+5acNxqlXBLfBa6e4/FbPXmm2RzAjt03iqx\nt702rLR4z7bzKMtGCH957xQmXBk/ES/LuKpAwvwrLIRHwT1ocOixM8C5SE7F\nGSUr//fWeW77H3CCMT/m7wzGOZXrfvc8aQDEoUXRMgnb43RUEi4DInNIRKYY\n3BE4fc67YgJqwdnIp4T6l4c6O+u2SED1kMi2cM+Ml8k7CzPs0VjArgxKYYxB\n0ln191FftIVJi79I9Yp+pL9A6VIK09ZOHRUE0a9Pv2H1pUGuHPIQB12fD0oP\nXdQIoSvER0ubrpiLRorOxXwkpQIOhF0EvXt/lH2qCLjGKT604Xtlb7lDvWYh\nJyVdyJ8Vb2/n86Y0IBsxXuXS7iDIX73RgiHyLTH7OLFA7Q8pBM1xb0EONX+h\nFxpbmVp3Rh5p3VnO9/k9T32pvc9hk/qi47lrAuhJi9bW1fAip4GtnkdiArQD\nkqt2mcdAtNo5sOXns4FkEtxJQBwA77YksEs39lCpvwGLr/o1Vwk0xUd7ofXr\nXc5s\r\n=dYlB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"fb7d7e6169bb785b54c16c9b7e1dd8da94a78ab5","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.8","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.8","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.8","@storybook/components":"5.3.8","@storybook/core-events":"5.3.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.8_1579625729057_0.30317076418968947","host":"s3://npm-registry-packages"}},"6.0.0-alpha.1":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"639a0fe75fec2c79d16fd6ce3fb6ba79664512fd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.1.tgz","fileCount":73,"integrity":"sha512-Hw5nS+xXXhQMtPu0x0A9qlg0LwbuPkeN6I96a5Gn1x0MibfGLlTIUN8t20xQhig1INGFl16zDqEVA1qZijSW5w==","signatures":[{"sig":"MEYCIQDEEdMrzII2GLXmIro5wmiNjp0ORVscvobPxWJ0UW6dtgIhAMeNVGzNecT4S30i18uaPpwWjU6o3HmnYOgH18Y7+jTe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKZCuCRA9TVsSAnZWagAAjNEP/AslxcC12gjCAEtvAapi\nnyhsP+sdSygX3oR12+dJodVWB1nN0x2LXPhNMxsGyZWM2wUXBUXUaK+mQbZN\nRbo9JcLxRrQKr1tvYGV5BPNOIL+p80CCgACbg05x8wZtBCTUfnlYkbcaRo4Y\nUaA4nrre/L86iXK8hYDl1bXVotuM/9HzbSWtoVW+k3T7PNnquyLDeFt0PTE9\nR0qcF9uf76IoSA5mjj0YntOINnllKxqbi1/YlFjHBV16osn/Q3r9ZxaFEEfj\nMU1G30jaycG8Af+cfldrm5TZnUkX2+sMck+iH+a3QkxPpwstcea3xnK3Vwig\n4hzdbZUMT3Yqh+NMQ67aNvwreVETf2E2eIr2eVp0eh4kVQmIwoKS1KKD3pbR\ndLlEv/3lp5LLqU7vJbtCeN8EWyL/oQr/e/LqUNkS2+H2+xCSER1YV8Miydzl\nrJpa8N5Wr+z+LawAn2hIZXUsj88u+rINGoiPDd1FBoDNquxmbBofXKvUptCx\noZd1ZDEZ+bBgG9gLgPqM/2hrglWPFz7neNMMYJ9oYVwmv0SQJ0AYfA8WQZVn\nHwy9HImx87WsV66K5D7YtvhcSFDDU7JRBsMIKqbgjMsiNlt2GQu5jzsfywMM\n+h0XpDIjxQgzGx04n8Qw3PSB35WpNKZxkg8zQD/qkFC9WT5Sq0L+Iap228rh\nLxzp\r\n=U1s2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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 withKnobs = () => ({\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\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```js\nimport { withKnobs, text, boolean } from '@storybook/addon-knobs';\nimport hbs from 'htmlbars-inline-precompile';\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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"81cb58e2f0512eba22bdf49cbeb8920bb51be937","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.1","fast-deep-equal":"^2.0.1","@storybook/addons":"6.0.0-alpha.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.1","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.1","@storybook/components":"6.0.0-alpha.1","@storybook/core-events":"6.0.0-alpha.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.1_1579782317717_0.6862502823989503","host":"s3://npm-registry-packages"}},"5.3.9":{"name":"@storybook/addon-knobs","version":"5.3.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b51be01731dd31ad1b883276acdbeabedc0b7095","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.9.tgz","fileCount":73,"integrity":"sha512-blMiksvApq4lGiZM1A8FpwnIOXC0PsBXja0LkWQDDHN+snREzjZV85XLrYdz688RhN/7MTXZXMgsvRMSug/r3g==","signatures":[{"sig":"MEUCIGtQIA5DwLxPbJrula71QFnmHDbNTBz9ijIuHURPtatmAiEAlFJB9ScXAoK0yvb22T+WDYGGnfi4ftcwawyW8wN4NGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1156425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKvwsCRA9TVsSAnZWagAAN+0P/0HoOZaEuv/mXTglbWxm\nGXiV+54NQ6E1++hCDad3HN3Q/drvJp9qBkaMMQe+ogNZbe/cpFhf6e3GvL4P\nVdrMLGJtE1oqT5ZVewsiSwpN1UUkCSZgGIKEGLIJrUZIcY6+lMqyCoJ95b6X\n4zKuKaL4ay6aBfUcVpQKF2cJX2t/TJRc5tMo9XIMgyPbxQikiuJ7whuubKxm\no5sha65nGQs1WDbYeoi/8RTHYGFDSD7q9VbFlIazJHpIPsckLDHIjz5TBBiu\nNyG/9trdBbHJzu9pT2HHQp7WSBMqDApPC7PaojlcH0ekvUrksMl2x2NPQFdv\n48eW+azjzhz0eOEw1dZn3Z+cKFDzyhrOoqQ4F18Ux8WcOVdAOPcapBcROgGR\ntRUM0c3wKOP5kFszp5kE/UdbAhL4Vi4p2RWaLVr8pvC+2QBgr76y7KvU/ysT\nmOEZ7KAEFOf4KspGcJ5cUOKUE6ZUpbYDsMyEpJeIMUzVAtOd+elJ9ZeERsH9\nCZFi3oErsnW7ePdPtGqXYcSemEmR5ePZEKk6/ZH8nPbGaq2ym0K1Ocu/DEKy\nUWJEqDfT3St+07ys78JpDj0sCqT+MoOl5G8U0HVafJrKNo8jSj4eO+W8WIZt\n9j4TxHLSX+766zOv1GtfxmyTco7mFZ+8nvax5nD9cuKUKAsffnYYbQTZLv7p\nx9Rj\r\n=KZ4Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"94aca9f154a0ff6862bd8407d6769cbb6c90b1d9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.9","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.9","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.9","@storybook/components":"5.3.9","@storybook/core-events":"5.3.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.9_1579875372280_0.499468658815966","host":"s3://npm-registry-packages"}},"6.0.0-alpha.2":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b71a60d028488f5830c486752ee2e4a8554ed68f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.2.tgz","fileCount":70,"integrity":"sha512-XD7tUppQr42YNV6vO5Pr4HlucAY0xzEdyxEsYpUNGcsgO1s+MCpem0qmSqXZKsJwen5pvAGo/KmxarAwmMkQUA==","signatures":[{"sig":"MEUCIQDMOb56DP0uCCrQKT5YEKfALrUfKztJuaTuQ423Y3KQiwIgEXhCt4ED3wEJHFduNVhC+Sch2scmH22ouftEMq5H+ts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMt1dCRA9TVsSAnZWagAA7lwP+wbwV8zSrTzoi8VVtEvN\nOLjTP+8HKD+qSaVVZlln/mD9DtOHynP4q8UfTJ2O62GF/1RMF8F+ioo68b2G\nxcCzjo+v3be6ps7JL+vqLhXKClCgkDE+MKR+TmmOojjhZ2VVPlOXLbWR4ddA\nYQ0uY+NfnadIaT6++MvWJXJAI9vSGzqSBswe5QMnhGQU1urKQYnRuIKjeD3E\n8X67+RnkWOoqLU42jNBQuwbp9AlAdaj7xgS63Y8Ff3znWoMlsloQi2hjyT1v\nOe67oeK/9lIryJtnoI8hOQu1knDAtJUNC+FC6sU1uw28IzlODKHv+swUiCT6\nMKUwB2QAYzh8s+L8gDmcs8duPHp2EsIsyInTT1//b/aX1dvLkUg1eY5NBgN/\nFXzQOdnnYs0SHlU4yqMEG/kETBAypVOpPJki+PWNAsYJY7VSI99CLg/SWpCw\nDhCh6DOm3Ee+ZR6DjEIZstP1GM2onC0AzBDZ9+V7S6K92dFxbsOJk/xk5iyA\nAz8866HEFSLWbhnz3ZCuXriApUqBcSS17dqsZMuXgZ+AxHdaURSG0P6n3kEP\nf2Vk919WiJfCqgjJRfVoJYF6PG+58HH0MQ3x+LmmGtoET9ixuWzlRj5IovG1\nNI9qjZp87eAgYjtjcxie8yFJC/yukXPnrxfIEHGAvdaJFype8nAFEmEyRM6f\nB3bl\r\n=esGv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"779ef4791d9e2ec24cbaccff2e4b9a5f9b0327eb","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.2","fast-deep-equal":"^2.0.1","@storybook/addons":"6.0.0-alpha.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.2","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.2","@storybook/components":"6.0.0-alpha.2","@storybook/core-events":"6.0.0-alpha.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.2_1580391772813_0.9605789236354076","host":"s3://npm-registry-packages"}},"6.0.0-alpha.3":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"07077c5d39f80cd24ab43458fa5d11eae398f50e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.3.tgz","fileCount":70,"integrity":"sha512-AxF0RS/irHSXePJ+OrNmj8G5pz+PCNePjyvWlGux65av/a1Amee+Ku3yojxc/FBRKGLl1XZN7MYjSfNlUw7JEg==","signatures":[{"sig":"MEQCICHDuWXcFIVYcX3WxCbH5QNRD/piZH+gOzodWq510hoXAiB+0O/rE+RT+5T5QUQ4bEbU5bOiiD/r1KjTYIik1jLATw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNmPOCRA9TVsSAnZWagAAWm8P/1PRN3KmK5VENfNX18Ro\nDSZ/y3TQViN5tS37H7Cx6JrinScIJzb2di+cqdtoQkxWTEd4+2DCaq8dBBYt\nlHvfVfwvUETRZPH/T+qC/6kpXvC03uar8M/Ora44nsFDpUqCCt4qnnQE3PXV\nB3EMWJrj9BKccvdZ+io1DYhARd9vQKcuHCYgah9JJZNKRABr7bQ1ixK3Pwsg\n4I4GWwG5PTNEVT5Y8YjcEJh+5LC148zIc11CvNT4ttmgffRPBKTmMtEVlNSx\nXaGx0pBXCdWejD6HPTjvhoyHocwqxSztCjpHC4SwjktCo9SitM+tXVL9X8zX\nYBxbGmgQblr3odrygXPhFipt1bY/wJ1qhEUje8tg5r2fF0ak7ghkF8SKZbih\n+9dt1btjrR+tMsh8uPvjy7aAgLvj3+TtUDaT2ZC/oOGjYkoDerhp0NYaeBtS\nBFvz7bW/jebvPxOMJAev1WUsnI9JaYwY8tBAqtqzx3OxM80C1+DtbbLgMIFi\n1S4Rqx6LNHofTD1CPBb4coHbHgS9JhCyK7zTq57BfLHSXVe9pg1HGH48jdb8\nXGV7XQcJN8Y3icK5cP7Mb/Hazk137wlaXRyK22+CLNdYhSfAWFEeuuhNm2R6\nCUaGa6R5ax8SiJrbn48Sz79ItoRcqgQ9viLan+nOnhknm+ZXKKMxaeGKDwne\nmiWZ\r\n=6kFm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"7f11ee2d7651df8a90537ea223bf36749b778e17","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.3","fast-deep-equal":"^2.0.1","@storybook/addons":"6.0.0-alpha.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.3","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.3","@storybook/components":"6.0.0-alpha.3","@storybook/core-events":"6.0.0-alpha.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.3_1580622798593_0.47065688739287537","host":"s3://npm-registry-packages"}},"5.3.10":{"name":"@storybook/addon-knobs","version":"5.3.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.10","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3dbb6046f2e625a9f6ef22e1b5660c9976f4f842","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.10.tgz","fileCount":70,"integrity":"sha512-0mroTdXQItWOotswyo2e+P+Xmt4O+AyuVegRE3K5/2w/WMf2ku/YdRzH0uPgYS+y8PD0j3vDcTXt1UFnzjv8eg==","signatures":[{"sig":"MEYCIQDNnObmsetX3xvECzjEJopWV4Upxevw//Kf8awwhE6T9gIhANYVyWEk47GUzv6XqTkzgTMe9OwMB6uIKUAu3q897szv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNnSwCRA9TVsSAnZWagAAGI0P/jZB8/uBqcnsnZH2rIer\nLekgdDu3tchuw6Q6G5hR4NxOqFGQwAEXc5YIcLQazhLEiHg708eEiNlJD3jJ\ndTbMzxPCjdN/RqnScEa2UlpKYLjGiLAhXB7dX4+q157flQWBXf9R0ENkoNh0\nmobPo8VX5T/5FSt5B0VhNsPm4LV6GAZl8J611DXj3Lxg2LP/NrlRWD9n82vo\nyLJN4sFjIqvLCmDYbln8O1E/EaljDIypeI01w3sHsrtS10qmzYx5YFkvDdSD\numGGfInWaoiPFRfysO3uIiLR3nHebNVH4PnoLwyf/ig8WDobxeOXHhEF6QSM\nctRzx/IXznXVrH8YV37PEVD+7nMONReDIDSxZ9nH7h6/B+0hQmrLWbHWyJJ9\n1OntcdatiO2yfCqD9UytiiiMZh+g4SK0NI1ZnMF/Y5tntfX+Htg+sGrJtM3j\nLlY8Q2casJtxtStIXTEy5oCxE1K5VYD1ba9IM5Leav7REM0TEPQnu9Zb7Gyj\nFWtvar+zWqTIVA6U0gga6OkkvJvyO+CTDpl5vT+8fWrgklpTeVVQpateItn/\nddUaCFsAkeKVSWDrWbzibQ+/j3btAQ7XR+x/1Rh27ky4zVOEU0PUyf/H2//e\nqC39/Wa4Hp7b7vRsenVS+6hbQ18deflu12tz09Spk6atqtAhc8ZaXXa/4X0+\ngn2O\r\n=Yw1s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"589bec8cb46cf8a32c887ac1d81fddc27e4aaac7","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.10","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.10","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.10","@storybook/components":"5.3.10","@storybook/core-events":"5.3.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.10_1580627120527_0.05592458874115391","host":"s3://npm-registry-packages"}},"6.0.0-alpha.4":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"91d3564167b2c497caf596822ce242b6ed4c597f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.4.tgz","fileCount":70,"integrity":"sha512-EctBaRlujvNVKSQX4P0EtSmUe6wyscKko0/fFolAv2CrhT+N3j2YhSGsVH0oF4zZKYn/VOmG+ZiM1wWMvsDfew==","signatures":[{"sig":"MEYCIQDivDfMuR12oOJEO+e7NqOcW7uukHpoVW9GY+Kw+DSn8gIhAPFtEyOiC2siJAJGKBOtPrA7Nn2MIYzdMYr+D+H2jsDZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOEJVCRA9TVsSAnZWagAAKH8P/R+V91ahK7ya0dOUgR3m\nZ54JhBbvVEx4H1Lznbe4igJHRcXbmR2hXthmWJ/1ZGjNlQtadPZGv46fI9Xy\nimhijoi4vbGTdnUP74EFzrqhc4+oZdFb4fdXPycHli2i8FyoF+LJpMISDeeT\nqMFRoq7tRr/HairtGSV9MoNc+220I53Bho2+PF8iFcLrXe1eAwfxbvuW4St3\nfzXRNBLugg/UbqzE5cvDgKb06AhEa7UBNKZQFbjhfsgvsEjZBvgS3JCZ+KnC\nXSg5VarTD8Zn8WYuU6UZQOUEVidrGStUnKa1wOS9B9KZtf6OLvbGqsTZvctB\n8apQGUTYkLC24wwNxFARdSNG1DbfSuqeQOVJIiOzWodjuKj7arNm/OPeD8nC\n76dZIICvssYWEpMuhrJa4Fj+9HZUeqW12SPBB/YeVFO4upmh5ZUJBDBj9x5W\nt89FdXrHmC2en0oXyJxsGPsaJIbQJ9fKSQxuYPr5zKramvLXzgRedZ0anli9\nh9e5DWXyxFKss1pZMNExtk66Bdiv3xAYXAn3NxjG2RPGNnlPy4Lz6hR0IR5R\n3wjKHJ4pYNZcwqePcO1Zns9rjj3vzlau9FPP9PNGHeaHru1F25GiMU2/obzS\ne3wfD3Q17Lc0xLDGQTrKSri5H70Mt/TF0PVeP52hhmpgt5LsvMl7jnUNq6Pk\n9KUg\r\n=BD8X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"d7f493b305f584dffb23737d15f7b757997b3617","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.4","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.4","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.4","@storybook/components":"6.0.0-alpha.4","@storybook/core-events":"6.0.0-alpha.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.4_1580745301517_0.7886679494760578","host":"s3://npm-registry-packages"}},"6.0.0-alpha.5":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3ac63af84710fb08888182c4f18d67ae96711e0f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.5.tgz","fileCount":70,"integrity":"sha512-zwF4wYGmyaKhxPz7Y7vReA5rArQg7cZUbR3isCaDgWHibcxaViL12hLGIvxFqPErA2KXIDncqgXuYnx1bbiOuQ==","signatures":[{"sig":"MEYCIQDADtXlA/OHgggLfEJz/wo+96gQw/6A/ikfY8zRdl+hCQIhAMmEsiUxloTJozYZOocBN0ut5FMaRtfYlgjIrsj7wM0T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOTIeCRA9TVsSAnZWagAAj+gP/RgunahnHUsAnPGW9YZA\nmz6kZMjRvM6eWYMBatmddOtSGZvQR959/8/lgeiIIOUL4G+vEuBRUrviFJ8b\nJXjGNp/qgvcox6uOf5YE7aynCiRL0JNZGx6INtek45+mws6Q8+JwDMiOXhB1\n9FBD3GP3HCMX0WTICM5rNhMbMQd1Qe9xxlFI1Jky9hHh1lPh6Bn44l70ANai\n1v090Z3Fg9aFYNZFsPSNLTuicIGl9+n6HB1HOwL2YTk+UbuC3lDrrXsmbz9v\nQx6s1fT0zCWsTv8BrWV8Clvo4dKAWmgPGiv/jNRx8qi9nDCOrpCKyZDkKHl7\nuv95L01PTYMitXjRnrP4n09gTBBx4eHow4OhEfgYwP8zoMRVWsOcv8EQockU\n4VXFixtymo5cQ0fkieD1QFI3zyeG0E6leLuSDofiOzeZi3dHGSG1PxflHE0Y\nnUdMQ3AnDB61paNLVr1iDpC8TC4wbnCNwEe7+hnBhX7H4RcUJFCKQM/2/5EV\n5jDj8c/F/eMcC7nQstMudnravELbcPCooGEWe/g5LbqlGiQBMwQ1bbQfzp8V\n55ibL+w4Shqr37xjzbu8UBarzF4KMQUTzLNB6bgmdp6RSwpoh53JqqOhOWZF\nX3eaA72TfQDPqEwkcP+30h6ojlLdtQMisNlMlQGY8/kM5LtXP7HgORklSoHY\nZ4Pp\r\n=ZNhP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"7393fc18ce13ccb329b323dc0d7fdeacbed3e658","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.5","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.5","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.5","@storybook/components":"6.0.0-alpha.5","@storybook/core-events":"6.0.0-alpha.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*","regenerator-runtime":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.5_1580806686297_0.5258764175952777","host":"s3://npm-registry-packages"}},"5.3.11":{"name":"@storybook/addon-knobs","version":"5.3.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.11","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"fc20d646649be4b217b41fbb0ef886389363bea9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.11.tgz","fileCount":70,"integrity":"sha512-TeHSpGathjCwY8BajDgg9nSkNWbhhbgjPI+RFUAsZF6UWDJDPe2UG0y2D9XnONvvPVlnj7TVd49QlKXoXAOG/w==","signatures":[{"sig":"MEUCIQCzlQbjci6Ur+nQraxIFLdNe/++a6yrTXnMgQVx0pqYAAIgF1jUlnAzsd20/HcZgJ045lG/5jnXO54Tx6hYNVFHZe4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOZVZCRA9TVsSAnZWagAA/coP/0QxyINOkGjeBeBH+s7I\nf28st3KbAigb/4zhfyIjpodHri8OdUe+CfR4ynSXotldTlrd5NEeSBVYJAq+\nE5phU9Bq4SnzuBCIhk7dTUZhNI10HQLbIeaLrmeF0VLG7zezriL4Kxtrq+P7\n/hNF3NiuPVem6iD/8pN+fapoIuCJzbjZdLqZjeFR9w0Vh3IQQ0CTHHm2j1xU\nRGUO8w5DSZI5Zsdnb7j4Oc8kGGhxwqN7B2GAsaoWkLExdnorKFw3obZzDmxN\ndA7z05GTIN1Q10XIqsZFpjN9snkUEsrORpTC0vuv11lDmbVkGGlx2UB8tYHQ\ne7y6u80vyOVUQ/rSdI78fW4ABIIMfzCllwYLJ8marMUtaFUZlD888XDICC1D\n7UMemgQ+mZBh2Y6czNYCdRWdRelLwLtbDqR9HsABOTwFnPYf1X9Zg3bnKEea\nBxh9xmNToKP4RnIfrSNjFQP5QQCVIfE3KofD2PM3gGqFbQBv5mxx+oUVtIgD\n9xanq57n857Y8DvTGbEVUvpRtyRz+Ag1B+WXJC7wUsA6b54vqFsrvoCmCqSv\nwEoGZCrc4fT3MHx6xcvCFSWQCpokJGCiQrqo2fQVqycFNqFYSCxOnFbuNBO1\nBAOqD07z9EUR0TdMzcgDKl0zZUJC2m/stzxrfr4bikC/8Rm9+ObeBfC60HH9\nZ50E\r\n=MwQn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"71b9291fad33bf92c66d4bf166e965f93d42a385","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.11","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.11","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.11","@storybook/components":"5.3.11","@storybook/core-events":"5.3.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.11_1580832088921_0.0026013963500675086","host":"s3://npm-registry-packages"}},"5.3.12":{"name":"@storybook/addon-knobs","version":"5.3.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.12","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"743f816bc8c2260d1794fa5dd945521fb4a30a80","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.12.tgz","fileCount":70,"integrity":"sha512-BZaFg0sb9EAk/SUAFG7PArMlywrIKDfbeg073zcf7fGa1Aa2M0AauBZ/eAiidCZsWcrOlt0FWwfPs+SHNSqEOA==","signatures":[{"sig":"MEUCIQDIWAY5iomXWS+pzHeG5/+Qz4Zb9H+0j/RbW0v6rCvy5gIgZMbafKeJt7r4sheUaPQjCy6Tkxnws43jQcCfu1bTBAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOf0vCRA9TVsSAnZWagAAV3AP/1uGsxMkCgStkRH3cCKw\nhqJi9YOKhq6roHDtJOBwo/Bb7EVIp3vwS7M93t25vMZyw/ogo3G8rovqCXJI\nydJ+vc7q1NXX3ez8+GIDVn468O9tBSP9DhUP6MzBZqAyY1qu7X3BpBW9wiQm\nR0mv27a5xQAyl0LJL0swvj1isjE1G1w9BgeSV/STFpe2zdvYxHHOBfpldjRg\nFiFB7F/g9EvIQnm/Wn8TEOuXNkTUtlF/pHMzEQQJAVVw65zlzuL0vMuFVnyU\n3LY4aqkg2TTBRRr1q7VXJIQSNNW+E2YGDhQlgZMFeq6yi9mBnnzEN8Ea5dCW\nfsu4E0iMXJ5Uij3h8rLokwzYdZRH4rnMC6IoYQlxCljzVsSWkbE6RXyAg1qu\nYsMv3tB0VObVdWKyJYy44d3UuRLqIXvDbJAn7NXpfBTuB5rdrHAZ5st0D+W3\nJH0ZMapyEJ0+vGToCL6es60DXBvMvhqJIjTx2vv7Y7m4lZiOlurvBVl6qyb2\nhZfoLevJgCvHLs4j8tKnPwtxgVhw3S79uGjPGRR5QsFXW3G+faoJgH6W3jmE\nsslQHSOFZuzL6aDTDyS0vndIjtBLwzhEpb/LGR6bpHLyaWFZc95JroGMYfME\ndFrVghj5Heg5YTjuYGdNOJXFrNTw6NxmzPDb2RwKDXbTKaNXA7x0QKhEIwkm\n7YHd\r\n=i9vZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"55b76e27762ac27ce9b872b8fa893cc8617fa25b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.19.0/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.12","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.12","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.12","@storybook/components":"5.3.12","@storybook/core-events":"5.3.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.12_1580858671107_0.135052992252936","host":"s3://npm-registry-packages"}},"6.0.0-alpha.6":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"547314881e20a3cd368ac40a062b4c3f06239cec","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.6.tgz","fileCount":70,"integrity":"sha512-m4yLWuxjndoGOD+JrU7P5aztf8eXI+5zA77FCI89IcgeA5iPMGDbjwNhXGRzNfW+6aD2hKoVVaQZtjM216dT2w==","signatures":[{"sig":"MEUCIQC2Kz9P7hZyaGOA9YyQ/A84kVDmrZpMF6d7iAcMbbKI4QIgO7TfRoXQddjtf/B6s4DNHxw0WF+S2V8XbQkB+C31LWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOgMpCRA9TVsSAnZWagAA6KcP/17toZkSGxe1uSw7+SYR\ntfuKC7Y7ULebvMVax/oL2OjDBs3/ctfXY8kr7V9jWtcLRVNnGZbY0Ldq2FhT\niXHhMSinVT5f/ep6fHDSrxoXFi+rkGug7a3qKUXF8pZa75W326s9Jp/vUTyT\nxhtzs5ntDBcf7T0UG6SGUAo3DTKNSUe3wj/hF0+1gvR3nLynVyYVC+VXx246\ntEK8wiGBvCq8IyO4pp/+gO9Hrmjr7MFLU14xZPv85lEOV7qlnZigisIaJt1L\n4FFIYsbrsvNMlpPx2UlZkcDrLWYxfbKsKLhMNIABlxli17CTyl70HNa6yO+c\nyxZXz8DUN/zgspCM1+RgOg817JJKrXBm9Tun8YNkwUcFHNB0+wbcA9zZi/6K\nNLoGtSGsqY8jk4BFM4dUrzx71LiMmOuBEZLDy8Hrk5L9OGEpRA915wH7AjsC\n199xd+ybPvYWw/8h4JSIotZRsuDZem69kCWyMfEm45w9bR+wNJ1zGxk161RK\nV5OUSqJgCDN2pWOU+8VMJ3yGXN+x/SdG/GT/eSExCTFrD6UaKepLvM1znVCV\n0xqdtLQXEDwcpq1WUrR7awd3mVIoURSFEL35tx1c52/TCFMO/AyCaToL/HHv\nBa4eAJaVh28MQv70v959qfFhB847sECEvd0EJ472ts+/PzlDj7tsn7BNhAZB\nX5/d\r\n=QtTL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"34bfe843971fbaec1c06fcaf3f6f4f82c490a767","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.6","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.6","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.6","@storybook/components":"6.0.0-alpha.6","@storybook/core-events":"6.0.0-alpha.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*","regenerator-runtime":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.6_1580860201369_0.7061543718851868","host":"s3://npm-registry-packages"}},"6.0.0-alpha.7":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"efc27a2b77d330f81f7ff6b6c0b733b05fecdea2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.7.tgz","fileCount":70,"integrity":"sha512-3iTQk80dRn5jsZnS5ZCwsFFjAzlhBhB5pYjbqyeFgTaVJW5nEuJQCvD4j800//qS8yRyXh6kjmTD3yHCu/6a+A==","signatures":[{"sig":"MEUCIQDHNhbzK6GbRmS9F4s5GUUllICIz9nSldhM6vpwIy8kCQIgRuloBPVXaea7dsean6o2cALAN4RHiObiOuMdOZ7mAfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePYfGCRA9TVsSAnZWagAANhsP/j57Ka/7ocxcMWbOoX0w\nhx+/OkbQ+4v7m0yJaQ9Il3njbT9tL6FLSMUpvTe7zXwte+A+q80O8q0uqSqN\nCISoebRTRiZK2vVaPyumiGZawg1MHiJUj+CFnYQ4tLUaPZ99g0HHzVYRD0Om\nmEyYXs73scWitykRVmZNdhZxMi6qOXfGQ17IV5Budm0YH94DE/QQPSIqS0HM\nku8foVObYSI1Y/5RbJsiqf/iNn2rU3+cBf0+SLaNOIO9V3LpnFawASRZ5ovq\n6GKX6nKCk/udeu70eGIGhvW2Ar5YfbmpMIMMRuxXsFlvkCjWaft9ybU1LxTg\nkdWWY1rPYVsh6F3gEbv3DXfBvqhauffdKXeyOAGMhMtDNl7Mcs2KJTATmSMs\nudGb0/8/gITc37vw7Klp1Othx09WTe3Xo5eEO8xTlA5oo7c895HE/q8R7jbS\n+12kgoJSpQ9Q/J8yORBXeq5Dm+gHUfatLijTR0X9sRyDy8+szmgYBmDHjQhB\nIkHlcX8Az1qlPvIEJ2Bwm4lf3mXwD4mU+6Q74KHMtLWy6jaOhj1z8LcxBnNk\nbVnTnFwkTLU9Xs8fD/sMghDPz2dfi5h1wr5e2RiLmClG75HyuOPzdPw+1aD/\n1UxFDB0V8xa3St6IO5ktG3tafLP0r2xTL5Ux+0sKpli2agEdqfMKQjgKAeWO\nHkBW\r\n=3iYg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"45c040045794124cb921db3a69f15b804e24e3a0","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.7","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.7","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.7","@storybook/components":"6.0.0-alpha.7","@storybook/core-events":"6.0.0-alpha.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*","regenerator-runtime":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.7_1581090757893_0.8663668506346254","host":"s3://npm-registry-packages"}},"6.0.0-alpha.8":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"526741f9fd05a13b7c308ead4562f6223c96d1b5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.8.tgz","fileCount":70,"integrity":"sha512-chbsUIMO7570A/4uGsT8ZRiBB9DUvoqCDl3B0H0dNB09UN8VlsHdGI8kaGc6ddoVbDPGipBeIGSW5pmgUQFQcg==","signatures":[{"sig":"MEUCIQDXlN9Hu93dM4oDh7d20dmN6MamJ+7FNYgs8bVMjPBtfAIgFF1KUJvmu0fw9qPgYJr9jvlNSGUFnByZn8LkJatjGiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePZAhCRA9TVsSAnZWagAArXIP/0oEi4m08qmsDfKdsHn/\nBvb6KjmFZaviaaILfzmb3e3M11mwXUuXh9xqzPgb2pLqVW0lOAWtxBm1o9x4\ngkGhZ0gPKla/M6rvVSDCNh7HursAe/8raAUnj64uge7ue8uXKUQbOtcHatiW\nkMa0CUhwEh9PZE6qgRX/tJe/8N6b6pmsQnP/puNQY7JcI4hWxRJ8xR+Vs4Cu\ni37yERDuIzaGCXWJI96NF/7RK5VW26Cwfdf0UitQT6YDvMBRuQDvrUdUYRns\nU3JHjopp9Es7RqZoxxLTWTSLhlUcHnLvuCPNzv4budskk48qWJX5k8uJJbms\n1hmxK2pVbrWOHs2/b/6okCs5vJYWQ50RKaCD5vy6FF5ZD7bBRlSVuyozUgNt\nRfW1iWDTouJBJc6bJJt0hGX3GNpzBnN8wIvSKGIgHQRkjGRHX82XB5o9tqid\ndAzLN1oMFIHaVKEaQpxUqSSwJVYmoE8Uhh8gLqEDA+vqwXqbOU6bBCIGmBSS\nBwC7MCBUG7pBy4fH0Jq3BCXyquuEDY6HWvUJ08sQJLXVya+PjuQawXfAeLb/\n87ZkA72KqJb+g/CzO1SrifXKOydh9xgW8TxG26Ugf903JV0/I3k0MGECjyZ6\nbNihM+61pEJ2Z2ne/zvXiH5i3ipHAMfT/vOkq0PQrm7WLCrClpq+hD+N8jzC\nQJzP\r\n=cX2w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"582b5c4f433ba8f1fe8d56dfc7553b2a9bdb5dfb","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.8","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.8","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.8","@storybook/components":"6.0.0-alpha.8","@storybook/core-events":"6.0.0-alpha.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*","regenerator-runtime":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.8_1581092897116_0.6714080022336935","host":"s3://npm-registry-packages"}},"6.0.0-alpha.9":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d1361611fbf4247a90cde81d537009c29a2743e0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.9.tgz","fileCount":70,"integrity":"sha512-WkPHRrzLZAYqL3J38R1XFGaFJoG4Rg+WVwriCR3M7HCyLIhUHrYGoG3trF0GCoYXxAfr99ECcAC96uhEad4M/w==","signatures":[{"sig":"MEUCIQCWSeF+G05mOmDJ3GnQ5kf2WVWQE7FBU8CT9iUpbVktOwIgGCugA3EgDaZNPdJ8IAIqDuAEew1e/U7pEXwpLXWJ8JQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePvBLCRA9TVsSAnZWagAADtEQAJ2w+JUxOpg634xqUvIm\nS/dNL6xtxbkpbA5Ha4pjGR3aaakqMKb8PB7p6mHOAgTlmULkn1RxpzuFGZNr\nx3NQK6r0CdRjF67H9oRNItFno0GXl1Qg1DPizDlvKYu368p+k7fg84C+0s9D\nqhdauGYXYOCx0OCW8rEQ4NJX9DlCaS2uIdLlKveoU4iwSB2KOn1ou8l03UCa\nXcHIxhAHMNuAcRbbQ5FtzoyQAYLmJ3Yp3vQE0p+ZwXxycub15NrLVxvU6gu2\n+SSDWs7XVKqH5qgkXF1RzzyDXauguz9E5JSotP7hD3XmPO2CF3u4qBzOdwWw\nBFz7O0n0qMn+Krbd7HPl+1hxCQcpJBkEhPZZTXuSsaqI8+50aBsVm7vpbP1w\nuuUpqk8Olv9IEsremr1hzc1igo/wikrz1dyntCK6N6uZxrDxBjMaami2/jj0\nB8fzSluD2+QOm3NypvQ9wo532u09cgs5FbkxdelHa2HkdmYiOMzU43vyZXnD\nIlnp0kI6Jay06Hm+9kaIqbh8rreMdw9hs5u4ebeSzumKV+PJUgspZSCVRn6U\nIRO9AzcAlibBdvhsqcaVqo873QIki/rQbbzrX+th3jVHz9VO6Xog3jiaUiuq\n88ueNGtBEcf1PI2zYH/rorZwan4xJgm8bmVkNtm3Lhb0o3z9ZKb1NyCBDip9\nt5/7\r\n=Mtv6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"4f0a75c824ed7079c5bb05d71aaa482b1e54569e","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.9","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.9","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.9","@storybook/components":"6.0.0-alpha.9","@storybook/core-events":"6.0.0-alpha.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*","regenerator-runtime":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.9_1581183050895_0.24794102124323536","host":"s3://npm-registry-packages"}},"6.0.0-alpha.10":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.10","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e8da7fbd35f6a60a521676b2daf8951771cfdbe5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.10.tgz","fileCount":70,"integrity":"sha512-GnzCu9NPlr1lfxh6u3SeuanVwhciOnL94EGF9QPCjW9+pl8Vs3+RciXLAWg1ZfF8ZVYGENBF36Zs2U8HXgJaFw==","signatures":[{"sig":"MEUCIB0SP9k0DouJWXHnvtxLJbpf9P1qBB0WARNHfK+1TmFtAiEAy9Wb/Z/gVbpVCD2DWDOz7OQmONIDjGZ3Edzhup2HyAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQrv5CRA9TVsSAnZWagAA2iUP/16dxWzcPNt4TRAmQ7jH\nrzl5RYyzvgogW5z1pTvuX5Q8epeuW2c53y5d7uJhtMt/03yLCB+1CwsnKDtx\ncPC0hYQq8NXS89k165O79r4xNt/DmPrislIhE1qNbWdegyGyFryxMWPREUJU\niq/pyLt66THnXrELjsJ8SJDKD2QeyVDx4OY4v0JwFr9Z5v5anA88nYEOZVLn\nF0HulUdfM9Y0w5FoFxmW3pWQHrKY7JG3sznhlFe2H5lb3B3cIRV8pzELu7K2\nN2MetqJsXiBQCNirj4Y4YDosNYkeCH2OMeXXDQP4iHegJwDyQrkYY/B/m1D7\nk8IfeToODuRENk0+5dASI88Q45A+9yfCJc3bnokrROcnmlasvXLj5vtTq5NS\n1h3JYn1kJJyqluUDg/b0+uWHOK0gVyPDxqx5iOWjPRSbeLPS+gnJU8Yx+ojd\n7SjnWOZWHvRdQJRRALopghJ6ZyL+xVaqhXHcb/TTbyWNVxVciaJSQe65V6Sw\nALi7x7WhBf0Y9ZSnbnRn+PXxL+vaTC82kvscoXhgLWxWm78+NIbON6ZOlzvs\nfyJnpYJXDAecM6LJABkoZlOcI+DbWoEB+4OQMlwL7om5nDUBH6n80qisyAkq\nsLXL69I2KSxIgnpQPCR6ujjjlwTfOiGZD5OeXQhN5FvpY8m3EDSRTWhEXF1C\nKpaV\r\n=XJXk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"558371ae9d314244d616eca32547853a69d2b0ee","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.10","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.10","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.10","@storybook/components":"6.0.0-alpha.10","@storybook/core-events":"6.0.0-alpha.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*","regenerator-runtime":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.10_1581431801385_0.6638189645262285","host":"s3://npm-registry-packages"}},"5.3.13":{"name":"@storybook/addon-knobs","version":"5.3.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.13","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"fe8be71eadd118edf19656442388e2e7262d2fad","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.13.tgz","fileCount":70,"integrity":"sha512-Ef3D8bbV+6fywjR4JUX699gT7ZfuNBXlXqZB1qgGde5swbuttEGty1+RRwK1fqIeBr6EbzPvhRBTVOFIQp5Ysg==","signatures":[{"sig":"MEUCIQC7Z5z430wsyBY5ywoYLYSjpdLQAYcTEy5Aq4eCKbTiQAIgQcPqT6vYbKHOQoRfoufLcs0VWGN62rAuLc4PFo0Ld3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ3YDCRA9TVsSAnZWagAAiyEP/0Q/hGSj3f4brqMkjM+r\nOFgLoTPDUhxyBWLjWcFHJ/15+5Csbo4tO8NBZ3xH2fL5iXvcPLwv/RPTykon\noeYmjALfZE0sZdTcUnNW2TuIlu7f3Z2q/N9rI7uBlXcPegmVcJA811QuAIoo\n3neMHeUOLoAPqvsxxpIdXlcD5fStHtv8pAZQYOXshN7ibshJp/aHnwfOzjf7\nWT0oPH1RpHfQ/8W+IfRcVfwTS7YkQ8wacGWOoVaJ505BESp+g+xMRAleUkTa\njDKrrm4xG2KhyOQqgM8GsU/GUI8NOM75Z3ZnWrOk+KJUsuYgCL98tGatPNSe\nHk79LBTHO4KjhpA6c8kcdqKajGoyEbmlcxfywpUqRmdNfAMuGXB47wFjnTt9\n9VhJ5rlvZ979QMMn2kCPx79fF4vladubGJjdv9KoeNZI2S9QbwOcWG94Ojj7\nJ42WhJ4grodSl4OBz+TbH1TgNUgh6xpsJQYuGQLvaaSSsWIzeN8pEBrLYiLO\n86fSa0Fw7/BcA+WcRDMtZi830hgowjffP6d3FDKthmqnfqa46GpNcumLy7xj\n9VTpjeFDcUvbQnlbJWJNC+AcATr4LNe198Ho34o9eAdYnFKIocJahczUDLJE\nLyzG2ReI1tPdABGIl9qlnhIr9vxXnjl3beVFZsoDUL5l2F0z/LW49d5FNnu7\nRGrt\r\n=bfVo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"d840df052a887038e134207da26fd04cc2279d28","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.13","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.13","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.13","@storybook/components":"5.3.13","@storybook/core-events":"5.3.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.13_1581479426567_0.8484511972289086","host":"s3://npm-registry-packages"}},"6.0.0-alpha.11":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.11","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c19adc55d37dc666312d61cb6c14f6d63dacb810","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.11.tgz","fileCount":70,"integrity":"sha512-VR0+p4txsAhPpO6g4Y9IMqNa7iLe/xEnKJ4pkkcCbpaRj/c0+gp7opviuCfXpU+nrBJYAqubC6P9mUBhID+jaA==","signatures":[{"sig":"MEYCIQCzfq7kPlcFnPgH8mwbzktfo02s2yNAbgH5GnMl6JKWowIhAOOhPFeEpoU2GAqQw0rEw1/XJRTIlgJdMaPEwZ91HqDH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRMz8CRA9TVsSAnZWagAAmC4P/jJ/eHmKejc5kzr98CPq\n0qBpbiwuqb+NooMXieC2KrREGlqSy43+pn7E0CgsyVr2ZFDSIIvasDnF7lh4\nLSNIcf/mzRb6v2ifPjpI0FeU833/XUycO2NKYS8/6zavoaEAnU5+5X1rzFrs\nB+MQw9Kz2uJ9pQilk8XnCJy8QWT9p0IPvLBJZydFGBY7FQsPR5vbF/jCH8kp\n3Co1uX+evMaRFtEC54M0rNpYE1MhxEBSi+1M9JHNMk+r8r/ztD3hUbMG+066\n8Sn3FXNuZpxKU+HPILcFVUiekri2RzAzmEW/ESS4pLjnHNLR1D2HzQ5kZfP3\nU49aQHWOR+avZqdGm9ejaBbtSLuwY9s4FneqIkPXHxaJq8i3d2sfeqag2I7Q\n09Sv5TcxpxST2m3Es8+XeH12xm9MPaRtAoEBHQL1ohWZk3ThOryj1k0Y1EwZ\nnO4nUb8tWjnHa0JoypwvsLlSavcATstQIrk180cUySxboOwev1Uh66l3TVkR\nD4362zUiojArOjcHkHFYqdaCvVdV87RHFK8CUpcMBMF7hK9J3dBRRPlyvgaV\nftwv9C//k58ZvMk6Tb35rdrO6Zmk9uSkbaJfzwm04qcrsD0E/xob8yKq7XNX\n9AR6MOYf8yYfbZlkcCK914MKNzABSHZvCB0dqaeHts6H4r7eoHQQGL8nr7FN\nKmAy\r\n=KqIk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"f46cdcf7f4f652be248e1c18a5b130e3ca9a07ee","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.11","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.11","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.11","@storybook/components":"6.0.0-alpha.11","@storybook/core-events":"6.0.0-alpha.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*","regenerator-runtime":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.11_1581567228125_0.7235174235258524","host":"s3://npm-registry-packages"}},"6.0.0-alpha.12":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.12","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0a3452ef93b0803028b32bd03576493496d8a77d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.12.tgz","fileCount":70,"integrity":"sha512-o6EI8o6N1M7wcyNE4KkFxVjCqoZE69pQ/3LwEdcuwa548DN0ZZnhpb9vKRjJKBli6xd2zdBcnMMYEqqgdxTC2g==","signatures":[{"sig":"MEUCIFo6KlqQsbjpI9LNohtHiZHpzOFhTj9nedTByK2gSiOgAiEAkXqQSuU70I2RcpxFkCiCe1MjKreE8tjO6h60h4VMG9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRYJHCRA9TVsSAnZWagAAQgIQAJnqsfoAHOIvtrzz8NAK\nh/9zJ0BS/f0AH4M67dZiDlwa9+J0+2yneRNjSUrCx+5WaPcHiw3elxzEQrCL\nh5ZJ2dlkJtAoAuY3RaapwKv+AqIWNFtN/FxTsbVL16gMo9vkMG09Eq8AWz5o\nOBj/+3Zt8J9HKT+ZMrjo2+xRdSCvyDbDN9+xrz5PAvN+9w3Pjr2/Yz7wepKH\nwfX/ZX4pjlCwEu0ZLux1ZTZjpNhYKM7fqqTGqaccxyiinK5kHCOfvk65EsLL\nNnP9ZtDGNHLBqXPIMudzaeFYqJI4ddrLQvb9WwXTYQucpPaY46SmK/8KpIgF\nx/kgi2jbeLNRzZqvhzwavGCALyNh6wvu9WhuV59hhPAkXOeABZNFCIIL6bZk\nAGTo8PfqTN/J6DlQvVlbobZcY6RmPpqnYB91S+ixtEzlpIyWmLZbUAgpoJ8+\nA8uz935E72+uExtkKU0o7KcMC8GwgQdXGMwZ3gO7dTwkillACn2nqzCT1kd2\nNAL0LPUNmntop+/j72Z9j/7e3LFLwrQS80PBGSNovlJ5oCTZkuDuP0xuUJEY\no+/aaF52lVlZUqfahh+pIugoBhSwBNByljadt30EU7dHxjWqJvna25kyJ+n+\nXQAuVCNPC/bb/xQ4k1MRvA9Qe0QohCXA79pHdOFb0HkB3C4VQ/4+H1baNMSo\nnxeY\r\n=NXrR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"ba5430acb5a6e7695528604c1d264641afc7f6b4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.12","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.12","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.12","@storybook/components":"6.0.0-alpha.12","@storybook/core-events":"6.0.0-alpha.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*","regenerator-runtime":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.12_1581613639459_0.8232134447585777","host":"s3://npm-registry-packages"}},"6.0.0-alpha.13":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.13","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"46db9d762331c957901aa80102817fb0b6d1ba30","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.13.tgz","fileCount":70,"integrity":"sha512-tgK00fahhN5/S4R2IlBHjclqzZ1JN2XpBxcKj3LtWu8enJBc/j5g+qB0TJV7HT1V9YhfHEmk+KcSbNrAPYOJtg==","signatures":[{"sig":"MEUCIFHpo2yf00DzUItfn6qFetTDvC6l7lOGBEaT2uXuMlUzAiEAwzIiKNNlskup5J8eCOtIyU/j6nnqNiTvJx1FJPAPHpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeR+jICRA9TVsSAnZWagAA1HoP/RU82xo6U76I1u9nFVNa\n9t4YDfb1MxuJ51GL6d5ko4KV0yh9sOEYN/iwFXYmcdFIbzu5Ev4SeU3QcukM\nYilKbYaiuQwddUgwseWHq/CiHCnDyOf88y2Sb55dV3j1XUx01cp8AyFTdD7/\nvnm0vvdLAIkoVbriB9AvVL+zeWMaJn4WFB1dft2iCqfL0Cg+3fE+3k63BNzL\nTnEQocj+y3fTK+kfAFS/1v11JDtkEdZd4JkyEsL4aCDuB/A3uSR5AVOsTRR5\nZJVw+B/isRu5BE2FtR/vSnTx0Yg7i/8LSCsRz7V0Jj5oUy/8hHGv2g5GnVKR\na2qGedQlqxtYuik+DtSFnH/TbizAYvqrRL4oW5JBluEAEAvSFIOw2W6Lk7rq\n3eRS7a6yT9TmxYqY/WUl/ZyaecCZTG5lduEYJgxWpuP9AxZueSllhNwdKZJ7\nX+Ob53XYUQUC+VOemTYKnBSbCZipTlFuawjjrl+ndqTcxTKhv+WMto9W+atb\npIOFc4RyYKHV1iee3w2xWVDjhZPPah6uGu7wa8Z55k660alHqQLBb7hqRXPs\n7MGkudi8rD7Aj4kLyHmim+5cCBHCEsSP0wtL2NMvxqTLt/XWJGVS4W0RrLPQ\nQGT1NwfZGK5vLBnJxT91uGTcqxW4hH1BRcqXZb5HBXJNYBCDZJQpCC2M2MKY\ngnWa\r\n=44KI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"5b11df0638c68341ecb936530e24ea30df17e7bf","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.13","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.13","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.13","@storybook/components":"6.0.0-alpha.13","@storybook/core-events":"6.0.0-alpha.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*","regenerator-runtime":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.13_1581770952372_0.021289530876959173","host":"s3://npm-registry-packages"}},"6.0.0-alpha.14":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.14","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4abb1f7bed7a7b8325ea82af928331e8d4d5361b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.14.tgz","fileCount":98,"integrity":"sha512-oEqKTGMjbVJV0ECmcKTx3pj6M8FsltOIuIU07kYRGriVoQ4zAaUjYFwPfZnYx0AiYsT1cVtRqm9WciIV2Uo8Ng==","signatures":[{"sig":"MEQCIGgv3ODhWtxKnQ4K5DxFpbEOTV8xHlY9ixMkrzGFCfBrAiAzY0HAxffpA7jacWhq4BJ9ViVM5aY65BcWhCLr+VziIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTGy6CRA9TVsSAnZWagAAZ5UP/2btydn7QMilmCo5XbDp\n0Ywld+H1gzqHLxoEkQ+A9pgDfiY6EaSw2yslRC/HY4GO5ZfaSiIKKx6aKzFg\ncS+ROJktGQPxo/sz1TUfRtBgrtaD45NtLAlAHA+RbELfV6Nc9BuseyKFjEbI\nvvvCcNU7RlaX/jocR0c2TsNKV1uE39xmGN8XGMABIqOTpGd147WPmlpIUWft\nD4W1UoU185akG8XJ6UtsF6pY9FbzmmvsSMBG+pHcQiFjOeAnHNrkxFpAr//7\n7u5voB8XS0HhOmRqG48GqTEddRx9FugoDc+cM7Z3jzqlZpMTDZQq4igYzIO0\nHL6hKZ+XN1nHPADWqAniW93hkOTd3lf4OdoamE8uEuuRRbusJt2/Ns71TkFI\nepAQjh6gv2VmoeeGUrmdB7tq9Ohi/e1oNrKto5Q95Bhht7lOGOWWrWvO0KZ6\nJ0dLWNTAwsRM+Qx39IvyxuuVLOXZROfmSKfE1chIGdNP4lIHVaDON4ikXRrS\nAQTBKpZmpwtQsCcnGfEa9woklWOk6BC4vZ0a2YsxGwfyn5VzAZtI4nSDlwVN\nLf7pC1P6ptkqouEGlAFTBZxF8XlECmxn43nkNszHS4YBjo7BlXBSDK/fL71e\n5jjiac7Xo0H+IfDa44avfmnNNfPxGFYBUtT+vvnKL+TbVJ08HIMWsA9nXv/z\nxtfa\r\n=s6o8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"4341bc65f76a969f4c509e0377782964d687fa01","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.14","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.14","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.14","@storybook/components":"6.0.0-alpha.14","@storybook/core-events":"6.0.0-alpha.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*","regenerator-runtime":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.14_1582066874215_0.8189520819215454","host":"s3://npm-registry-packages"}},"6.0.0-alpha.15":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.15","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b9655e61e764aa5762804c97f97315de53b83df8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.15.tgz","fileCount":98,"integrity":"sha512-PEPyAjntczcOc26GFpY1hYr2ssVYLNhgpRHZdGrwG+ibQXl4sP3U4oezc377sHfOMof5GWWFV/Fl1bshHyDidA==","signatures":[{"sig":"MEUCIQC+EkEhqf8Lrt03BFQcRWqZ2xmCK8TMFHl9Ye3KoBpeWAIga4R5hze0EIm9mIPaQaTM7C7jjXrLDX56AmbAqm4Qzag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTgTRCRA9TVsSAnZWagAANh8QAIZ4nDmjnX8wcBZmBfK9\nOXbvHsaG9ZqTq8uXW4V51nJC3s/xGOBpvU6eP4+k7oql1qNZCZBnaMgTUJXi\nfYp+lyvu9grQwgwPIu84gXmI/YhqKzpLfbmsULC4cgjYQyTF0sPnNgHJmE7B\nvPaC0y1b20tLA4my3nGHjbs69/050KX49Y0Ou6VN9VP7fhOhr9iQyh97ctIi\nCcD4VqYRWWCUdsS6Rp0WD+suxYzH4/kR61UghOnljhK0QX83dEyBfU2f6OwW\n9gFpXkCyn5WnYH4ZrmGsENcNAw2khNKLH3/4mlUb+QlTBnyyt0P/SCwzrX/O\nsn4Q+sVZh8hHN9x1nPS5UIbV3p1L2dxHAg+eAMepCHreHAR4x7B+MYGomB3w\nBFeAVbKZgZ9K19He9yuPGsbuibB4VD39zxXKcxm3Ch2qtdg7YbVi6nsx4FgJ\nyjZFMEJc+OQ3o6u1XondViVdKGEXZ54yMj7C0HKWuR4XGn+7f2UXQd2CpBlz\nxQmIyYcUpBNWdSNO5zFl/TgJ/9aUWAffElXw7SmCXGTQUHEH2DcRwtqiIVxv\nKP3WGsnIM2+jBpsp0lhIzCZ+o1tE7maufnKrlwU5r71OTPQoTzTYc+vQNvgH\nHiQMktxHNAdfHin8/uGqs1KWIsqNSb7PUbIhpdrjgWmoOmbtM8/rClHGbzxt\nXD24\r\n=V1cZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"efd02563483f19e36a6183b9e3b3970bc97057d7","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.15","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.15","@types/react-color":"^3.0.1","@storybook/client-api":"6.0.0-alpha.15","@storybook/components":"6.0.0-alpha.15","@storybook/core-events":"6.0.0-alpha.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*","regenerator-runtime":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.15_1582171345036_0.33991042538994143","host":"s3://npm-registry-packages"}},"6.0.0-alpha.17":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.17","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"69fe6c3243c00e42bd7827f37db0e3a870d4822a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.17.tgz","fileCount":98,"integrity":"sha512-rjhdDvrP/CU9rG8E4Yw4IkEL4eWw4LPYQWrG6yK1QEMAVl9zXrURQosW2MqpHgbPOrSIv/u76ZTR1cIv5EiRlQ==","signatures":[{"sig":"MEUCIH0CQTuG3273HuK3DkheLWOxlLCNMGIKMc808oJvIws9AiEAl8xm3I45DbyK5JtftsckvW4ygpK2NZ0t+9r/o0YWHTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeT1d6CRA9TVsSAnZWagAAru0P/Aqwcn8TIYxMjXxS0ldO\ndkhl+Eds19rq9TpeBbVaW9XX3xiV5gsX2uvZft6VdRi25Uqm9wHZF6d+Imb+\ncbjtTBnvOXNX4NmCtY76aSixJ7qdzLp3EQVLw0UJcRqWRh9hE4s6tpyDyA5Q\nSdgc2fkY/2pqK2Z2k2AxtvbLVFn5tnGq7teZYTUzmwoAp2KCaC+yCT7vGfuq\nXKLI8MWEa2BD9HhjiJURxcvJawXoraEX3aNDOMYUdIvYrYpQr4whFQO1neZX\nrFAFkWCaqkkRcUxR/2S6Lamd9aDQjDAn64o8LM5jWad9ymlGjKIHYxM+lzeE\nZeqIhaBmNd4LZjBK7wRoSuPj9D4XWd+F+LdWu8n8OShVCzxkLEOG1gXWKwdo\nNx/DnpiJyiisJ1sUCoHxsev5YGTGrjHAvfgrxGhTRbpZmSpIO9qpj3JwsVaM\nR69GtGhfT9cwVPsmHOggIRG1nQC31tkJmYFwTUxoJtuqfcf98FE6ZCsNCxmm\ncTsHGNonU05tT7YWm1k+seOYgSda6/jFzWSd4C/Qo/dUtAxJY1yno+iphUB2\n2gQpK6o/Ud2k9HKvQbaafRXRgzN0RSlJlhALb0aXKrZ6UYKhHNjpiixSzT6Q\nD2Rd0YFDyQoM+zStiCNCG/HtLYbqyqfFfVguSGtW2YYVyqwW+l4LTRwNBeiJ\np76k\r\n=TPW7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"36327ee08ef36c0baffe420e3b4c61027146fe18","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.17","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.17","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.17","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.17","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.17","@storybook/components":"6.0.0-alpha.17","@storybook/core-events":"6.0.0-alpha.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.17_1582258042441_0.27327131369748336","host":"s3://npm-registry-packages"}},"6.0.0-alpha.18":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.18","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"fd2a7b0c63293719ad19ecbaf2ce5f6df72ff5eb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.18.tgz","fileCount":98,"integrity":"sha512-olaUcwTDXrKfYYu+EeA8DctAAwQtR/Lv1GqGKMMt90XdevzuNOu3U0em9roFrIlQfsB9cinXE/T5S6eW++mIeA==","signatures":[{"sig":"MEUCICAkod3L/3GAdYj9gm58Mo7FXan0zZcWu4JCnSPbIe0HAiEAjbX40GQRsu+OBb8NUeogDHEkNgZRAwy5yLWvbpHa8nE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUEADCRA9TVsSAnZWagAABe8QAIqxo1yAsrjQ9rJB5CGL\njKIkmQTWzpToxl7vpcL1tjI3f7A02UVEPnsf4qmGjKRXzKNpwpA5v7YcScxT\ncYQW3hcKLL1wpd+Nft73xzWwQICObovgCyp23Bh8GjBoxfsoqbMjI+vyGHZv\nJgbE6eEujrMuqGFSf/G/IyZ39wVJNR77+WUoP7Q4FpapP7sqCNFjGigEohUb\nomLtXsOJzUBYitU7jLn0dRRM5tbPc62ZEDF94Q041E7wbcpk263RsHObTm3E\n2G3/Esfqr5suutNZaMq08rjDInzglc4RZkO6HgHem+6GNrtg/y+33CaUfwc6\nVpMQtw+aM9c+DLFkJNzIHI1KLRri0hpqJyXWhrh31i3CL5mW1zjc594SeQI4\nOmJ27WDEgqNJJP/s2dl8f7LlVYOHnI9lHUF+s2D0PbZbyaYO9mmKENJjrA/Q\n9y30pSaR/f6/A9ELtErhO7ST1xRr8Ahmcs/kgR9pDLIcMgineO86XtxwqumL\nKwdkjq3rVc47YzqaCYmjtupZZpGB3aR9Kx6NG3jLXyLrBnpWMkZhOjbTbfZO\nGEKB6wB1SxqTEe27bPhg6Pk1bNkut1ItrrvVgR87M6DYy199L0xmnrnRuTr0\n9juEcPJcUwpBacIXHAvV8XY9qZPdJm50DCowimIsMRbuN5bAzoyPUGh0iURr\nzncX\r\n=9gsl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"480370557a927cab363fa6cdc25a63339f2bb00a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.18","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.18","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.18","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.18","@storybook/components":"6.0.0-alpha.18","@storybook/core-events":"6.0.0-alpha.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.18_1582317571074_0.8353913051272599","host":"s3://npm-registry-packages"}},"6.0.0-alpha.19":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.19","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4726c09268935b18cbd6039cd2d59a702462b460","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.19.tgz","fileCount":98,"integrity":"sha512-J73DW4VD8jQmrgEE02rzRvG2eFdhCLhkhMtjamdzpitsVp6V2gWu+95Zd1xQ83T8XOvxud6sx7FNZs1o6HtJIw==","signatures":[{"sig":"MEQCIHRANzBCYQbYQYNU9AmDIMkuPtCCCU2bYyg1wSWE0fIgAiAseWcjGswa/w57ijREetWfPe+sgGMZnmmnxTf0zl0Arw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeU999CRA9TVsSAnZWagAAAfwP/0TMdLH/NdLpLdX32dQ0\n25wl2E3DZNRUykn64r8C6j921ZcS1cJ92mDJaQdM4n3xuTN8GlYWsp0mqT++\nze1quS/FvGhVu5YjvNmav420UAe1ZMrsHaJwhr9HC4G0TWV26IqsCBmJwUBS\nJNT0nIDxacwgkaHOU+ZX7Sd/PquZC2Hq9FkkZ22PE+nsXEcQPy/uS5ocM82l\nHkWI3fJF7zelST6tX7TCTpJGYfpN/jJzxlVLLitR3Bz0rFk2SqLF1HExFVn7\nJP1EKAOBJ2iPCMxB/kLJQmlVfyInrSGGrdN8OdUQ8oboA5zZsAuS9Q7hqlh0\nG3JNs8uTetQ2m8wUXUmlpNe0G/G0hMcxs3F0ivZR9WjSoFGd5Vc+r3gsczZ3\n8lL5ZOo2dnNtrJJ4iiOjpvPVhvxYMNaRkVh390NgfikFt6k/hW9C2/4eIxXP\ny1fy89vXL/4Tx41cOxKAOLxohEHadHKsCb/2iVJualX0q1OBX+teLPxTPWwd\nl8NnCwJ/xU1GBuNefQVHTSnuaxV3PeiNIG59aSl0teL+89TArrQp4ktC9Ldn\n6g56YoYLde65Zp+RfJ/UgWF/ao5iytdse9uukBQXk+fJbcTjQrwjEJAYqK4O\nVJIe+ZcbyZR1Y9VL1egNCsvpuaAs8yoMIhJMm45q1BRyF6n3g4dM/tyGteYa\nWBm3\r\n=XNBy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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/register']\n}\n```\n\nNow, write your stories with Knobs.\n\n### With React\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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"b5b1bda641d3b6bd3d82b23d2968502f1e872f7e","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.19","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.19","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.19","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.19","@storybook/components":"6.0.0-alpha.19","@storybook/core-events":"6.0.0-alpha.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.19_1582555004765_0.6107093631588099","host":"s3://npm-registry-packages"}},"5.3.14":{"name":"@storybook/addon-knobs","version":"5.3.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.14","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b8b753c7e64f7087668396d66aee253a51717a2d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.14.tgz","fileCount":98,"integrity":"sha512-pBpFOdeCR8n8w6QHK1adABt6YKf+Q4itfX0+AtZRGLvbGum9O+paihvP9EVYPlKiG+0T7Zv2vFCl6q6qFjF/Mw==","signatures":[{"sig":"MEUCIHFg9v8s0oAzT5K6DLgBKs2+RGzUj+x3LeiO2kHxvWMRAiEAumIGEbp6zi7BUe32C0pjahQCi7V2bkPyZ0bH0ITwoEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVTtdCRA9TVsSAnZWagAAXqYP/AsqFZGwmsRK4WFt1uil\n+nWquQRy9E92uwkPdqWIh0+BTtbvBIo90uQ/FB53XoftpZv3F1uK+qBGRlBG\nTrFU9lg6fXXp3Up5GFbfGihQK/Kgwaa9wZrsajBwx7beh2XddzfLKztPtSk7\nj+NEgdNPg5pZk8t1u5fQpQeYRk3UrPDobdW42nXXYeF0/+tcIPwiOBqkL8oZ\n8yUXB096OLxUcKi4353vF/B4ucXcvujpNjuLGDe8F+LmDQ3OVNYRQOpN6f6k\ntAJ9uKwGBKbo3d+r7WN1vAvEF5oWAFYqlgiREopNMRQPRs2HkBwjA517lQSu\nlEP932kK/fm0aV/6n0U29tybgbaRVFxoVtxfpNCIxIyVfRVJPuz0tmnV+ftR\nCSeAsNcwBLyFG9GfSQqXjzSwRoMAbPOqD2Lj/uK7q890ltiTPa0CXKIltPid\n4u8HQrOb7lTFGMMTB0gJ3RPN/wrWUBMvxXe5zQw4DgZ+rlipaHOhs29en8oO\n1PVXR9DFaWxRxCEkXsPu/4ctmKcOuSgvVpXG2GAVcjnT1Whxav+PXXDvye7o\nhZz0J0eXJo3Ol5yEvAbzRIcJ8os5qf+eNvDjbckBtGMwyJvyVt8F91vJf2oz\nUqqPg4iOC+O0abRVT2jchylceMEXe1MGx28vPoEVm9EfWrgRJPvDh7Ep/eIh\ndpgv\r\n=h3Hx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"91d9c0c4e0afd7e494b23ec8076b21e45b7a8906","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.14","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.14","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.14","@storybook/components":"5.3.14","@storybook/core-events":"5.3.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.14_1582644060828_0.11281756694849876","host":"s3://npm-registry-packages"}},"6.0.0-alpha.20":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.20","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"eddddd18f4f69752b693c4fd8f7b4be8ab2f936c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.20.tgz","fileCount":98,"integrity":"sha512-qGobmJkk6U6g/dWYjC2iqELcD7E6ahuw6ZZM+YM+hng+XwRubLDmHm+bjGdFqJIHnDnbixFKucYIWa/JlTMMfQ==","signatures":[{"sig":"MEQCIEOH9irc5ed4M3sgsMJyyDoManwEUh5q/59/vMpwnkbUAiAx4YW/k/XpEV11hXPd9/tI3p5mkg2Uoyu3EtNUHunSKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVw6QCRA9TVsSAnZWagAAhDEQAJfVKjt25ityxGe3R2e7\ndL4h5MlQo3UBi0EuS2t9sUP5hfrqWM18Zd966v/SMucEY1bG17WRiQnmdrae\nxGPVnbVfl7wMgfEchLp37ikFmGapImRHr7sbECMhwhsAW7T4KWIRVqchf3aC\n3OlvUz/rjN9AVUkWZfxOUxHnB00o7XsBqyr2dBd29fb2pRUqZEeZYo6VPvhj\nmVgHPF4RQl4Q0TNcE9lBPgKSrF4LiiCK6GocY6i5AtCB26ivH4U+6f3wS/VW\nUVHYNz+7cLiGZ0CA37G8cZx1BTPLJbSBo1BI1i277i/7bjWmAs1EyRXiHyNY\nUOL41UTkWZRl01MkyWpApx/tCJ/Fk02uK+MtR62PmuEm3vNeibL0WeJtKN1D\nXpDSLQlfJNxL0zxJmtUylJATt6axroU03QW8Xzn97AZdCpKxWeGHCO5uc7sX\nRnfHvPDKptEGWkHpKto6QnJcC2VfZbrjIxw8pIXN4e62hqGdNMxNs9rWKePt\nxAueiMFyO1ROCiIMLa0/F4sSkrxCWdrXSvd5jLzcuOFjIQ0KkW8p6BfEq8xz\nGZjlwQU5QgwvDyUGQFs2dKsZnhvrZkNrt2x9xB1hVrCu4DTkT/VlBLKEtQNP\n+jR3EvFy9Ys0DdfJe97V0nrpN/lq3rbGRd1MCJtYjNr7QIFpwB5JMnXMl6Hx\nAGxX\r\n=RjqM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"dac6752d479e3be806cd57dcbbc40a442f759b35","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.20","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.20","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.20","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.20","@storybook/components":"6.0.0-alpha.20","@storybook/core-events":"6.0.0-alpha.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.20_1582763663527_0.922942763851913","host":"s3://npm-registry-packages"}},"6.0.0-alpha.21":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.21","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9aed6a42fa43464ed4a551ffa34d218057fd0786","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.21.tgz","fileCount":98,"integrity":"sha512-e1Jl6OyKpUmWXjGXasjbufwdHqoSQG+ssm+JnlqK+kkRGOMBBm/e6NLUH8uwcgqoX5lmPEU7gVcd4L8x+yq0Hg==","signatures":[{"sig":"MEUCIQC5YrouoXC3eazeeVmBBttjiUV7Yd2R+qGolhNtAxmr4wIgTeGSnUmHOVEvO0sMZBDYAAckToQIxa+QKkrfMEolRI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYMd9CRA9TVsSAnZWagAAkjkP/iutNMooZgx6gUXo8eHw\nJQTpl6bPlmmsW1iubt+1AZeXCPRq+PG3nYn/5Pw9yg8G4y0vUxpOEXqGrhyY\navBXAY0YgwbMUv1TAJKHHqpsBzmFVGTjDKrh7BlnP3nvkPRvN2syktXvmONn\nJotJ8bmbjw4DMVOJwmX8K+liYFIjfwc4M3hoelK3wrmG1cCiVxdAiM+/0vkN\nvwGfbfI0iNoNjZM8O7LmZ7BgIGkj8+E5IyW5lj35PojX51LBjVBZvvFdp4kB\nXoVMj4Q4uqjINHSxV7+XwhBWAmahfVHs/1sas/GMw4+DrNeSaW2n2ReFTaIl\nNxJqsRPsDPuVDA3SFKrg0a5GvM5yZAo3CGR5IMmy0swqvf1mGCuVKA8Ix/K5\nAVdyp9l+VAZSokFUrE4S2sg/EMwerZdlUpLEPdoTIIVjiK63X+dAJ2ZDGkPE\niwtdRQ6hZMsY199Jyh2Hv7ZozhVOUNCybvdd+JzHyakIAme39GRJbnY5RY+k\nxWgzOtaZBjE9RTB6fw40rRG8LAyzIeBEUeepKsX0hJ/XxBoYLesc08pqMwRp\nZ4uJAvrF5uqSvPECi6Pc8v/Oa/m+Nj9yAVciDMZrXSj+/bruzMaD9p+3sJBW\n5MU5/PZ4+q3kUMjbDycn8U5NZmhbkZcFMQrW9JBgpRFiiWTlfBk0KrbhvjvD\nLRy/\r\n=PTQM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"797083630938596178bfccad084d8b16113ba6c2","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.21","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.21","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.21","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.21","@storybook/components":"6.0.0-alpha.21","@storybook/core-events":"6.0.0-alpha.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.21_1583400828803_0.7907270500298056","host":"s3://npm-registry-packages"}},"6.0.0-alpha.22":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.22","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6d8bdef50aac385a51a6d8ac63c393ad3c5dd225","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.22.tgz","fileCount":98,"integrity":"sha512-ZTNc46/flzOiHC2I6ot+VRhMLVwB1sBBdGuT2b1GUQzTNkMoTlCufO8Xrp1osPRl/7mR9kkcSm6zDsFuquTdkQ==","signatures":[{"sig":"MEUCIQClYbNeZI+fWIAEmKi9+yKMmihGxqtIz4/QZ+OAj1WV+wIgIwc9bhD9KNDd5S89U1XvQ4Bl7XI3q8y5w9HOfxBCMAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ3GBCRA9TVsSAnZWagAA4D0P/RKSoHJrwpOitK5yr07X\nY6uBZ0vhdc0byUQULXnkbMP+hduJo3f88OGh4gpffvqf5Xs38j8Vpr/xnY9o\nM6tZrNZcf9lNSoYGhR7bFgT3BCBM589UXmwuHlfw1le/+p9NyRw3U5vF8dN0\n6O8xIfv8uRzHg8lvqNaRMLPItOiBzF7UKQuiRaCw6RxebXHyuXccX7y5jZ/T\nyz6maOisU6Pr36p1xTZVdqPyynK8+Z4GoN7hmodIWezoOtBopzEkVHZyTluA\nqvvIgsdCefdoGEnenoFQCbCW4nPGpwW4gsKnEaeKEqFA+LHbACvkVmIjtsr4\niZJSCUQni06Fthv/ExM15Asb3dpsa0OzX80G2DnM6n+kEiH7B2spD5o5mU9c\nUGuvE+5a6DArNhAVwkOnZVy6R1ghCacKbaUUMfyZV7yWjrZ97X6GsznZFA1l\nnNe6eLRB0VIljycgk3/TVTdETf7Zldc8h+UOL+MCuwFkUZFoQDzHbeyV4l3L\nCZtw+xkEN3mXWa/l+5yLPJH2Qwe4sKcDpELFZeI69rQ8wDquzdJ7TGPjVaDt\n/fl6CJ4BqX54dfFlHfFo5i4tZe0wNqbRMAUrlmU1N//9QJmXkLqqSmppylWp\nXYhHCPTXEsZSYjtt8Z3cg/76hTJRKofoWP5EXqsGytKZbTaDV2Zdx8BkHrYR\n+KNS\r\n=wUb8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"6cb32b3d989f54f5dfc6647ff61cec4b1c8cbe24","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.22","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.22","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.22","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.22","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.22","@storybook/components":"6.0.0-alpha.22","@storybook/core-events":"6.0.0-alpha.22","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.22_1583837569437_0.35633185871808903","host":"s3://npm-registry-packages"}},"6.0.0-alpha.24":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.24","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.24","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"5b0ce0b4335456c633287ee0da806b25e277c66b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.24.tgz","fileCount":98,"integrity":"sha512-7AHBQ4/JtmdVegNANS5VN1InxRcsu7mMbfLRdI9r1vjht/SKkMRuNJFlzcTunIf83DXICbBtYrtDjNSYD8RQvQ==","signatures":[{"sig":"MEUCIB47qMoWxAju9/z3WI/YlIDEL4vt67QYnZhq0DLFkfygAiEA5o/AH3MuF8GdMGJ/YYFAyvNVzeA4aOZHnbKvt2T80G4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaKm+CRA9TVsSAnZWagAAScwP+weK96ZEXiliNjs92ncH\nP+8PkkNB1F1G4tAQBaovWIURMNi2AOUgfWLukqhtIRG8fJqkl6UpDFv5ov53\nT+1M1wwEXonnst1dcssx4SiLNoxuwv0VxqQg5vYuwUkzUy5T+iXrOUDg2wq6\nr6OtzuUffFt3RMm7382fs99OVsYkVeRYZ60irYwxxdPUE5iadwjx7Qnjj0fP\nZ1WL2yy9Yjs9JTrUGSzgQm/jfoVa2TCoskTVhIaaIQCVpkg7qck4jmyLvysB\nU6wGO3u5JxsV9i6MhTSb9G0KDJ70QVU+dXm8Dqh+YeyE7WIzEBy9Vrn7l4Ui\nwQlX/p8kV62pknv3XP5FJEi5UbEBSbmi78X1cHAjPeKxrC2KwBwuaDBWYMWq\n+JJKzZs1Jhm1Djppzna1RPJ+LXYyeQU9Yt2q81I/FpoJVYRJeFfhoAYbstf2\n1ik30WONItl6VVYieu2K2ULdijXlfUcUFyhTWVnTH/Vz4La0wurTEq49ztHH\nMgHJq8HuaMsiyfIVe5fZVwGBVhb3LfO8UhqfP+SYX3+zN4KKaNvhr8qtpZru\ngnS57hHB5uWXkNWKdBAjHk4EX/Y7zYrVsrN3uzOVU6zTBFfFbIT6M2D/PuCa\njmlKQU6auYgxRGu0d9ctGoLuzkR5vQgq3ScOn85pqwDL+zU5H4ys166v1gkG\nL7FU\r\n=BRJo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"7a68f72411c26928931bb4afa5548012592c62e0","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.24","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.24","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.24","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.24","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.24","@storybook/components":"6.0.0-alpha.24","@storybook/core-events":"6.0.0-alpha.24","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.24_1583917501852_0.5720456737309241","host":"s3://npm-registry-packages"}},"6.0.0-alpha.25":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.25","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.25","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"5d3cbdcd47cbb1e7fcb879c7ef135b50381c71bf","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.25.tgz","fileCount":98,"integrity":"sha512-IYxHPEkNlkDBiMy7Dhwwjs056G/NOx7S+CC9KmydhwPRLCG1ScUTozr/igVemxLdlnQIjZ+Bbhk5RNroL1NGUw==","signatures":[{"sig":"MEYCIQDOyTVGPNGrnDbNp0lGNP7tuS7cy7iy7c28OCkxNfK9yAIhAKUcH58yrqhXM11EWP5Y+aoeouncGNp6Vg4tDgTmX1UJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaMVBCRA9TVsSAnZWagAARPoQAIP3ioQ/UJw+jHZC8Abb\n+CxEPwBmiPgggqfK9oCzByEuDHVsXX9lhImECUEZHZ/qB+bPqNdjpqgU/Uf+\nYEGHFfv/aYdDg8ljbONC5mNocyV4K1d4127PfKM9JwwJdhOF6x+IRJqAoe+F\ndOxnzkGNM4RSpp3/ubqoi4S3ZWEjVKXViZ67KNJDVC93S5l7Kh0Kw/re5Bhk\nGVJl/K1fHK+gGb986CyBVm0Jm71MLbFHNrYxLWO0SCUufTyGn7nOo1m3pb6U\n5lcJ3vY3Vqm9yY8tY98QFv4Ew6v+qoXy2btC81mNX7zg7JbAFFkiwEMZ+tRO\nJ7Aya048kmVU3Be2m+W1Uc+1uhZQAvR2/tEYDK0Rpmd1zq5u8QxKEHr99+CA\nZy96sKTYH2F35QMa2FcqhMqDYg4EBkApzgLGh/IjKJ3OhE64rR3rWeof48/o\no2+jVw8S/Hrv/4GZfdoAWtyZ5oyrD0ie0OIIgRABd+rYMPWxSpt4bXAVJHeZ\nR5XcVBvUi5jQ3nJEYjk9yDrycQgaprJN29x0Kv9R3RjJuF7LqsuNDtoUQ77S\nNP59KcNeWsqyYhCmiggL1uxut2GsumZQQgNtJn+OHYm1lX20Z9hRtQNGBgEL\nS+LED5kQVKetVVko5hQv+uN0q+zrcSDxlur2gNGc0FOlXy7q9CIaZU5TufAa\nVF1D\r\n=dWBe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"cbe0da787a5807306b58cc259005642aca131471","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.25","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.25","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.25","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.25","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.25","@storybook/components":"6.0.0-alpha.25","@storybook/core-events":"6.0.0-alpha.25","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.25_1583924545294_0.8383207574209719","host":"s3://npm-registry-packages"}},"6.0.0-alpha.26":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.26","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.26","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6ed81b2c6dbbfa4546a64b9c0596848b77f1b8ce","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.26.tgz","fileCount":98,"integrity":"sha512-Pl3JGBII0UFsTaz3WuMtyvP/YA4IMUZVd+RL9UBykSFahegBohsmvGCAW56gW0tAq3o2LxRGNstErB23K2LLdw==","signatures":[{"sig":"MEUCIQCQ5JzQNDbuZfQWpKEd2BR9DuMF+vYl9je6GPkIBrh6kwIgDd91hjInxVqxN/Z8lNIoaI97ejY1ueWgzV/tsCrYxBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeajK3CRA9TVsSAnZWagAAaYIP/0TV+tGaz6eKRkm8zPSc\nQKp5zmLOh0gVrHyN2QKmqRQ/b9CPEKtZMhL74Fyz7BN0wlBYXGliRLoy4bfi\nr/6P9mCiZKMKxAweQzuuASvnYmsVXeyhG6d5CEtVF2UGbERDARcc5lPnDLrx\n2aS1X66Qm0brjtqRW0edKLoYJvLAoqlvTZRq0KsquFC4mEK0Zm+2XsnRQTRw\n6fbawWaXPfBNCDS5OVR6kKkfzldDm8wOpM2iosZSUmiRctgLed/jn4qKoa95\n1lu4Tivnz5GZK2nJWgyJgPqh4Sd3zTcR2zhBn914bOExeLX+ZDy521v/sE2d\n4/nr8ZzMy9SCSlCSzuBUC7YnUpVuLtVUCZfa8pSeIpx6ErAsjib0x7BieFVl\nxcZ9wFdGhz383o901hfnX/7dt7uBta1K07t1NZmpRFPxMJZevnSGdIeDcE3N\n83gVQ4G8gPz5Vg6lJkwJQu/VWXx8f2I5IMSKK5KJk+y2i5zVnjLk+QE07hab\nmTlSWDB/8DVa3uiVtXRe0W9F9pbnXDQzN76HgHdz/HIdLCoyiGXX0cFs8OfM\n/eVSB+6x+5Lw2zI3LntpwAeQ7if9dkuqD3pN4+8xOBVw+SgZAQEUjeo5z4uk\nNpiBBqWkA9vyS/dxsX/yFOVUwXezeueM1KGsMfrQHXgUO1RY4SDoS0IBZ1/9\nq4BL\r\n=Ik3A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"870ff062f31a5140b82148dd453326f7ba9f76ad","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.26","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.26","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.26","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.26","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.26","@storybook/components":"6.0.0-alpha.26","@storybook/core-events":"6.0.0-alpha.26","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.26_1584018102917_0.13957003311433547","host":"s3://npm-registry-packages"}},"6.0.0-alpha.27":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.27","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.27","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c9541306b6f56de4f86e5ae14c7036d29ed8302b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.27.tgz","fileCount":98,"integrity":"sha512-2BeHA5glCeuE5cj3UnzuruExv0OpljZlaCQPeVP7n0oQYklg3mayRvd5x/2zgVVsqJGYvq0tN5UEDChAYP0mhg==","signatures":[{"sig":"MEUCIQDksfLCKYZbd6sPAQaiRJeR+hoHX0RWmXL0Fx2HgcaKQAIgPiB9UUqMmpDYx5dcHyswr3puu8UkiLUhxHbH1hA8HwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea362CRA9TVsSAnZWagAAHBMP/jb0/ttpvq8R+a6ACf8L\nJR9UtcIMYqa5Bizox2DyDBlTDa1djEpI1kHjHas1lqom/JoWcxH7Xs/9wIhT\nbprVxMD6TNsiIyfHcYAm6YV0YXnXH8hJDe2KEqFzEtwOht3gbLqY7Q1JfzTy\n3p6Udgvrd+f5sXk0PFW+/4lP4u1Z82OPB9TAo0nXu1y9geQAbATmei7vlNfZ\n0pMfKOs52PvvcdLo9IE6Q3DYtJYJ1OS5dTY9oN3wronbZIGkvmoeDeQephev\nZ5a7hlC0E5rqO6mYB3JNxJie7U/RWTbA5jFuXNzvWcmJHk9ETMeRV4pbFQre\nauH6OthYtcW1O5DDC7Ag03QqD7ycp6mdwuOS8DUjfMQImf1So4CTlCaazwjV\ngWcYzOYjLN5+e3hI1RrI8QDBJ6fSJHrBBzvDkyvAgHUwId8NrmwkRLO0c4Bk\ntpYdzn7aCflmvrEK2XJ3X3siHVYkiRSGoRk46VGcu5+sDP5ZdcBME4OnorZi\nZTIT9h+uMTG8uLZWTpHOjJApwAlHEiCc4pbZgewN1A9S0mc0xQ65NxvZbMr5\nUH3DHZRStD3LxErq/7XVT6BhOE/SuT1ssqanSbSdmcHw2NoYuFzw2qohnnE7\nvJd0+mmxUIkg6gL1J1ukSuyIWuxkdrXLixZGSuV/teDR1f68lazg0ZeaHuCP\ncdyA\r\n=MFoC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"3d1d35534e05ba6623bc18b0b959e5ea38162952","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.27","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.27","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.27","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.27","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.27","@storybook/components":"6.0.0-alpha.27","@storybook/core-events":"6.0.0-alpha.27","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.27_1584103094591_0.1771732936891497","host":"s3://npm-registry-packages"}},"5.3.15":{"name":"@storybook/addon-knobs","version":"5.3.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.15","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9a2a8e653522466ff7d6725108f476d585bacac3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.15.tgz","fileCount":98,"integrity":"sha512-C8EGBzrp8XkmJAaLMq17ISVaCV4BFYAZ03QrMcxkhyDD+S8XLSd02EavZe242IIyIkc6CoNJixfQFuDseGlskw==","signatures":[{"sig":"MEUCICpQ95rNgTa8/wdqn6Hmmuh156vIebHA+2HFndJP8nOKAiEAyrR23Cf/Ra8/B0bJGW1wE8PD5Ew5h2OvlEnMgRjCo4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebFHUCRA9TVsSAnZWagAA/oUP/jQIwtaNYE0Bm0qWR8KM\nInffKDaNZY7V44bqR++6SZsVnbJDiBzOyuPqkavUumZc2pCa12ra+dW1qFP2\nCgY8+fLtlRO0IZ6DnHtBfQsa6O85AVg45PQEqFTDgoyUhVvO3XwosS2igPjH\nLjm/LhdO4u1eOP2RnkIn7Wu46v8QRFkRDKKhljNKlXv6V/6UYYTaHZ4lYsBl\ny4Zau7Ozwdm1XyhH4u89i45ehrUGyoWkWyACNb3yRzZTWxyq0C5BsHjUEbwA\nm9l+HQa2JsVRL3GFk4k1xvSsOFs46LMfSjvumfKs4gqjt1/k9a6ZU1pQZxuU\n1uPZsUdCVl0FRCQxy+STdUIPdxGtoxrdgJkM/B3e/nB2105qjJvtOGNakTrS\nA1E1036M58RvbXagW0Fp/WQ/Srmp0X4hev6kqMgNCk601ACpzIy3KprwBK0G\nAWVrt/iRCpugDaz6lTSaqSWuVs0MdA+B1cgocYHpLIolHKn2Lj7SjmkDNiV7\n9Z2EEnyie8hQaCq0oiuVrn2YS/HOmvrAgB/IHez2omMmEtx3vkcqjfd7tZYN\nFW00dZFaiGBpX0yjMvKMrYA0sy5Qaxn4xzR3lKfX0V4Mzq0LhjYkQXMJ4ZNu\noEw+1TVFyyAljE2EWKo4mR/2lbpmgtW2LejLH74msYZOuoHFzXijBJj7c/Ey\nGvfA\r\n=6iwY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"db0e79bc999ab68611dc130d0f509ecd88e590c2","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.15","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.15","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.15","@storybook/components":"5.3.15","@storybook/core-events":"5.3.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.15_1584157139992_0.6921298103355649","host":"s3://npm-registry-packages"}},"5.3.17":{"name":"@storybook/addon-knobs","version":"5.3.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.17","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"5c255a1369bfec898c2a6ea7de904b3eeb7a31d1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.17.tgz","fileCount":98,"integrity":"sha512-SMjvH3EjUbt4Xn1Q22thXVQSDrJRUB3IAzhUNdBovFB3RwOXmRFd0iSHC3TTKJfW2TYPssl8cnNGQTH6O2d14g==","signatures":[{"sig":"MEQCIH15/zannf8v9AqY/djl5NHj4wbQin6Zzcn4/u+GXujbAiB3plPST6Vu0yXm2mcRsWcasPMjeRgbUZlzdZG3cyJVFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebIxQCRA9TVsSAnZWagAADnUP/jbDR8LYqkusMkj7MEU8\n2D7NifBN0UDbmL+h4FxvIefRoHCq9TwlGHngr5rHQ7HI2UA0mecVJURUpcUk\nDFJ9TFszheR+/VCdWZtnOUmHZXrhTDo7caPHpjrNd4ZYoTSMMNWZV3lqujK4\n0S6sibIdoU2z5D7H5eNiZGdytYXBv1PPn5r/sx8vKJwaqc5LQGGgT6dhUYar\n2SQrcu1tYU1XLOGAdQxeQLPXYnfvTwZPakNzY8l6On2WKg7Dcm4sXyokMGD3\nKKJiMPw8dvMlkejQJdsO3sljXjHivMDVlQIFtHPnvQmJyb2sCM8qNBKSb51V\nSIFoHI7TNjaucdoT5udg6tKOyaMf3CNM3A3x5UsQInqx9tamiy50KIyo1L9C\njHGZ0fuL8IiDDgBMkblHxT9eKFzXEzT81nuBjczibRzyfdVacCwF6MQ/g9u5\nUhXPMxEuqnRHfSIddETH2aiSyuT1ITjLVG1g9+oaFw8qG2Mu4IhD+c1A19C+\nFzUw66w6HMGfsuJQHv/HzdL3Hhy3krsw560zn+62rNi0Y5MCx6nj5Bg/nCTA\n+H5McuH1wk+DvVDmHQH8XkSMrY1hpE2u+CusodhT8N0R6ij5PAs/0Pt9mG7Z\nUazqLjBH1++sO7tEwhtA7lVy79X+niWF8oGuIYDHPloTC5RKumld3takxqrr\n+d5q\r\n=Oa8c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"44e01ff253bb6c7de588d49659392f7bbdf4ad95","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.16.3","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.17","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.17","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.17","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.17","@storybook/components":"5.3.17","@storybook/core-events":"5.3.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.17_1584172112419_0.24202550434012204","host":"s3://npm-registry-packages"}},"6.0.0-alpha.28":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.28","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.28","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"37abbb26141c8de7bc8a6678d137983a159fe411","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.28.tgz","fileCount":98,"integrity":"sha512-cXFX0nyg5ReEctzQgLxs5kB6iM0rp2nC+H0q3EPXd2cVwUgKTcKn4XQUQKiifbQNIxpzM6DlknNZb++IOVg+aA==","signatures":[{"sig":"MEUCIQCABha3EyyYGMD+RBNt3PANhhIz28Jp3dseec6WbMxQBwIgVpH7jozWB8/FKswgDrzrQV+scpOEyXtPV6DvXsuAHlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeFFjCRA9TVsSAnZWagAAPQcP/RkWfORe7BGpYgo+fNSG\ncZNcjRy8WLZWAQlbPoMO0txUaz24mzGKXWVHiBMvM46v3G5ytp7PNHYT0VoL\nAqnORQ9V5Wgm7NCQeb7QtjW84XgCP/SpQ8nSRZbwbJ77dCY0PVxObc/CB1zm\niB+GCGWmo0SnTNeuF24GVWe7d4mSLn5NZMN1jZPzXQ9DeFHdyny2M/u9w6e5\nJ6Nm/hqRfVNNaQz7kc+D7KrCnE4pj1nxdTWK5WZCI9BHU5rFLywi7nWLCNRx\nveWMWgeN0uT4VQy+MItsfEVGe1HW5+/W8p5DVGaEObjq/bAm/eKLKaROS8CV\nkkg0SKe4LCj945z7Q3vhluLRh7dHwRkgP47sHnY+uGdIc2/Jif66gZcwcGhn\njgVILW86pPRmX8JetOeCeEsGKup9uQXDul+DMn++HXfrnkbYA6LKKXzDTaE5\nZTRVGEJnxw8rxvONXxwxnQvN42L5QBayWzqCmRzQz1QdGz+OM1D1mUptLn0T\nuBkx39MK7QEVmadt7/iB+u2jRr82jwgi7fkJNUV+SFSslTZcT+b8ysDhUmMO\nK/0C06Ufb+Ibgcdz56Rhpk2hccpjEeVnG1MCnFOxN/vGh9pa3wImNv1aULsY\nAhjEvDJ46ff3KgbHXMVmO7w2R5AoarGzCD8b4StuUlzE4WFVV0Qm0uHoRpav\nVuWk\r\n=3fsK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"482764665bc29242bfd432bb5988d99e3c841277","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.28","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.28","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.28","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.28","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.28","@storybook/components":"6.0.0-alpha.28","@storybook/core-events":"6.0.0-alpha.28","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.28_1584943458724_0.3772636981623916","host":"s3://npm-registry-packages"}},"6.0.0-alpha.29":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.29","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.29","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"de36fd70adedb5e1c8bddd692c36ac892847049d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.29.tgz","fileCount":98,"integrity":"sha512-nLKmh3UeDcQGM5TQ81CiNk2fE4eaSqZC4HwINqmAXyU/F24Hv822QuXmgPPWe/zkSHsuxG0B5rbU3odXlolssQ==","signatures":[{"sig":"MEQCIGMzQuHtxvukaeusu4HALCzYSDhI2eVDSImEOm4WpqCTAiA7VGAcK4vTidJC3i1tTKYyXTpF80vZGWLWpu02/T6ExA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefBevCRA9TVsSAnZWagAAFXEP/R6wIwSZpbn5UuTeuxQK\nhuBlUmqBOp3jQQLI0FiUy7YCkdT3kls6a7TQI4VAolvcXUg/PNyBLjIawMrC\napDRDXDK72Axglm/VKz8Jd6WSU9GO122e75SRHNGwoIbjeMbYCiw3TNZgUJF\nzQZSwyJiF4CVOvWmxZwCmTicGtTA5WRExL4SFGB5BeVawBEv/4UrryI6Kij0\nmHOp8VG5UnmU7MJ3KrQHqS+U2esjp73iLQ9FGrIyx2uqwsxQxj64Ghx7oa78\nYmceTLyKiBmTvX17fgmz+JY6sm1vopwbn2IYRuWT3rx6DetZXFUIrBQIUY85\n3I6SXtEiYzN/Wc8JAKogutekiSR5WA+yqGVw9opTShhatw62hJVqipLgLPqO\nBzQ/IuVZ+RD5Gf7tQP6Ypc9D+8hRp04WdOuE9tAgFJVjUWzvugkgjmpgepVC\nd8ZpLdF5huQdTqzvNMBLJjzY9ykj03LQ1DPRIM05zhU6QF2ycHyhjVhfJWJh\ne7G2A9YqxnhLsXf5ydTw0og7jt6TnPsFa3M1vp4q51+GMeILe/GGb1UNurI1\n8RNtvDr5p/f8tnW5hs8Nt7xZax9bctS4AuUpzgGXabFbN7FDykAq+zxWO8mc\nNpRqP26JisWjBQUd57wZN19mSfYlhTT8yzxAZ6RU6Te2cSuseUsgLHo2QihR\nvJHk\r\n=/cPS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"205c8975797cb36956f537a2a00e3d2b13f73150","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.29","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.29","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.29","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.29","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.29","@storybook/components":"6.0.0-alpha.29","@storybook/core-events":"6.0.0-alpha.29","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.29_1585190830932_0.2365247801342747","host":"s3://npm-registry-packages"}},"6.0.0-alpha.30":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.30","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.30","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0c97dfee832170ba8c7baa4d66c176150ee6d336","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.30.tgz","fileCount":90,"integrity":"sha512-QeNoD0YdR0MRg6MM4k+yA9WI0WvnN0NglGn78D6hzXtCZo3f3rpuQ+nIPZF4f+ohIlAFxr6umRxr8O1YnKvY6Q==","signatures":[{"sig":"MEYCIQC1cBqUy5WW3PQ8WTdh1V0M1jT9IAvO/2e5qX8URxa09AIhANzOvgp4sOOuz9qddL/TvG73uihrN3ZiK/GJsl5mgRgC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegyZVCRA9TVsSAnZWagAA9UwQAJ8c0M4Ckt43mocHVlzE\njtomAivmmq1a7nVxmWB4lSbCzMiZZWt44oyljVK4PsvB+qknnPFQRpBqSvJd\nMmw1CRoTkpc4C/jOvRtqAaXfbzJksKSWMVJYoKBc5EV/5wfAfBE7BX2SmoxE\nQPgM19b+JPCVEsHBXTUwqNoWJX3hfhcGPOVwolJDI5g6zU9gFdOaSjI9gNiK\nwLG9ReVhXkwXRhM4/ulL2tm15RXpvKzuBxv3/LgJKzE6MSAQYnOhIIK0kV+C\n5oozdBveNHOoVHw0mjrZGVOs6fyb25HnfXs71u1nawOEScFs2HnOzNxh1i5v\nj9Iap5IbmMKiICS/YVSYFLulEZOaERrBAVJjYlHV9NTwoMV8Nmp6CwVikpH7\ncfg65zr3dAEA0vjZFuMnWsnj1XY0grmAl5i8M0Se8racGQQqBlHWCV7tFd1n\nWEMEnQ6gDj3chkUf8MZFOYJHyRfZOoGyPhm5/8s7Qb2tGkoChwQnGtA+2xp1\n4hkpIl5Cbz5FZNf+54FH8hIBKyEj7/PoLO6TKMccEVIiNjZwQpbfJDEQg/2C\nsEM7a2Goe28UqHfTmDXlv32vgWoStRVYA8GvdzqceaplBrpb8RRUPFnxBh60\nSRRPR6KiDYb5VSSQbcAB5T/ctevCe5b/+JnV6H6yR7xL7YvPe7V6SWqIcFwW\nA7wt\r\n=7QKy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"76cf7e263d9620b31f8d8293fa6c85bf015181a4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.30","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.30","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.30","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.30","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.30","@storybook/components":"6.0.0-alpha.30","@storybook/core-events":"6.0.0-alpha.30","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.30_1585653333089_0.24517047370260947","host":"s3://npm-registry-packages"}},"5.3.18":{"name":"@storybook/addon-knobs","version":"5.3.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.18","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"60365bb179699cd8dc91df8be947469266012847","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.18.tgz","fileCount":98,"integrity":"sha512-X0WxGKoso3j5mS4c4enM8BvCjbO6Wwfxc++swQTqtANpBZ8k+w0piiEF1fiJf+ssgEAWe5brgIqnQ9kiBGLqKA==","signatures":[{"sig":"MEUCIQCKxKm2awHgf0B1EryB5pe5UjEudbXtahlA2P7agdFelAIgJaF//G25wnUPHwCkD+I1jcImFKsqacESY1P3swebyK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg0hrCRA9TVsSAnZWagAAagQP/RXYBEQL98dSU5p9Tjjx\nQaRda1VII6r9uA2G5eHdfIDHIlSey06FWCLhUDmqwd8b+vHo16fkLZAfzRKD\nUMc7MFS2qNTc2+PJHuiqK9MwmnVIOTEm6K8R4ZMLidWFeIH2WCoiTRsTWw1+\nRihYkTdNKTsKD8bRDS8NQIt5AsUtACHtJb0QefNJxs/ky7zkEtqYEL8GvLAM\n+ouh6gvKJh76N02zJoD5V1ZF3ZgzTxn6bqHKGsYo0BnLtQ2RiGIyqh3uyTSv\nSsH2iHZsgIGsJPj6bNf+sw9po2d8qFDphXLyuue1oA64fxNH/YcWY0D0M8li\n76tkdRYLfeGF+QoqxNIwjQJRMXJqo4T3CU4semI/0n1K4nC9SXFCFZwzaKue\nQAEX47CbLyLFeUMRSHCbIg4MoyQlFw0Yf7Y84ZjkYeRkrXieyuRPsxCFcfX5\nPkpQ3gU0kFXes0qJxhnf07WA766CcAjfkJphd8qQ6XJcOiDZLGO6wy6bH+4P\niRvYSgGWySeXXt4GmXiusP478z7RpbKeRf1lkZRvVcNWOGMEno9+RtZPd7xq\nUbuM0URFzW+UJWgxp5hI2oHTs/CA2dDXo+UCxIdBXIGUpwF6i3Tr3XfDo/le\nTfwPWHy4oQyc/DcT4xQ2jnvKgpsFLxwolTi1ohzIcb+qPPpRXhPNvoz7gbZ8\nMm+M\r\n=90QE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"ff445da08f82a7b0931647754394b4de0a2a34f9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.18","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.18","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.18","@storybook/components":"5.3.18","@storybook/core-events":"5.3.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.18_1585662059048_0.952785531347464","host":"s3://npm-registry-packages"}},"6.0.0-alpha.31":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.31","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.31","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"96addba38ca0388c0e0113959a2ce901ef1dfeb0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.31.tgz","fileCount":90,"integrity":"sha512-5cyrZumrvyBvuc2bGkbcfMbk/16dk9VyW0S+GHcEpY7ZW4G/iSK/uYFo7BzmF0XLoLbGC9lg7ThVwgI73Uh+YA==","signatures":[{"sig":"MEUCIAG5C228aWUpA9vLHABcjfq6pBi5+6zPrgcHDpxiRi0rAiEAu4KNBIUhOPa5VC/SLk0nQxtRvdIN1wvJyXEzaGJeblo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejFV7CRA9TVsSAnZWagAAZXQQAKS7fRp91PkghuQw52mt\nYpk/SuEQe3sxKsVuIq9ixKnF+tF+gOATTuX6tLwrHjTX2l6HqVUCT5q16ANR\niHBP6DW58nLKHrJEInkSAQE22kuYX9hXgzYdnMv6GgSuSxyJSEdWmE63po07\ntPTGwjxLze0cVzd4UXLqB9M6IGQbyIhYvCbRZr+62D6EZR2i1q9iF8/8D8gV\nklTD8lqSCVWKw4tFkQqlhM5Wn0UPgaaMPwbUAyR31D7EPrB2QNIj6gCovHFY\nsFul9/fvMhT1rNFfpReuUVDFdvifvGipDajDC00A0gcc7pcQhtQfPTSUvrsB\nlPhYCfbvkBbnGmjiEnR7g7JVA27OvGQH624tG0oRqRdjfWmThA0ZfVZ+Ogsy\nUAXSif4/CnzZBH/cNZnLAu5JcomsWDhSCOXfIIJpDNLCCQkuZfU4F9ME0X12\nyukchh7iMdyg9De2coCithkHRmelpKopA1lN9zAAiA4Ny3SukAUccSn0Bqzg\nGf0/x95ww41EWOGyaEn3T0PS/SzU4TMuUEY+RXSXv5K+xo3FPyiE7yJxSsk2\nMNj+EeVEV2SfM9EGNsNryT6MCF+eGq/oxKabI4n604RRsRwNRX1jOT6mIXNt\nnUCFn9Wlel64dAwOxLNQLVP9UFnjC4btMv6D0N+T6nP9nUvcCFtrpmGCt8eM\n2MGa\r\n=YD4l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"ff99e99f39e58efdad406aa6689cd5ed5175ba37","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.31","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.31","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.31","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.31","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.31","@storybook/components":"6.0.0-alpha.31","@storybook/core-events":"6.0.0-alpha.31","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.31_1586255226763_0.32622301980271007","host":"s3://npm-registry-packages"}},"6.0.0-alpha.32":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.32","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.32","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ce925211930c10af88524bed9dd6e0a3fc413a8f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.32.tgz","fileCount":90,"integrity":"sha512-NkX4qbShY89TG6yihmCxg/VMXxBmuq+fCW4OGtUdMDTbdZwHfMex0xB5+jwtyqJAhqhXLUfKIH15fu+SMk2gEQ==","signatures":[{"sig":"MEYCIQCcdbLZHTwmQIyc+gGsRT2lLDWEBrjCgEObDWLyOwooNwIhAOPC1NzuCr+iNMmH7DGQ/lH0aB8Ll8nEgTDUIjT9jb0X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekXyqCRA9TVsSAnZWagAAUT8P/3l1lKzMAGAP+AaDvx2h\nbfWGV/QKTM33qH0gCt0PQKPzG1fN8oNTIPQHQAXgGt3hBIO2V+qJF/BUJaFt\nFc52C4ZjikeCQEEf6Wi6YBcuuBl6p57MT5+9YU7k9m5FqFB2eQc03mCJs2ry\ndLXlfeDebVRPT7KYFmNM7gu56ssLFRddmZh2ezfIMxYtjT+eeHJWAVXd+WYy\n5pQ1ekFRYGW2VIjhF0fdb/VJQHDdLcduJ4z7H72ol6zm1uuEgRBY5DaGAQ6X\nev8BPy7+StyBg9VzfsBLpXZsglw4x6YpYT9PdGGUY6xYfRMfnmGSwHeZsQK8\nJJ14hai2mNInSxFuLv4F/8HLj33s6GFHEnGiRyXqgOI/0PtTVA9YaLjf4Rs0\nJDYecgjzB6W74QLxHLhV0etuZeK6Ai2UP9xLxTG5x2kNS/hXvqB0IkXMMu/M\nm/WbPsRAnHEpPjEYMgVOfJg0NS34IgmjZGVezE775mp+C2YXzWqulJKDXLkG\ney2m+BLQ1gCj4B4RYb8XyMOFmNDKMEJdrZRwLFZzFpNU9fqK4P4jQeCEgVDh\n1KORXBNQXQUWXv8k+ttFpmS7b2qQ6TMoMkmiv87C7By7TejnhPUw0fFVa11i\nW470HbmaHcSjbDNiHeBgfk8550d8VXcDUD8H6ZdWFTvzFeRQ+9jcXh3OzOoW\nBLNH\r\n=sX/R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"e517a6322a5945e02adfe0deb1ec99c25edee6a2","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.32","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.32","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.32","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.32","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.32","@storybook/components":"6.0.0-alpha.32","@storybook/core-events":"6.0.0-alpha.32","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.32_1586592937641_0.6294867120152465","host":"s3://npm-registry-packages"}},"6.0.0-alpha.33":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.33","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.33","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ce01702066a63027fc33f5dd523d97aa23cccb31","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.33.tgz","fileCount":90,"integrity":"sha512-lowR38CSpdXn8SulBet8btr2VCP6cHpmABcS7XJMvFQBXpl+78VxcVSlNJP/CdoihYz5LpZf5n6i8qScqOOKvg==","signatures":[{"sig":"MEQCIHMOXF+/dlCiRjU/IxDr7MzfuhVpOudsFTj5QrOFmqlAAiAiizACXbFRrCfnVJv1P+AD3w8b1rqdJhWxakWr+TpQFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelPzdCRA9TVsSAnZWagAAT50P/RWSFgS92G/L71k4ejQE\n/fZ5QZPpgXRRJrqUZhFT3iQ4NIdV0BgkYH16fMXAOa3VVkB5YRijkBiito4R\n0nbaOzwHBBZfJguTt9/Z13VEaiX5UXJJgmzjI3cRlLqxapFmMXA6c3cGm4Sz\n3LK2nSUOp2dmOp1qLkF3P5Mw/+t4KCfJqGwVJ40ZAAkGquPUfFksSHS66Kbn\n4yJGF8PC59gKDGRzNZJAze1lOG7jcx+1lCZX36WzMpzmDgzuoLEtHl1AXBZ2\nKHR0vRe61/nv6AxtoYcy1g1CybnvxyCT89tXqFlCMK10iaWubp4GtjxSi2qR\n0l6wZcgqf1TqHEKRoKdmiMJzIEUWqHoJgnyeUlA8RaOwbYnhw58H2eHGnOqS\nVzk2FstyuUVvspVlwII0Asyvp4fmuFIH5p9ZK72mxgcu0QRJw5VZ7JX3f2O6\nJony8lm+9mD5YwyrOUwD/KljXN/c1PtIN4it8v6Y+RnjHh+7LDjFxD5Wt4a5\n/Dk1J6DEP01Wk+OvdrzBqOIRJ7i1fJvB4PoGftuUNy2CCksC48hs7/8KEpi0\n0ZXb5TXsvj4EOg8Mk8fcFoASDY/r/OmPVMRszuDnybbPfPoFTs7x9s+OodFr\nBWVvg2Z6ZzxgUQmP8Z5PUp28jL52i1oB5NOkUWTKRd8mUgQg2Xofo9e7xL77\nCpUJ\r\n=7ROu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"5b90cb7bf2e63b26b746c9194eb9128bd815b8e5","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.33","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.33","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.33","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.33","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.33","@storybook/components":"6.0.0-alpha.33","@storybook/core-events":"6.0.0-alpha.33","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.33_1586822364891_0.7340553013807947","host":"s3://npm-registry-packages"}},"6.0.0-alpha.34":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.34","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.34","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"000696f9857a089fa055f387089e2f007df83a27","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.34.tgz","fileCount":90,"integrity":"sha512-X/5IW79JME4BGeOB0M/JkYMkoRQeHPovOPOQ02f71yFDS2qh5pmXEIWHuFkndVOm2QMMhhKAaCYx4LLO0aXyiA==","signatures":[{"sig":"MEQCIGy8YeRkbevUoV316kD8ZM8OY7FkcyOGU9bHXWdST30xAiAvTcCrBl78RNk6x6naIFNThh6Erttov2zHAnRyz/7CLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJels65CRA9TVsSAnZWagAAbbQP/jsKND9yJLS8FKl2PTEg\n3aWtP/ZyylyXzIJQckQyY0t+Q7NbDbU2WkKfWAy83OT1HmGr8CqSpvcHb4gZ\nyPsom7gqQkyoMPEAFOr/Um3jm3oR6ejcEWxNGWPoljA1lyVjGZgnEgT37EiB\n83QhPHqTBqf2BOhIyisVrh87Q4qwUkb4yIWmjJcJm7yuLgHZwrR6O06cjcWJ\n6AvMVPfj68VHLAECM54DFoXVhsANUc3+Iv2WY82LE1bj7DNCAKPC6oJiCVU3\nB8K+uaFijR/zkfEm0RHUbJDwKz6vJXs0v4AV1FaZ7FJu8arVNKRd8jOvBB48\nvO/dBBiUhtVl/KrZ316iOkt2RLSfu9QLs2EjaGIJvjSWDk/V1jDCi+G7gTfs\nH8MxfecssM8tikk37W2Kn6Xr6Q9wXwIwdkY0o+596O7Wwo5jeowQY0hJkA99\n+tYkblMr/HDRHNxoaP56BYvz9p17QTub9NQPA9g3WmjtrWgUt3G9Y37yelM0\n5ude9OChYgzY3GS5XQyK2lgUv97tEFFK4i5lEZEcCLi3rAvysY0eVN4OK6JI\nswrRDNphng3piF62C0Yidi7SHUvADv57wkD0Fp4hJCBXSPAalLt4ddce3e29\ncFA7KApjK+AQHxaiaL09/AdzPJRoKCFHW38rD1K2TAR8H8V2vfOpd+LtzvmA\nXBU8\r\n=JS4u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"c4da5401d2fe5153472779673cfc2d6ad7b57f1a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.34","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.34","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.34","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.34","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.34","@storybook/components":"6.0.0-alpha.34","@storybook/core-events":"6.0.0-alpha.34","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.34_1586941625374_0.49675594764591957","host":"s3://npm-registry-packages"}},"6.0.0-alpha.35":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.35","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.35","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"dea63cd19764e89f41989f6816db674c56d87fc6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.35.tgz","fileCount":90,"integrity":"sha512-xRxU9lhD2HBGDEdROEKzAim4kIfFZmRP4iPF1iWkHEabJg9N3P0Ajxmj0S/cJWfRw4qHCX0X0OLsn8d5O2DhTg==","signatures":[{"sig":"MEUCIGmCmLj7btfrE07IOYOVstCEY/gkCOW7gyk0OXSEegFUAiEAno1Y+U9M8erb2AwXr102urEyjostH//fAi1MM1C+r44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzMdCRA9TVsSAnZWagAAHeAP/iLNqlhb1iLsL0LIbYSZ\ndj0m+TBTHK4yx9SRwlZLqopDz3FichUrXIMwlHKkkUaQn14avxt3Q1Sikanm\nR/E3Rvg7QUQPBBtNhfyc4C1X+JaShejml6RwwRbksQp+NiZOFmwuqUVV/yqc\nBFZav9uYrIPty3n+R8UXx6wqbE2RncUlV/U5eKS7U4ZaPi9sDvSojp1tR9i6\n9h2TD0dlCLtDtudXCoLv+Dc7h0tTTvREcvOEkrAuXqd6YxFgUymVMQ0povyo\nSm9RMDVVYn8g765KbE+boEiyfmXoHUcDwyUsj7iv3Ip20i+KtY+iIVKraLPg\ntx4xhEPaJiX0REz8BXLCabmEYeytxr8piIRKMl/c5Fyti0++yAYU2/wgcQVx\nd+pLO6WILvTYOCeSRIkmLamcuiOzHv9cqXkhazrx5jAyZHEXm76aiRVyXytE\nAWQFYwlQUxOqWJPhy+gvArgtqfqkyXNPvDWq80btgsao6R25E7he36T2sCV0\nTc9HcUYzsuqTKgZnJ+T67S7vj45vv3xKE086fDAN8QTfd9Z5fpLGlN8hR3KT\nlN38OR0f1thkQzY9QFdrGK/b9cWPWc7u8RFYx5hWgg5bEKTFQBavfxS7ZVIL\naxSIk8RfzuIh0PsU21nsCcyjx7RmTNiEYIhbe+RPswWGuEZfQ38OD2rkCVgZ\nq/7k\r\n=EVRn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"86f8c330232a780330ce850eb7d08138b6f4eb4b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.35","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.35","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.35","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.35","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.35","@storybook/components":"6.0.0-alpha.35","@storybook/core-events":"6.0.0-alpha.35","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.35_1586967325058_0.43537984527111195","host":"s3://npm-registry-packages"}},"6.0.0-alpha.36":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.36","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.36","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d57b637c79abf4250e4cc06cd5fba2d68760c8c8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.36.tgz","fileCount":90,"integrity":"sha512-yilv7bJCnS0DrnH+naN0iNDi0E+MkRuNKc1Fcw5NqCnP5ZcwTQcKZ8Uoz08i2Pwkczzruyv1ww92Hy0W0U+pnA==","signatures":[{"sig":"MEYCIQCa5diPJKC1TD8ks86lfEVoR9SRkQLyBrQk0vGVZPEeOQIhAMaNfqlaNAqgzH9OT9pKaZRI0ymaAyxtmJm0neGmefof","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel6k+CRA9TVsSAnZWagAABAYP/A7A3Wi+5K/ZlEUyIuEt\nxqKJUeeFeQb2dT8vofM2e6eG09WOqy4tSpys1psQHYLt6Ibe7fJaqKstXAGp\nJA4O0yDtE8jfK0fuiEHblCt71k12TRVv+ozAgK83DfS5XXCOM7u85Ps+7kMe\nU5S4lncMu8cYUaqL8H/hyODPxM6EizbUsOARxX34fy7KUaHPTPSXqjk7/ihg\nbUJ5UdYrFKXdWxaRdXB9/voLB8xDFApNVoyyN5laF62nM+pR7S8acDaFMnF3\nuG1jNTDQSmYJhBCewsqWIyGQMhNkR774JGAQ6uRBU1E89u9uP8/CZ1gPRJLt\ndT7A/qRSguhj+tRy3L94TKZnAqq3nTEj6ME0X4ZBzcGBS38aQxWLDPc0YssD\n65v0/SRBHVZ/9xwBBs5UC4kGxJa9FCSJ0SabMmPjQnaHfDo2wK3194mHyVWa\nY/8+TIbJ+L0KDj4H8xOANsge/o2QES7LRQ6OmB/0kssRrfwDQIcVcV5RPsZE\n9LBtQtx+UDiOOcX6Hpf1oIVV5mfkgDSNtVdyH6Kk8gXBl7Bzfk+muULgBE5k\nOttcRBDm96lvxOuCeO6zZ6Aj2PF4njdccYbmWoqZ1z/tWIUtkPZX/cMc+L56\ny3KB6oXgA0XGGmZqdyEppLStVs/2FdlbFrwmnzWBm6/MwTeY+NuuGFE9c1+S\nVeCK\r\n=BOlb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"bd058f88d4fd8fe3922bf7cdccc4e94c77e109c3","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.36","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.36","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.36","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.36","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.36","@storybook/components":"6.0.0-alpha.36","@storybook/core-events":"6.0.0-alpha.36","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.36_1586997565800_0.2861512102231958","host":"s3://npm-registry-packages"}},"6.0.0-alpha.37":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.37","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.37","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1c588a5daf397edbd5c1acaeb1d18f7a10960aeb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.37.tgz","fileCount":90,"integrity":"sha512-AQdfjoy0UxSosXQ9L2C+QNkgOffLulvfeFvj5pxhHPc2iSWXYf6B25Qw9dHNLkkJadg6rLMOwJoWRzLK2Pjuew==","signatures":[{"sig":"MEUCIEUzBP6LxynFvbcqeNGkfH8XnxAS+wjWGCpqTyPzs6MrAiEAgCm4HBjYsY/NqmkHnQqPtYFkuqgdKPIzD26BguzNvwE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKkeCRA9TVsSAnZWagAAoKkP/jqpxpI0k/6KMuivkDX1\nrqUPrZHOPqsgUTpYSvQEnkVWnLFuImrBWZhy6UPiCSrnQgOjLno4yC7lTUja\njyZyUBN3LFD5gnwHaJriZd5DSFa5hQWYYfPAaCBcRMraGLikMKS6USJy2ccE\n4gownvB+Ta5rZF8BbHI+TclvOOOuFDNPb3az2YXspFWsYKsY0Yitq+W8bINv\n0RjP+cjapvxv7noUa5Id6cccdnyZlAP5cVWUhZQ9Xd4ZEUKxQPvASPGxs7n3\nWXhrlsfChuXJM9Zs4vxZe2rj21JtgSVRmkVzCxyFhMhoIDGf5QdnoQNFGyn7\nXN5Ma1iSd/Zq7HpyN+obUc/3KczcSqN8JZgUP+RYr1ukdMHvHdehS881txjt\nnMe7X+VRoYHBLlcDmddxncsLbBNC4WY8lEE3WCMwzkGh1Fw7tgVSS4J6wuv3\nzU3zL6JenVt8rWreOufL7ISi/xPP8N49a7Iy9mblpbBpmI7F31z0cMjb2O06\nRWJHHgsVotSSxc5wR3yfIxLQ4NBZx9vYdg+aetmx8GakDiTyfXV+8um5slBB\nYQRAHUZBEZwmTePW3y/M9UqrBA/j9D1ajUMjnOPw/Upv6mX5sajc5Xb2z4fT\nFLbMcsENNptq/5QSuH6v48ZKaPqHYNc3KYhhs4hDiVia9188gSpoaed6A4Ie\nmoEm\r\n=X7nc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"6f5a305daeb6ca6427bd7ecfcd1d753cc0a82652","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.37","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.37","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.37","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.37","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.37","@storybook/components":"6.0.0-alpha.37","@storybook/core-events":"6.0.0-alpha.37","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.37_1587063069957_0.586350706818116","host":"s3://npm-registry-packages"}},"6.0.0-alpha.39":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.39","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.39","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f1ef2a8a4670a11162d2844fc5c528eee57e99e8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.39.tgz","fileCount":90,"integrity":"sha512-RppuFsxbMgqROFhTiBZ1guhqQJ9bwJAzSqPWE0qdeW+pgVf8TYDeRordIySSLXCLnXmXQx0i1+2wexPGBl7wTw==","signatures":[{"sig":"MEUCIHtHxQ/1J3NsayIN1H3avdQ24BSspluYdBG3Kmv7tJEdAiEA2PWDzK+mNPzSm1fmUDySzWCphA90ux4A2jnlyv1m9jw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemuikCRA9TVsSAnZWagAAx20P/0Tok4DzVP2QlGX8StTA\nfVE4o/X80txmrxTouBw+kmvt+8nKY5Mp4g5GLzvkrz52jh52CnNELKWQASiU\nB418aqsakJV5o8EPX37he58ErExLaPTavRnvYnmLJmVVBCP+1NNgNcjXEfvB\nBp1Mf/8lretl/aAmL2CTQSs/NdOvcjpwQCvqX93TZo9Pv2mcxgK5F4scEd9f\n3P5FPxC8/ze/BEPrfVcQkaIcuQym+AGoIiJzjRsxBYD4yH8V7vqNtGz6QYlr\nKZdpWcFmSS/R7JFIp2T4isuu9pgD708whQyjFcAEPcUrrg3ojF0++lHVQY8M\nTDwobvh1crSu/QSXiTc/6hR4/RG8MolUrDv6J1xkt17qtbHaoKoxOoyGQz9h\nSK0pCLTqHQcEqxyx93mGx5JSlr4uWV9lNsctoQDlkrmfG77hM6qISUO6fGJn\nljq2V2Qm5tkhNPBeRCAzSVLgWgWeEIp6u6rN+x5AVsgdg1pzZX6GiJ5rG1tq\nMjCFck7+5zpZou3Er2SQvp/KAV55KALGFEjuL4/Aw4IrxWPpF5V0F5B9pfas\nieg7BgXzgqxaBXiuMW7TKDuHdmBwP9EM+SBEptBEnOsbqmwLX5t04fw7Hgnv\nY0K/Hgo6pK5zaDgCSDTYXkW5UKv8MZH26M62/KQnIyZ3q/wOG8mw5uj5bTyj\n/tn/\r\n=blO6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"fcc28a248565a08fbfaebd2b7468aa2f081993d0","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.39","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.39","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.39","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.39","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.39","@storybook/components":"6.0.0-alpha.39","@storybook/core-events":"6.0.0-alpha.39","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.39_1587210403621_0.22047612530433747","host":"s3://npm-registry-packages"}},"6.0.0-alpha.40":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.40","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.40","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"67c91aa47e384d5da54fe18dc3963f68c135b1dc","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.40.tgz","fileCount":90,"integrity":"sha512-Z4szw+1nWOBa4hlNBvfH1eAwV6y11VhhDtSGRRjgWJCTkAWr/WI2Ua5/y9SGIwBNtq7e3x45B9rB6yzZUk5yFQ==","signatures":[{"sig":"MEYCIQCnp2hbJZixLp/oyrcoWvFmdWn4cNxxJ0AgsgZe0NcIjgIhAPYvvKx2K65aCU/rLCRfcbZYebx1Jy2pNaW3UsZtqyQF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenVsXCRA9TVsSAnZWagAAdh8P/RNLLG65DK2j4jbN5bmM\nmYhYvOHm2MGEEdgkHfrl+O0/zOGvYQwwOuuQqwrfk+rqhQj11MxY8ZEPEuRA\nuXDHCKUGSAfScOsfEmwDY5h2oL9gBFXpo/iQJ1qIF3srZEkg38nHhs6serdp\ndLQJDMSmUae4u3olLnC03LXv+ooR0cNWdRySeBZLyLfuCuXZ76dCK6C3OTto\nLSOnR11UCP3+MsSUbrn/xprnoCc8ie0AMAa4idWnBL/N268UOyQWriezvkAP\nYaBvLj/TyfwpDgstQgu8JUvKRDfGvFKALc1ZWOLxbT/RHhkMsGNSWq0230zv\nym/7mpMYaVHahOscsQ20yps0Tl2OfO33RK7Yl6XRc5SpQ0a4cPwTrQgEFTzY\n/PtKAj+yRmbHFZHcRyhc1v3Io+JD7TAabcm8uXdLMoOVp6fsE87v//FGOrR8\nQDiJhxqd3NxMv8owGVKf0/9C2Tj5z1HDjJs7BFYH2SA+VVDePczEQ8cAfBtT\n3ibMdY4JOB/Cjlrs8ehSPZ9qe2eE9xBTK9Pn1Y4U94AKewOTbdGV6goLLkis\nl8fLBe6y1FxHkBsBSxQkhGCqaSVxfsqLcvorQfHTNziuHUUvyo2fsC4wZ+WC\nxhB+0opDm3M0tjZ9uUODVIzTLToGeY0tFVn2mRgPwe+CJzCaCNQ4Jo+ob3c7\nkrSV\r\n=H8o5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"75c02952b4efa341d3b194872d333e46e6501df6","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.40","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.40","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.40","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.40","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.40","@storybook/components":"6.0.0-alpha.40","@storybook/core-events":"6.0.0-alpha.40","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.40_1587370775078_0.44669262207351235","host":"s3://npm-registry-packages"}},"6.0.0-alpha.41":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.41","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.41","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ba63e8085ba018c5950d8eff1f13ad5897ef2105","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.41.tgz","fileCount":90,"integrity":"sha512-roj4PpK0CHACuJuWbsKsIdd8ZKTv7/T9zO6QOhj8UElOus02VL8cC2osSttOWi2xPCy1iQhVBWL0cMbj/0xvJA==","signatures":[{"sig":"MEQCIBiFGS2MLjCW42mD9XWH39ifwwDs1WXuFzHzbgBW/+HDAiA25fKycT26dvjPeEYSgTwVsGvqVuueBbJ8owoeS1kvEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeni4OCRA9TVsSAnZWagAA7wIP/iLnv+4MBe/e2EgespeP\nyYcI8ljYHC7sC6ZdYY9SY5G7GHLwqhdgIWfEgAt1IlewJ5yk5qbuulcpt2Pd\nYe/JCcddd20SDyPgn0Rkdu5DRXtcZc8VrvJtlJXJFuQQlftXFvnrLbhKylC4\n8fk6J6hQbr9k/UP7T4m3W25eR0KX0swUT3AW4+FS6+EAatxjAZsnoihB75DH\nIyJagpp6r1me6UHTGWPYXZO+RyRcora7rcEuLAVc9k6ijXdzn/SEJFCM48Qj\nvheM3pg0jv2yLHPrzPRNne+x7FL4yGgAT3W/D9xiFYTFv8WSLjyDkZhwcQyg\nvCnGhrSwMpXl6v/phJR6UBE5RWB/RoPpz1mUZ32JM3Wui+nOgJaqEFAC/Nf2\nPzlDc3RoYCU9Az51wvXVdZKNCY9f8Pl9/vkkhfbaP8PZfCzlE0QSZoEzJ3Zv\n91jzd9PrZ3d9eFentlpcQbvXrgmTo/e2BkA61jo0mTb27e5lMvbhrFrZsn/a\n/YkLI7hnZupYuNNlIEForaQ5q3d+87RkGQebG2bjqbwyTpS2LB3+kPtpD1TE\nELu2DmoBGaOO6PvY664sEV8icjQce982JrYPTYGCxNMIJO0IQCBPKVVIiOjS\nL45rY+vsK18kqivWBv6dJlZv+PxFYFIGJEEqRSp2/cYIrNRPnhLuhu4bIt+N\n4u+Y\r\n=9ofB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"869f451558ae18e045779d7a8d88caff25f1e659","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.41","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.41","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.41","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.41","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.41","@storybook/components":"6.0.0-alpha.41","@storybook/core-events":"6.0.0-alpha.41","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.41_1587424781533_0.8773178721273831","host":"s3://npm-registry-packages"}},"6.0.0-alpha.42":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.42","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.42","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"fe93c7de1a8e606368b281c8b1e45aad0a212681","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.42.tgz","fileCount":90,"integrity":"sha512-TW0Js7sd89owh8egvClZT6TuiYnu2hrXdDl3juEbZpaOIk8OpJ8UxH+3h/dybEkqtPwrVDthawojU8HOCwRZRw==","signatures":[{"sig":"MEUCIC66VvQGkQDwm/73zeRxojLDDP1z+NIodYREBla0ARp6AiEApQQ2vCyP6cn/BEnTkGpo60pK8p4giSZnz5efsAlC9IM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoN9dCRA9TVsSAnZWagAAJ1YP/31xg8Ex1b6dUnIH2yLG\ncsdmeH/2d+FTk+CqdvJc50GnQLw32T0UmzkFZvJ8e8gm7CAKgh+5iRyF0R1a\nMBlcvNMia/07UyKKVL0mk2YMyH0kl+ENbvPa3J63lujLiJx3dZpqH3ul8LEL\niI2vxzFGkcUzL/iH6gkWJSBEWAdUvMFcq6/g6j4yDjkvlAlWbr2y3BTMdUVn\ndhGV4k6cfwlwTUzZHpQptujGuEXFuJgNWAY0zJA6vTwIsy6NvraqgtSeg2GT\noAyMs/QrHptO6Zog5TVmcPyJazlKVC7TkZS4qZeKrHaCUd1OeR/yQKnzNN8p\ntJ4z+VbFMAvSqItrWqyroXGc4ZuoAOij3dQbJG/hmNVFNsVFYmsEFYLbbfa7\ncuF8PwGWRx7qbaxyXHEwODJDS7ZlkCl2vQj46dhpdLUC70umJm8LOzjVUU5E\n3trAiDAoG76vk8swpGwGxCbD2mG6umkIHUmW/0CnGCORT+mxNl7Ch740XATy\ns4GUMpxi2CL/tEMx/MSaZQ19XEZoFxkrEfWPT8F/4wN3BPv6bHIjgVmaypcU\nvmfmFR7a5HgIiieiorRx4igL3YsDeTSIU7wBDi28r03PHg4ItKH/P+zyYnjL\n3945AenQ17SLoJSV0Eqp4rM51qrvrYxtnINetBR4oOazPVM8ByYAg1WrxpeY\nu+MU\r\n=aP4f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"aa2ceda3380633b57977c970d264a6199000de80","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.42","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.42","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.42","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.42","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.42","@storybook/components":"6.0.0-alpha.42","@storybook/core-events":"6.0.0-alpha.42","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.42_1587601245484_0.08195893384497377","host":"s3://npm-registry-packages"}},"6.0.0-alpha.43":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.43","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.43","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6616ad5d3905432b4ee8f73bba79d55b066d9d3c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.43.tgz","fileCount":90,"integrity":"sha512-/TvxlLqqTKrIJlZPdLrFhGkX9znoEDz29xysRRzsDv1ih146RJA+VLJTjdpGA3ILYFFewnQFH+2MXrXZdXTgOA==","signatures":[{"sig":"MEQCIC7AikziZZA3ZmlYSqwnEzzdp/IQSuBJe8ZJ5ow+YvitAiB+zaf80+Nh3H6EibbvtbxwpFY4yyEHoj2iWIWu0X2RFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoheQCRA9TVsSAnZWagAAgdkQAIIXzDEZFkRo+8zNdv3U\n8xw48fmK60mZJAGy5KH8FLbT1hWsVQMjKGBH2jvoswoGjIo+Ax7jj1j97tYv\ny27B6qqFhtiG58Lc//0CSI+dAasmFMvsrKciSMPO3Svcrlu2CCmU+4dYb/ie\n1p6oVMjZaRDVtTaH5QXOYSppbrV+eaB/dinevAMDg2JWWzeN0ceR3T3TqYLa\nvEdWZRM390IbJUT+Pa/KdLVwH/Z8BE3OzWzytdkKrUr8T9vi6Dck54YvViNH\n5R0byWH4u6EjoFJJt365DmKtBT7VVu26qTHYytOEtbI1GVGDwb1egmY0inVu\nuC/DwttLffAN8cjMD77tT0/zoJOFnzaWjpEznXeA2EUyOM5OI9E2MerN17XT\nihyMuWS9HGLXpmZDwE9n8PpIqD6/81uej14bRc/hjF5oP9oO/PBFXCdt2MrO\n/UKRtypl+NBvbIhw2STBHiJ+is2rj02nVp3LWUfiajM66+4UK3NXNATaQhO5\nAslKLoJKXOWDCMt4NIViv3dTEvrrnuw4bTo/3x9oEpCc3ocF61wsD6OdWO48\nWHMMIC9Y56QIuY9/F+WVFf6Kr9gXRWWvQuDVEGr40PjtuahePMJdLu7QmEfQ\nY8POz3n7melHfx0e7JOl0JMmhBpkEuatMBb23FwR+Y7lKSzNFhvjPwjhfKdn\nTmPn\r\n=7ifX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"c32b263d0307ad2092c0751740100fd834f07a3d","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"10.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.43","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.43","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.43","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.43","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.43","@storybook/components":"6.0.0-alpha.43","@storybook/core-events":"6.0.0-alpha.43","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.43_1587681167347_0.7555524404820111","host":"s3://npm-registry-packages"}},"6.0.0-alpha.44":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.44","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.44","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b3499834f3c06862f7dc3a488d0ab2768c724f57","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.44.tgz","fileCount":90,"integrity":"sha512-S8m4xVTO6kkJIsRtN4mHigP+aEKuT2S0RWOh8YTMjJaq7/p7mn2ZOyApZ4HnTBJyZrGX7D6M7ZmZ2upIjnCgOQ==","signatures":[{"sig":"MEQCIHPk8oX006oa2h0yZqWEdb+oHw8z/HpQuzxUsnbLAY5XAiABd893z1G7O+aIJutSF1kulS2zZ5Q1luZUp4ydLhYUMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeplxUCRA9TVsSAnZWagAAgusP/iaTnBBuTPzOVHlHongz\n5rvDxAPysRKksbwZo0CfNHtJB5LCa01p3A5k0s5Dhif38kuex4nAsgoXIFBd\nc21NHh0eel3jUhPMNhjPQdfSDPp7MdwNq3pIUlsz8Uiq2cnAoc8XDBaSqEQs\nmpr0vyGrXRhk8vrvECArhsxD8jpX3ck2j+zY7ddBoIL/kR3dE4+MIDD4hWm0\nj9f/YPLNVzHqXI7kGZHH+dMw11/62a4o6Memed4ZTrBfdVVb0mrGHmO/Y5S1\n+X3S3kLweU1o/U/C4XbaulkM3GXI9WT/XDwoj2LrxzW6QNxB4UvaoAPKsEsb\nbKShDYGnDpGjErY2+BcgWR4v0UuMw5MTLeh0Dpzks7Juz6Y83tgg+vY7G45c\nv4GQj6vZjYcGpcGL3lo5rtNg6vJdF6RZGMPqUWdowdCWufYnAhdWbPkk7QGZ\nP6ytsPr5n7rPC1qHfg8j0fClfkFwnEuYC8n+Ey0zNNWcBDuMJHgDb7OfsoNR\nmTM+LmT3UJFkgqlG3nkJRApFYeGcxVpzU0n49bHHLPM7v3xS2vee0wGjoHrp\novWqCkB5adnIp/5XPoVIFxiCfaQI2r4r6iGhyFosW4RKGqCqWGV5Vf6y4Lj1\na3PTa9Qw+pnV3Apkx+T6jeh7T58xf6ah0oas1TeH8MhdqrIrDbuNXQXTs1cY\nuyIt\r\n=s6cf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"af271cf5e328ae7ef3953e5b0b2378c6a829ec43","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.44","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.44","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.44","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.44","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.44","@storybook/components":"6.0.0-alpha.44","@storybook/core-events":"6.0.0-alpha.44","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.44_1587960916431_0.577462016561552","host":"s3://npm-registry-packages"}},"6.0.0-alpha.45":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.45","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.45","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"077c1b831f4a0ce64837438cf741dda83cf76926","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.45.tgz","fileCount":90,"integrity":"sha512-ABDvFOoKzlfMqACcOT/XuDgw2zfwoJ6Hm3Ss85tMNciF1wsRQ7gEFXW9i3R/2uOD7aluVRXoSNDTx4z9SYU2zA==","signatures":[{"sig":"MEUCIF5L3lIL2ClvFmnv46W+1Gxz04ipiSOPcSlmVnkHvpTPAiEA3nNZ5ev6kVpFH0DvBdr5K5IzfXWDsN7CUO5LtDcmk6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6QMCRA9TVsSAnZWagAAuq4QAKDNQbGIpwgTafMasjL/\nMxczI6EjOhUSKXbfkMdGtFalo+FndEZ0dbx7QsbPuDJYyS4siehqYzzYFU9l\n/Wen8ke3T3OIVAFeANKLnRA48fCiLHH2SZdI28g7zMsOQVTOG2oguisFyeRZ\n+PP/BuTJ+qc9ZFZ1moqpY7STU1Nn1Xaxb1tw8FKf+2FQObvQi3Ea8KfyCSdp\nAzOOQGph/pIBltR/0EVTKES6ivT7whcI4cfcqcg98yBTCs3EWIPOdQaWqLwB\nNeQfCh+EPmaYmTSGcLdVb/7Du0GH6FcHwTeLAJxna8z3AXFylPZXZc32xmbe\nKYNgQBYJpCC42WkcfO91anRI75yQIC8FmCzzeHxRowdekLf6PFfT2QyyS+Ge\nxd4DJm/6pmFAWaVzzYPZ2n4wF/QWqhnw3xP8tJfaeLAy0llpYcDPwlxgmRsW\nUZZd9mSDsLCFAiLCUSq9j5303wzOmrO0kpQUIHSbfmcBoKTLEvT6U5NCjqHj\nEswrp1wxPtsj/l1ZzGo6Hv1SZNW0q2lVfBYE23v8jTmBpNDezr4eJxLYT0+x\nYYh5Y8yxpMJSxfQlhTwTOEQ3CiA9/HHlI5xR+RPe5KJSJ9CZ2Im6RgMfz4zQ\nDFZkiDl9ZNCcpeOXUVt7fMmC8Vjv6Ah6DQamGLPFwlDyMn7CzA2pQf126qhS\nVn7i\r\n=C8VK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"5b26d301f3521cb41a63ba1d4ff1ae7680b7a104","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.45","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.45","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.45","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.45","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.45","@storybook/components":"6.0.0-alpha.45","@storybook/core-events":"6.0.0-alpha.45","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.45_1588044811981_0.4460540208503718","host":"s3://npm-registry-packages"}},"6.0.0-alpha.46":{"name":"@storybook/addon-knobs","version":"6.0.0-alpha.46","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-alpha.46","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ad98bfbbcf7a47ef39608b8c196fdfd59fe8ad3a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-alpha.46.tgz","fileCount":90,"integrity":"sha512-OFoVMK9FBNerrtpq3fS4nzsA5F0o2LsYriC09uHplcX6HkJTKphFw/znf5xFjgfleSJoxlbCluY0V1gFrl/Qng==","signatures":[{"sig":"MEUCIA14IvUrTYRiTF/drWXZyOsGgrjskSf4nvL8nbOLNCS8AiEApxCFlg6wQ+umcNTSS68MfUR9moI88WSm0nneGfb27h4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqUOOCRA9TVsSAnZWagAAz0AP/3mV+HRs7rYtl3A8kPP0\n6qI4+grk7PMF5YHKW6KcIiBUYgMIycY1TEZtCwg3DTgrXBuLgmKEhRFOUIA/\nyfeWyUFVQx5j4o9QZ+T6Oi3xkJd10fh4pbzv3KsJWObkVDjU1afzIaWim6pw\nTF/8n1ZA0auvZFkuxVTuFkQ8wjpm+GiilXyEGQ8+TS2szQP9NxUJD6/mu6YZ\nlRCzDpVs7sSFpoQk6PEJIY554r75ayLpzRXN2gPpHXYGSeN4ySmsLBd2lZEK\nXctmcxLyooU2S2dfOKNovs/RVaHXzF2SbYqI8l3AF0ruQYaBg4IUnbyXbpCU\nxgzxorLt2wz+K/jSoE26qJfE1Cwzuq33cyS9tSaNN9F/BKFhi3KhVQXnIwSb\nqmxmeO5DKzItZ293XcgR3qMDhzmQ+9UVLGVaZ1Ne0J8YJ8g2xr93E5bfpWOy\nD489N2ccwutEXUVcg+mMfVCVOhb8/R57SiUDrROyL1lMxS+7GJhgaVXXSsh+\n9BUGlkhQsgdyMLBoKEEMAflPn5n9vdtvxk30I4C1/Jm37b3aYLvY2t57eFgW\nru8ndu3hXmG63K3HVNmwiLibwqZMjHXJ7UIL2996BUHu37vFdlHrEJ3CLpBV\np15ZvuwsNrPQjyvxe8WDf6n15F6QjtefwI0WNHwYvC09q8EU0aXZnk2c82bQ\n0uax\r\n=NOdd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"bd4b167dcadf1670b3be24d06924d27afb4fb3fe","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-alpha.46","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-alpha.46","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-alpha.46","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-alpha.46","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-alpha.46","@storybook/components":"6.0.0-alpha.46","@storybook/core-events":"6.0.0-alpha.46","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-alpha.46_1588151182276_0.38860601666780203","host":"s3://npm-registry-packages"}},"6.0.0-beta.0":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b5c8d61a99ac30b1ba6ee946f667861fb7517b6d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.0.tgz","fileCount":90,"integrity":"sha512-MPXi+A+T7JlNgEhRoDH+GB0rhihKN0QJ4vEJmYOYsKhh5OLZy0mN8ROhswWQG38/TJPSrIFUXuuj69BXjorhgA==","signatures":[{"sig":"MEYCIQCWv5js8/esArD/PlTk9yGw0QO6Mxrf5z0TUXC6oq45FAIhAPlPfWrQKc4HMcLEuZD6G7D1/WbHnpIaQ/ezgxN5JlaL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqYKfCRA9TVsSAnZWagAAnScP/3nkCTvjCxNsCa/HFSMQ\nd+4zeMEK4tqZz4KIERLi1DhtbVMbO2JAv1yTEVaMFTudBoN4AOyKgI5X8HUO\nTx0oArn2LzhKnIFCD3Agg0W7px+WXOHoSFQOZOJC1Y5lKCbJYDYE5zhf6oiz\nzvsv7zD/k/NBC39oq5b+IIlsosegLsjHjgL2DJYk84YNWp9Pyhdtj4vjcuKU\nXkd+Cf5xShdDKLVCXDDW/j1ZDzwU9elKY12TLRfaV6i2aCBS5wxgjSB9JEp9\nkDAh+tbcEP7kag/25dNNS9wSY1OkddN+RGRSEPTdbS/YJvP8ksW20tFZeBkw\nKCEKLIqyuqUYH9zJepOvabfeCqULuk3hHvZ1C0yM9b9IZ9QIBcxVceVBZg7o\nymW2HLm4GG+MMatqSk7bnd5ULYBoWLgCz7BxmNqc7ADI2jar5JxS6aqnhbVI\nScD24+MUwUAcDziKnwUKmksvFtMrTWFo4jwsuoT5YFv/d0SMTK0m2v2Y3EMz\n0f4qtZfJjHmDYO77iAZ3TqH/krrKAexM/fjR+jnp2AYR0rIca5OnsTp+d5qB\n8zDa3Gm0bJdsOXpH8qOgJH2h3eRDC6hjs+v0bMOKBU6oaY2OPJernrOrURi6\nPW6J9HSen2rxcVXAgf9TG3KnSEDA94+XzUb7PmtHmDDqv2athJ9V44Aidegh\nQQZF\r\n=9li3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"93ccaba6071b0b9aa5988b97cac57096d7298181","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.0","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.0","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.0","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.0","@storybook/components":"6.0.0-beta.0","@storybook/core-events":"6.0.0-beta.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.1","@types/react-select":"^3.0.11","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.0_1588167326984_0.05436201934849083","host":"s3://npm-registry-packages"}},"6.0.0-beta.1":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4474b907131d0c7b6971f61c1a0eb649b8adb774","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.1.tgz","fileCount":90,"integrity":"sha512-r5alNxm18EMDTr7abILgSAVBg/dtF8qiyoc7QwddYoLDuR81zmAS8BIv+d0X5f1IhHrevyeDfYpwY/7oRLqskg==","signatures":[{"sig":"MEUCIQDqrp4pBebNzE+h7VHDVrj0SPX6xjFUUwYOeJMdnQvaNQIgM9hvP59O6A1tHV7oQm6cO3xKl9MoAtcvFky83mmuHzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerX6KCRA9TVsSAnZWagAAcwAP/2vx0w0YzA7GMVPUeR25\n06G27bKAl2ubOoWasCQrNUkBKrgPxjIFFLWr1yYVECueJtIa3XlPOIAexWvW\n9GhCxOYvSSP6ik7YC6kfCyeYQttGEh7cjCVwzSXaKnJ+EamLbM5R3OcRB87W\nhT2upHrfCOsyMemPUuopau9/HREUONgvDbZW9f31z63FehICFulNWJgnMov0\nTPph1edqu9la+5sfSjuw2ADR47vdwgElK2Z+wF9nVOK/+EIoie1krhsZdyGj\na61gKh3RRwfWZo+6ga5NPgl5RSG1rNan7YhkwRL3OcCK3KMGY+TCg2j3rJIs\nD+AF9oFCVv9Bu9EL19Y7CkYuRhs/7VeslVOsE/GutdiBxZc7G/kDQUcWyBEn\nbDQpZCcYbpyCklS/vvWsNMqQZwI3MmJsLXSEJsk5+YuC8OEJNk2IngQSabH/\n7AWwHV0v5Oo/Sj+FA96kcKfZbGbKOA3EeTH5b2kGj9QTX3lTALCFKgui31Pr\nvqilA+EW4hGd5A97TD/7anOHcf54Dose0PbVLyCK7EEe+wFFLGCmY9XUKCHj\nALGpp+dfX7pntkgsMGuhyBQ1TFb9R0Psw31meRYN0I9QqihrXX3Kx/DCh0UZ\n9zqbo7fRsap5nUY9x1OiZO7YzOfKemo3mg8x3Otz5sBmt8dVTSHJ/EXA6F0Q\nrNCy\r\n=CjH6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"e2bfc168c0d952b292d4a825ff392144e253622b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.1","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.1","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.1","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.1","@storybook/components":"6.0.0-beta.1","@storybook/core-events":"6.0.0-beta.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.1_1588428424511_0.7740756264487745","host":"s3://npm-registry-packages"}},"6.0.0-beta.2":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"39c517c2a59599e6118b0cfa5ee544b3ec9b02d3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.2.tgz","fileCount":90,"integrity":"sha512-QNKSDFT5zdn4cd8pS187oFQpBwKtGBjy1/JJPiSoyBtNbM/Hzi2BlfaDVbL4BG4JHP8npYmpeod94RRszKBlMA==","signatures":[{"sig":"MEYCIQCUWS4i/E8JOh2MvHBwSfRJmjOooGYtaUMbAL2LMOF91AIhAOhYG5kwv6pU1H3vZp6ZRdU0MUh1en6Mj1FsfY99GGfs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesAdkCRA9TVsSAnZWagAAx9UP/2sQrLqyRdAUq3IoJvi6\nEfglb5qPRjQ9mkUlfRdcCwBtaKbMSrTf5y+avFY+i8Hq2AeTbNAVzDV2zRTy\nO9pubGvH3XhOap2Fh7CBQl0hr+yxf/albfeOA3JMVujsC50F+GVeTrxwuvoh\nnKk7EOMl6KyUKex1lCAAJHYFh8nyWua5FW9ZfNIUtANlgNXHc+9v3wK6e9jp\n1CgkK8QGbGdF2NSNa88QjHVcbt9bSMyFzFvtwInv8u/yphu6OuJk+iarEg/k\nngqUOAU4qA2zcO5bius1TRYyvlhOU2cZI5cJma3A7ZCf2foNfWSe1oU+x5+k\n52sQEHCsEMoy0MiIRhZqG/y0fqIv1Lk1ZDDbAE1i6mnXEjeDr5W2x+grrLdz\nZ+UyaTTYTC3fyLpDbGSNV8mkrXyigt7/d6RsfcjBqaq8mNJzxOqsxYUjtfNf\nQ1b/ZbFBYdkv59lYHDiMV2bT6vjlRYE2j0RMZr/Xx4C+NQYLFz8sYtfHhngS\nlIWmlfWXsK9qKMgaSrnFi0DQ/NRyJF2eINN4l7svZjGGdt31cCFM9DP1U/Z7\nZpZ7vM/2LLQy7MnREdg5Ix1pVbpi9oUnZGHWdwzdVJmnSUzxLZKIqsvKXSEu\nnQGsiirKfxqCE8iHs9goeViUPZTv0g9b6z30g7LD+ZjdEB1Z+JDzUCVZ2c4e\nJ5v9\r\n=y/VN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"d77aad201848acfd9525b0bb5d5016cf45e74754","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.2","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.2","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.2","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.2","@storybook/components":"6.0.0-beta.2","@storybook/core-events":"6.0.0-beta.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.2_1588594531684_0.529273260006637","host":"s3://npm-registry-packages"}},"6.0.0-beta.3":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"613f430e769f74ef81bbc5b08cddb594deded79d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.3.tgz","fileCount":90,"integrity":"sha512-pdjeNhlyiiZdyv2cf1pkb61uMprqZlTuk5HEdX3zJw4KsSujFz5mYVNhOV/Uw1st2Hk9t7ukmsxfEv6VBQqeZA==","signatures":[{"sig":"MEUCIQDejYn6ruc+PTGRZT0XUNMUd0iUfb9uwfXSMEKw6IH6qAIgX54pD91g3ZwZOzA352uWbX+IL5PQegNKaRsWIZ+sJFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJes5VqCRA9TVsSAnZWagAAkzgQAJo2LM6MxX7OJPKFmXTk\npbWJ0P1WqznlUCZ/wgwKalksq5dmXjvUqWuoipKnuGgNW0LavHZjpkH+LHvY\nxITDvvudCYI3N/f6ybSa5CsegvAYN6vaA+bTZKr0XqZ8OQAepXmw+W+yUQ5N\naAO4VJjCJEwzHh8wvKBZmcFiZMawB+pVQVNxDMnnC/UdMbKAWuiNks6u3Sw7\n6Hf8QLG4t5ZKy9VFs72Wxpw58tf9g+YUYsXeaU70wuRRAYPOz0cKsislJgGa\nwI5tNq6O1pNt7CWyS7ixTqHU6FgvP00eT5gf4BYzxN4mWB9zw04cLPsSIe9r\nfeULt2WXDZsnVyodbHvO6Rd7IV8+ijSy15ssOdnYlZuGTmb3UhT+QsJkeZwU\nPdGiHXP0QL4TLGzJU8iLdPY1XnOgKPazRdVkETnUhTzpf4EpCRojF48BEPD6\nlG6un6vmCs2otW+gC1sFooNa1BcIzD116hZ/7A8zsI08hGFRh4DF6B1EvGqM\nTCgnUT2wsszqgbHrkwiZ66euWxdrA3CE4+E2gCAEMNxhSBHJ2hZYfClt33aM\ntsXB5TW2Rzbz4zog9Pm/Fg+vcaGwvI0cCEHzL8+7DPEPyWyHqBON6BTZGL6m\nhElas3tCiTzO54qZjNV+2VvuQPZUC3h8d3VR+BjIzqWx9l53Kd21x1luwd8C\nmW3d\r\n=ZpW1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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, 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, options, 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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"9881185a4ade28a9a2d79f7a39561d10a53a01af","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.3","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.3","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.3","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.3","@storybook/components":"6.0.0-beta.3","@storybook/core-events":"6.0.0-beta.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.3_1588827498000_0.8915572812356074","host":"s3://npm-registry-packages"}},"6.0.0-beta.4":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3dd89a463cddae3e4981731f130a3bc31c024406","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.4.tgz","fileCount":90,"integrity":"sha512-NSFhX80RJbgNBuAM8Uq0VRKqDANAey4g43Ahj25PJtdDeHDG/JKGlPn5eu+2CAyfGmuGaiUYizX0o0x+7Z87ZA==","signatures":[{"sig":"MEUCIAD3CGobIyOoei7UpFjIdl9OsAZix9y6514U6wu6uDaRAiEAp6d+EgvAzDNMsXITipog1qm+u0aqq0z+JwMde29/E5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetVl3CRA9TVsSAnZWagAAkigP/0tnEs3EUo+cmtZw7Gb/\np6rEOZEhkSAoYuLYpGa3A5EvkbZB4ER8EbcK4aJGeenMzl1i25XDXXhOlV4U\nC7zND9pJnz+Pgp2HYm/3PFWjCDEiAteA4WyqUhw0+QwM3s2pMzUVrjgqwK0Z\ni9Sd9cW8v4w60O1ctbJDhn3WPwYDqkLIYLc7SnaCo4wU970LFcSyw1IG5cO7\n9oG2qjACliTc8i5RLBBwdkFItFW9zbbt71vvL+YLhX4CmGSLR9ufg5GclgnF\nOO5QjTLp05ELjeMaueRUWYeYfJWKdD3TFThz2OXNJUP8ExPgfAI2lmryp9q9\nmjKSY8JvGoqT7JCbz4Sw20oSQmtxJZKi0W9czEteccby56qni8FyBW+R85bE\nisOQVUWvpaAH18H+yFKKHNjOKHg7pDZV75SlamGGOwT5EZ/NP9Js8XNaDjIU\nMuwVKYxIKRwz6YDcJGofv+zHfI04FMhA/gmnmqgK4E73y471WKGj+2iQHVwz\nHfTmBGxGFugzDcJz/54B//wqG+rdVTazBCh/jdDkxMhrfjEAPDrEiBpO/emF\n7wmMDKWZMzS3G+KfTwRnSbiRPfhneSy0VMZpqayKRJP0TLAsuCrl4GQCuMwi\nvvPrtPfbQsc0Ee4n2xPoHe/NCABpww6XEXnzaMlj04CvUM/39GxldkEzCE4z\npByN\r\n=qPiN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"0e4076e643e32f690bf9228a0430faa0603e75c8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.4","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.4","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.4","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.4","@storybook/components":"6.0.0-beta.4","@storybook/core-events":"6.0.0-beta.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.4_1588943223275_0.6774046062106436","host":"s3://npm-registry-packages"}},"6.0.0-beta.5":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a28758d5d59ea5f9e0c90e0ea355620eaceec56a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.5.tgz","fileCount":90,"integrity":"sha512-7oU66svGwMUpyLWzAz8Nbu8zvufkmyLjsR8UVRz0X7FBMX4RtnjgH9Q40V0oIIlz8dGPDljUFnCofwkKyBmfgg==","signatures":[{"sig":"MEQCIBto0p1ZG95+QBH9haEh/bhKa5antaw6DEvVs2hZgMKGAiAEuKf7uRr8BiOBumBVskSRtLqCn+zXy8Po2xMyHvKtCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuROyCRA9TVsSAnZWagAAg9IP/3s5Tq8cBq6KjBUgUtIa\n4Neg5EL34LERLyOpQxXa13G7auzYw19pGsD54FADGaczUxFe7CgYHafOCMA0\nyjBmdpdpQB5plJpSUNli27Axe2cc//LHT/E7Urv8sGtCxw+/Z07OWbU27cT3\nxdren1fAqZzCPVEP02QMf3UDN3rpQQ9URV3Ep1F0MXl0BD8nhvjHsuZju6Sr\njDQNdzBN6Z2SNZ70KUlp1HSHlRLKYyg2fM4wfIVZE2qFrrecswq9HvAh6El4\npkNmwSyI2ac4RwXZGBLrjRCqp0/9LKgc1rFMFchOXbWiRpk/uTSYFJ9Xu0W8\nfvpeDFtBANss/noL5pkQCQNt1P/NcjvSsp8Lr/6CN8B1n0opP8t0h8m2y25q\nXxwYnBEnr6xAb484Fw51HWFfRGC2N/uLwMFK1kBHQnufKcZ8mVZ3FMhE2cU8\n1EbPZM1TZmqb8BRjplP4kRvOku4Ohr1jQmyFaKvjSSWFphQWmF85L+CpDLbb\nEVXcggMKnrh7eC/vY0qDeivJ/xLpqWz2VYcMq9QHfpXAvafUFbPNfgkR2pJD\nez8vALErk/dLqhQ4XP4RgsfUYEcRF1YPldUy7/RJiw0S4vt0CY53nOGFR+Jm\nkm+Xl9n5jn7yIuLH5a2Euz/6DQlRjhdksDM1rr7x4tyTOzNsa8Ly1pedyatW\nQj38\r\n=dCY/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"5827cff7eb9d91938ac945d2cc33c46c070f8e51","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.5","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.5","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.5","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.5","@storybook/components":"6.0.0-beta.5","@storybook/core-events":"6.0.0-beta.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.5_1589187506343_0.2693679473379793","host":"s3://npm-registry-packages"}},"6.0.0-beta.6":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c501f99e8c8a3722e3209d92b42049c5447bc770","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.6.tgz","fileCount":90,"integrity":"sha512-s/KkNepn32vFCsQluY2G836o91sS3dTSjjGCwFaAjrtewTMoe2GF/NnRTWJFGQAuybe7elsvWv+TAmaLER0GWQ==","signatures":[{"sig":"MEUCIQC5qYvRJvBHTVR8wfwNCLIPtMxJcmPhWnAewQJdOJLXJAIgGkavlhVsE04ma0t0/ktGVgGtRNsx8criwtdEYISphQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuqRsCRA9TVsSAnZWagAAK9kP/RrfS9tdySmxSwJRdfEc\nl8DET/qF6L9stNJ7wX9W/O532DTi5TTaE/shTEGxjQ6ocekXb6z+KwHbScLX\nBNz5cUCTfVsNFsFWBDeDkklQ4Kmi8iqXMDQ1r8s3bK1Hvexr1YJFXlTcv5OJ\nG+B1XK9DmFZTZl88YwspH0ZSd8U7gP9/VKzi1wHg+0QXQR6qhCA3ZtuTUuyV\nx00UfNbGEetSA9zQEDuqLPHVFf6zcv3Gav52LKIdCpkqw0FSOqG6LofijzUd\n7WAdqMEyWv3kVWMSe6YfPmE/RD/wtfGUHZ6SLBQwIGPiIJxsDrmBbGYXjuE3\nhJSsxsTID4GWw4gUpRuFVdRbJneb+Nu2E5l8PYmSaU27F9VRKUT0cTPTAHRq\nN34HRH3ts9Y3cRaY5nmmnkf0Mbj/bz0DW6qWXUOu+gxFbHpFd1l5RZ4m96B1\nHQc8Z8tLsfQGbQEHUA6XjS6/wMBuk7zIn1TXcYAG6NWtfbxEjlx+DU0gC0vy\nL5n6UwjU6wZJBVIqszs2aOs3cUea2jLiT3Kt7wT4Q2JqCqQIIxgHUAPYa80C\ndQ6zngak33cAcMkg9Xx0Nse1JUTJ68mWus2+7jAkfIsCFWVhOJk7NmV1Ss+0\npjKQFS8pbdlpoJZz3aCnNp99Ap5udy9SRLvCQ33hu1p3Zqyw06/j5NyEK1fb\ngmz8\r\n=Bzp/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"6f10ef5c93ee73047495a9e113fd013b82814f5a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.6","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.6","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.6","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.6","@storybook/components":"6.0.0-beta.6","@storybook/core-events":"6.0.0-beta.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.6_1589290092330_0.6997189301756868","host":"s3://npm-registry-packages"}},"6.0.0-beta.7":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"19ccad9e8b8a2f89504e646780aeb3a3769e7b57","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.7.tgz","fileCount":90,"integrity":"sha512-T4fQdx78YCZE2wUpNIWnOOLMw8BI8pnDoxzP6dqlnUVSFlTHFvM4NFM6j/TLD07peNJAFLtJuEd+jSGuIMa0SQ==","signatures":[{"sig":"MEYCIQCyWV5xE/L/DRoOTQw3Ll6Y84/sVRnL8P++tKc+R4XodQIhAKieBwFDFyztP+LZsaIp5DjaAQGlMzFUSMUwIU6gPKBd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevhevCRA9TVsSAnZWagAAh7wP/iKdIELEGic61HBux7qb\nNVstyXqYfIz34XBBMsWmkpJ3/5eiwppVmPHg5dZC0C61ruoUxRt3ZqYOVgbF\n+jZcGq5AZaFLcJPxlVnBPIWnt5h4d8wKH97tFVBth1VTQyXKoL4/6Ko8huJe\nkQlZAdoazH1SfQ6M/tUkPlSeMC5wt+SKDBK5n9uSDY0/u/z8kafJpdSKrg3F\nTsUvGEnbw6tmHYJjx2DrR/m/tIqMM5xZ7k6czojxVZ36OZTcN4nQ7KbGLHXI\nTeLc/M33GbbdXYbYbGhyV4elO6HUx3eHAeen+fKgr7hgWYbDY2SfbwCa2VCB\nwsjzDbSVgJqNhPk7fkNMW+WHeXaQhaNXYkFcDM6odj8JfUqmbTNLZKX2buda\nM3kcgMir0DCo+66/dgx7WWJIAL0QzgANKNKzSqYd6OEPebNiU+gMX+wXCcNV\nyjoVnKbN946rdqpfRxQJHr8fQQSnhWv35qOPeJTrrvap3eOvQ1jKFsU5ejUx\ninkF/8DUzhw0O19HaZhVl5neoKQavLLjUCdU+VH/H0gMX30k3mBlkWLHYiSh\ngsEDpbQ8h+cCQltq1B59iCUyxl3kJoJ+hI0KwdIeoZASjIaTR0H08xCRbWYg\na7az9o0XYYHR7glw6p0gPTSKhemszoyajL83l6YTke8ayHTs1/cy7alR5ldH\nbM5X\r\n=MRiR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"3cea5335d2fb34f0df39301344b934e8507a40a8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.7","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.7","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.7","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.7","@storybook/components":"6.0.0-beta.7","@storybook/core-events":"6.0.0-beta.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.7_1589516207351_0.7291296933647893","host":"s3://npm-registry-packages"}},"6.0.0-beta.8":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a78c591f72c34ce94b057f2a9c64b387e521e8fe","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.8.tgz","fileCount":90,"integrity":"sha512-4WCSnyaMFk79TG9M0RoDpHONsFfwHh9S7GQ2g+A65BWjn8Y1kGbaa/h5DPFGgcjucwGwo6sXFLyZCOysjWyFUg==","signatures":[{"sig":"MEQCIHk9OJZDLGCpWsjYoHOmX3mmIC4lpQpS1CPcXadtaH88AiBN01wzfVhXt390RGNBxXOAsruB6plvJyZ/ndvQu16K9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewRuWCRA9TVsSAnZWagAASr8P/AmOPiAlr14cTCuklmJv\nF0unZE0A1kddXrcO/Izh0cmwLe3wnV+rq6eu00rI8rva3w2eiy5v60Ts+sZt\n3yG7KHrrcb6HfxDjwEW/44A457VA/QegZJWKHjj/TZm8jsX8SxoxTLBE/T6+\neAtLTusSAi0yIkYTDpDBV3lJmyCExH0diSYEQuBTkdOXev/vdvYeM1pTeUSm\nCJaeiUdinOwqFFU2cp3Sd8PTKQwhogX89ceg79JYfSPByJtlmuBpO+DUf2Wi\nIAORmoC7un/oyEYDRGZ3XygOqxnvcQU48TcsxQVgqm36Pv3nljKL25Rb/lFW\nRIHbjtHZikUQKCOL3Yvp1/sAf6OYmhCFgBsEXS+HRNqxInu/QlPfqOUxQ2YI\neu0didRVs4owH8HNqbj9APvK+Fiu6zUk/b/8nLw5igBFU8RT2QbLv8skrmPd\nPw+FYjhoU6fpzd4hM4xmDzbyt9lbAZ/Qg09jQvAJtOebVFsVEp28cwtYWHx1\nUx99/STVJ2fC8CkMyCtG83uX8TsxCNsrVXw4KdTZcHfxXfmQsY6aMGv1rtYB\nMMUg5m824lHVf6Rh8xpKlLsTxmVcDqAeqrntMCnTzQgdRiGeU5Da/ciAlNqZ\nNEESz4z9K8DBZUIaxBphOFJHkPUuB/4Jy8dsfgSRxYJaPeNR9AqvjBY+raGN\nN7tl\r\n=3Hts\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"73d9b6fb3aa71e80d5844ccc75a122d23be70d4f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.8","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.8","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.8","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.8","@storybook/components":"6.0.0-beta.8","@storybook/core-events":"6.0.0-beta.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.8_1589713814164_0.3535039889191831","host":"s3://npm-registry-packages"}},"6.0.0-beta.9":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1f9d0962a38a5e78fad453b8766b08c036dfdd58","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.9.tgz","fileCount":90,"integrity":"sha512-U2cOTG5YC4clsgDuXxBwl3pF6x9szy88I43HJChH+Vtrp/5g65xsIa48zdjNb0MC1V/5u179xhbrKKixbZDxiw==","signatures":[{"sig":"MEYCIQC4rx/XgD5LvqDc7rp4GvZOpU31xwvM46b4s25oD68f+QIhAJM+fGg6TJ01f8Ss0mZnpjF2s/XYAJDX8ZSFIOHg1Szi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbxACRA9TVsSAnZWagAAk4cP/3o1xvKGxe2+0lFQeZL7\n1uC4DTfiufuP9gPPeUOzJQ/dEV7B2BpBeZ7vsyyTR/eusUFr+g17B79GAskC\nDe2JHfrm09fYshQ/94xM7FM22GMtnPY5JEgI4plqQOyYVy9G3uXluGvfsSWY\ng/TFvTpBMWcYjUUz+R9/c75X3r0Vmgs3Qn/jPjMxSAT2qmR2bFcqABMTiuZD\n+p6WIDOG4dycu92yq4fNa9H6udQUczpZKg/MvEfeTv1OSQAjM6XmpfET1w9o\ncNYkxLQA4CF2flBPt6x1CEMxBB6ujJXpZJF2124JDhaKtcgKNIN3LovxiPYK\n0RR4ZMUoLuEqUrW5idoO9+68kUeJ1XTIK4wbPza5xVg14AfT6tbMIW0yHXc1\nkMN6fmLsK2T1sl0cErMBxlCeJaGwB+3M8jQzong00iXSQ4qvp/dz/y7O9pZZ\n1uM/iFTGe95pYBYDQteSftSpkB3UcjfCXNU51JRSY/4SfzTFHWkH/gcAWi+0\nPMkr9U4CTXkIqSpaeb1I8EwVcOUgQ6yha5QS6gQu4Owsxk2H/A1Br7ssOJfd\n9Mn2VzIas6CqLL/F+0C77Di19pGKkxn6PJmU8ORUEbXHq3iwBO5yU5VaLRDt\n7eXJepTBvsGziypB4ndJgf4nvVQOSyKEwURgQOweINTAHIqJQ7zsCiovpeqe\n1eb/\r\n=LCL9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"a6d81914c259d8e3ca4d3cf598ae4866876dc761","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.9","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.9","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.9","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.9","@storybook/components":"6.0.0-beta.9","@storybook/core-events":"6.0.0-beta.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.9_1590017085507_0.19672015847617264","host":"s3://npm-registry-packages"}},"6.0.0-beta.11":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.11","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3e7fa970d77f6a1d1c19778801623989e88a3aa3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.11.tgz","fileCount":90,"integrity":"sha512-PJirLWqV4OYWiGMTFViTbogfLKt8Mi9X+F2o6/LvEUxfytz5QbfXqEU4X65Aei0WIaqEhAche9qnLzcCYHdSEA==","signatures":[{"sig":"MEUCIQDsVRI/rXcAHY94AyEZ64+nJ3BaS+AH/IzFo5v70GR8ggIgeX4nWLsmru2jTJIPKg+wMsQNq1oBHE19faDJjWqW1Fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexgSSCRA9TVsSAnZWagAA0KcP/0mcQgBPJLn4FBJQ1kRO\nXkxyjZwjsAIrvngevAFB6AZ9/OncFjiN6A27tqadiKxIffBqPmMq1EEcYBi3\nUtdiy7jqH/HDnhc/ifLpfNWcwPEN3LCmlgD6cMnOFffR9AT8ywhGxArqwah+\nuwwQOngmsh0Lrq/s59Wz0eG3Xr2xGzlJoV1xQqARf0Qkvam+y/MEuFabRlia\n60KrB0DCdIFFvaw9+M2O3KiYZLF20kJa8Nak09EumKvUGGN/47uqt1kMk3Q6\n2zbF6Omucmrjb1e10ucjXm4i1kmlJLun2B7LXNPotl295nnvy765C1bhQj4t\nlNUL9tiAAX7IW1hA5cs/lkIz8INRqSK581xzUx2k/Ks1Ab+OW4pAwh7ZIVIQ\ngoTh0VlqbP1O80NXWld/5DPzMnUxijGplexXOmvb6CFrW7xb+81Zbmkg2BSo\nM+KFv17YfzL/RqDPj2Gk3Q3DN2F6F2zmEy/kKF4q2Wvfwr4OxrJI2XzG9lzg\neVA+k7niC4Qmsv46EHoQyT3MZPc/EOTh7hkuw3rNA+gJWv34+2SBeH/fVoQY\nW+iOvqSqA93/m3uj3aPNDCKZZYZ4n2SKIZgNrJKbgeuIC4BEIynhoP7KiUhF\nWGUTc+ej0yaVZPAig1wKFJIMs+lLuy4ffOhnle2zXMjijlgMWY+Vmc7T8Wur\nn9pF\r\n=qJmd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"1e1ea949c7ff685e9fb52f025a59e4980bfcd0d9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.11","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.11","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.11","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.11","@storybook/components":"6.0.0-beta.11","@storybook/core-events":"6.0.0-beta.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.11_1590035601550_0.5876975628379901","host":"s3://npm-registry-packages"}},"6.0.0-beta.12":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.12","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"002d815fb78e5b67045f32068f3ae8f60c39d89e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.12.tgz","fileCount":90,"integrity":"sha512-Nd9BSXxmYsw9S/fg7hXjbzHBTLgKwCRBQXWVth/N8Ze+nuhja6hwZ2NmozyGiiuM39f2e+WhvCbek6+JjDaYQA==","signatures":[{"sig":"MEQCIC2JdJwky6q2xGNdoBOoIe2N8/6PSvr7JqWf3KkcS6eOAiBoWkmZLmqKtSIb6dyCisjhKVmE3tXCM44qtFgENxL04Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexho+CRA9TVsSAnZWagAAVooP/3qe2QGVRQyMsXHaug8D\nO0DoGij+M7nzPGK+UpCkdPiDsuJRpQgrnm56rPBBmW2KZGew7pdA5C3Y2o/8\nxKxLDd6hOJHOV4jQOWwe4UW0LE5mLnBuK7hRSA9lYzEd4ZBZ+Es2KvuI2/sG\n4e6ocSDmgJd7BMip2df5M6k9ODoP6k+Wsk2/2j2Ec4Qta106y9G4DAd+MEOc\n2/bXdHvbvk97UK14SjHUMX4zXruvss2FWqSbhNeCIqthxt5JbZ/0G4qFLGHS\nYfaG6bFnTraRYmt60mwdVz5vqVWpb/ZP9dXWzwMvR9UTXmWeEsvXY5WTU12V\nBXQ91NYXtS2GfEODGzZ/Sw2Vl1AlBD7HK/OSDhI2PoJ2XsDn6VSIQsKI0ApM\n4As/6WkF1AUnL4iRf1qOwyqTzh+vynaG21nZnBwo2xLLxCNGLB37g1SByx4A\nw/BXhd/klJv0erDQCbdYpBOd4AujXEjb5LlwKz3yunIuSvng+GIjEDBW53fR\nc7XzEpl4Ox8YnTnYlU/1WW2lnHPSXwg+Cx6Sg9lsm7d5cUin26nVzDqM9di3\nCBmmlEwUHlz/WcCuMu8widYs9CZYMV2NhQz0yqIQLVKpF0Va5kaXVtxrKoW1\nyIz6uTvPEb4hvRVbkpedT3JMLUCWPuUIXzpLYipmgM2JFy9XlOiCYtjLRJ/y\nSP+o\r\n=tEuk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"08aa7697738c32aff4dfadd76ae767559f0e974d","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.12","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.12","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.12","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.12","@storybook/components":"6.0.0-beta.12","@storybook/core-events":"6.0.0-beta.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.12_1590041149827_0.6060571934255736","host":"s3://npm-registry-packages"}},"6.0.0-beta.13":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.13","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4f7e78036dd761a5dfe7a1214704f044a594dd39","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.13.tgz","fileCount":90,"integrity":"sha512-5RM6yQY57w3TA2C8g6Ca8ZQesjkZ4fVRC4u7fxfGueeCAHxeDlwg59Sa/TvW6dgl63H+1kfdGOv9rB1Fl43ncg==","signatures":[{"sig":"MEYCIQCO4grKOH8IpS30qMxZWdHdUbEuN3aWkAAfQmIO9G/yNgIhAJwe9w+2soa4drqxEBXAuZcLqfgLMr1OqZZJC4/Ozih/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeyBZcCRA9TVsSAnZWagAAj5AP/2csCdNJM+US/WN1Eh6p\n9tmliGnNwIl4/eQdfAENFCIub3R9QRX+kc9n7Bh7WJZ+h0Nc7TYIpSzK0nSF\nuFgRW6EKgSaXSWTxiTLS8br6jL59thzJLtzH61D4Q4/fD7hr1CTn9/oRcjti\n2bx6NzHgNGow9Zi6OYvb8aiU2Ezvf4067BDq7NtyAa5KhcpnN7jqA6jP5/ag\nlsAKHUlAhLlsIcmn8x8508lpeGlixllmoViFfbaIOuUmJ9RrjIBtS/pu+D5c\nHjAZh6Uxw6hZ0HsGV+04SB29QWaQt6SIBtTpRdUvVGKMr/kZM/s8jc18TtzU\nAxAX83VhpyXBiuS7oeJLCwaMMTzaIXmLQrE+ts/ufc+UfRvH2sCAVXTcvH46\n4htVJtLhg/7Tei8hcJ79HgO9TUkhdidzdjB0Jc4qvlpjCpDQOKsFWMgnWFLt\nunI5hD1g0CQMtbFAQksC+sBoQzxfxbIKmTgCcY03hA0rw4Z9cKBESz+iesKk\n0wCoDMAmMTLiEsVUxhBqwjZNMVyugznFRUk785kyNMIfbUUg4OiLTpCO3Eue\n/oKTnzh5r0Zgq5dtkjGfUiKuIWXrL3ViwC5UYZpv8/OmwFs6GfigZejSBWs1\nndRgDXTZn13yBphJjmUXcR6UGwMA+fRZ2l19lDL2es2a4nYJig0bGWSVlG3F\nsW4B\r\n=AbeR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```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)}>\n    {text(\"Label\", \"Hello Storybook\")}\n  </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\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\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```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\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```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 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};\nconst groupId = 'GROUP-ID1';\n\nconst value = options(label, valuesObj, defaultValue, optionsObj, groupId);\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\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 = () => (\n  <div />\n);\ndefaultView.story = {\n  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\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\n","gitHead":"e9ba51794ee02048275694bf32f73a205b90ba9f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.13","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.13","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.13","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.13","@storybook/components":"6.0.0-beta.13","@storybook/core-events":"6.0.0-beta.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.13_1590171227669_0.005180870773898283","host":"s3://npm-registry-packages"}},"5.3.19":{"name":"@storybook/addon-knobs","version":"5.3.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.19","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b2483e401e2dca6390e1c0a81801130a0b515efb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.19.tgz","fileCount":98,"integrity":"sha512-e7z6KhvVOUGjygK4VL5Un1U3t0XG0jkb/BOHVWQMtH5dWNn3zofD3LrZZy24eAsyre/ej/LGo/BzwDSXkKLTog==","signatures":[{"sig":"MEUCIQDmprh3G4UI4MeqgUev4tgNK2fViQh74QBNJrj8We1+RwIgWfBRFxgnJKSYQKa7RqpP83K9xnMZhjnbHz3G6L0iZvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeyfbzCRA9TVsSAnZWagAAbDgP/RSgl9esIoYYNveuN7zu\ncTrHYoWUHhPXxjKnxQTUVwNogbJprd4klVsSWjTelHjnFBYYCgJk5SmBzUfx\nGoSUzZaiNz8gRYFO4H67mUybYemSQxu0lTnHQevUepO6q3f8n2z6W3lj5T2g\n5j7w42Kg2jsG0xxX2YsE+3Wppeqc9E5/wRpoODampvJbgODTmT/N7AisVJSA\nNvoVGKmqL80UWIGdJYS8bXaBBNkMxjQNYPGd25yXldkH/yluwcS1l73pXWx1\nH+5NGB1T+D4nokv1/Jsb9QFQkcF1iz88JNQ42B53Q6qSBw+l+7fd48/6kR7m\nhnbYJ0R0mi4g/HnrSsYVYp4u4AMJeNrOOHEDJL40RCeo68u2Q0bsRm0PAeZE\nfL/LPp/r48MbLoBqddk8sOfjngSoyMxNJxwQyTPKNR7YC1t/Vy1+3MYqcWFN\nCnpHkZt07tPpEyWhbK4axf1k70rhVsf1m48mOJ3BN+mTwbRDyiKhV9Ege4hE\nYpPGLQQTgF1ulq1sCkddNH9ANZ/Qbf7wKmFdO3GhS9mAZuab9VST612o7cxo\nBnTaEp/tk6qr6z5nR+R27gMB4+TtexyY3+/avvZVtkZwVqrIPnOVZnw3mPXt\n+tUuvnOfBH1+28xHflpAT4MX0+CRoUdD9Yx6ki0MZUMm3Akb3kwfix7WOSDi\nYXIA\r\n=4e1p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"e26136f29d99fdcec82a25689f0f7a10ef418fe1","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.19","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.19","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.19_1590294258904_0.8973915375412937","host":"s3://npm-registry-packages"}},"6.0.0-beta.14":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.14","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"affde36d85cf6e867a87a4a2f5324ef531c232e2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.14.tgz","fileCount":90,"integrity":"sha512-fjYPEW1hBs7HmRV6ws4AvRd5X/eQAwtWb6ns2USw5DOYULTqCUzCL4jrS/6MFIk24JtCzvNlCuESt5jss6In5Q==","signatures":[{"sig":"MEUCIQDe5oiAH+1ft73F4kkKJFbsn/IU8K5pdm01MiHFFbMDfgIgdwL8WuYjduTw/ifXyoUFuZIsoSq0n286eBVylIYddkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJey8taCRA9TVsSAnZWagAAGTAP/iOzktNQxB4UkXNgNBr8\n/IZTMTzAhz8TeBQPClR2Hp4kmLskrSDMBcPT2pqegGlfZNuZU+bi90vlHRwR\n/sHLwx+c+uwb/glL8buDEVwri0BBTY8+7dXEh3eBylpiTwZkeABnAlNeftno\nKhbsoq0dwUy7yyQtFlXNZ/FnfRFIo7s3TiTkrfeUYpxnEGJeyo0qG4UN/ssc\nNGGsXQpJZ+bOowVU9AlH6fthyRV3tFvjMuvzTV6lOJ2NGd6+/sBQdE2KoCMR\nkBhn/AdxtVEpOtGraR28ys+8EOPGzcnG7LdT0v0Xl66lN95yN7g5p4a28DS/\nKRTOYu44N8mwIGZOAKG+3GNnZVXp3v2mYknULmK7dh1SJdQK9U3LoITgQqFe\nr061UTVtLyoEQGcmwmTgOt6WufEc2h+qK7FWBRCjatea9FptNgUUwXsG89BZ\noiJAK+gnvJbTfKmAaZAAUmO7pMQ9u7BWQgxBLvF9uo2mxWm33s0zfwFRc8LU\nkV24AanoQfPWY0sk8OuNaQ6KY246xcd9bvSr6i0t0xFEeIicpVOwIB2tBaLG\nArJbDBwtmyvQ/AASB1CiyQUftudE0/JpqFbTbr6DpEleXC5v0kdd8tFjWsb2\n58AlVYPTTHC+lhWCOuHpIN+SF00/y36aHkDzmzCcIKbwALBFWDMSJy+9Df+W\na58w\r\n=QHHx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"852ebbcaa21d82876d41893b05b53277cb956cf6","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.14","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.14","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.14","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.14","@storybook/components":"6.0.0-beta.14","@storybook/core-events":"6.0.0-beta.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.14_1590414169916_0.009304902247118996","host":"s3://npm-registry-packages"}},"6.0.0-beta.15":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.15","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f164e27c06e05f221090dff636e2992d8cf7b5a4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.15.tgz","fileCount":90,"integrity":"sha512-2FeSavYc67EgIsHllM8TEvbd3eaI0n7RAlk5FhuRaxYv0HxGpND9FS2YKHh4URbe04dgWz3tSgRl1RPFfwyv8w==","signatures":[{"sig":"MEUCIEJbJHIe0yiOx3K63PsMclFvsT2x7ZFguzb41tANTCvIAiEA77VsfCUr+RRcDBqvPsQCPrYyPr7szqh/v1sNvmmGJBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaKnCRA9TVsSAnZWagAACekP/iUkD+yxB3/deUQNZFjL\nZH/JB95jA3xgI9gM+VD6sBIt3x7ivQOMcUifeZ7u19kXwSsozkiHfSCaxBQ+\nULnXmTMA4xqfG+veIU0+pI42jwc0AG0iHo4Il2FGKDC6Ayu/OX9PWA7rDKHb\nKT9CKwm+yJwjrMXRRuJ6GmG6z6TbTfCrYKYlz5WHpiWO2kG2vJ+YGhr3dRM1\nHDUh0odmJEW0jBOlOe4WfZYKzi/RbdHT0b1anUEHyMF30cWsthlixKV+VelQ\nTy5cqNbTvUVUOTDxx/J466OSkbBQknQdUX7x3klMdhs3oneqp6YBnl617KQF\nPKmLyr4C2DDkPC3hWnrLazxIvqy12ndqeunbr0nhuvciXxM4v9g+sbG60ywr\n3eyepD7RrZvKlGf72hu3JPANbmTbmr4OMny3YyuA7oAaw2lkVwWWp5gwrugH\nmCSwQdTs9oHn+C2qixRKdnry7n2YAjuHgelvz2Sc7rGvlYV8ubm+Ggrlwzeo\nCx3568CvTCbSPgT4o4q0n8JiDkWzjcxfeuXLkIV2jSWk+J6zbtrrCam0dG7F\nRq70GjXWQ7/LPRQ7+JDmTP7F+LBoGkOFvTrUylr7MvYTZcWtn3hGw9ICXGk+\ns+of0iLTvU3dvosk+TXlCFXBFP3FREDgq9LYOcavawhD119v3mrRCR6Ct13C\nQG/Z\r\n=iqC1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"d30c942994c7799d81be568b3efb6f2cbbf81a03","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.15","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.15","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.15","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.15","@storybook/components":"6.0.0-beta.15","@storybook/core-events":"6.0.0-beta.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.15_1590534822839_0.3704109241603115","host":"s3://npm-registry-packages"}},"6.0.0-beta.16":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.16","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.16","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"fdcb101a97fb0a42617b5b15b8e4ca328dcec559","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.16.tgz","fileCount":90,"integrity":"sha512-4eLEO1jvf/4+vDz5cNZrUEIMjN7MsbbBWPljyXT08m6ziw0dEv5kSfXiT8blMnsqU+WCEk/jjV/E0f18IBFIjw==","signatures":[{"sig":"MEUCIE7x7yZPAYn3jKlLJvIYcszFeBPHb+gGcsC1w34S6k1AAiEAmosYGouQtyqzLoZfk386+iMo74CmRVV9EEA/Qp6oICQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezpV4CRA9TVsSAnZWagAAdFsQAIIQCPupto5fuS7Oiarh\nodF5f/xX8YdIw7mt7p9i89c6p6Do9l3+D5hJqVtMpUxuYsxUUqzEVD/PAYJY\neHrs8FwjrPSYdqNgmCOpYFNtuUfBRVOoaB68A3MXUMY+Z/C1eVaUAyLwfQnF\nY8GKlmbYvMTojyypzStceJ6T0JvPkrxgARqp3pJRVhUPj/LPt1K30p+2STew\nZsVOV5I/yCfRXb+pdaQfPjMd2hHu0YrVrJxXTQasCKHQkFd40M/bHswk8zTB\nyyPT5rUNumdcZUyab7/QEU74+3TSJwrpbdgXmitxAho9Yr9VgAhXHTAjgwR5\nGukxZjSekO2M39pWFKzjRu3x9G01OvpvGwFfWSUIpL8PeMXjXHUBkEsE4WxK\nKmpMdYsCGmN/0XWqouwowLwVD4G2Q+FQ/Nr3hrUZHgMhEjRb5hxCGKIhxj02\nG+8hB2egyzVlgOdMEGNzX/WDSeHeUqvstCvylsABEYZFk8dNFWrULR1y4n8Y\n+WEs8eAQ4Grh6gMpartJdBW1eWy9nrgfDp5lA2wlfH19B047OQgfYesFQpBZ\nPFXfOwCYO8YuHshHLVtuqWZi+bIOyB27RwqGqQtg2nXH4unp3aicW3h/5OJ8\ntL9H6CviVC3UEfedzCzYTDf5fvsIhMEgXsg4rA5dZAP/FagyEyZ2S/6kTfKq\neqoQ\r\n=aqbB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"816eb0f104c7628ad8017448c3ffc4addeafde69","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.16","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.16","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.16","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.16","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.16","@storybook/components":"6.0.0-beta.16","@storybook/core-events":"6.0.0-beta.16","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.16_1590596983911_0.4666788043121399","host":"s3://npm-registry-packages"}},"6.0.0-beta.17":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.17","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6771127b4828914ac97f9efa8ea47d626872efd6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.17.tgz","fileCount":90,"integrity":"sha512-be3deKr410kmKUc+GVN6m4Y47cCjj4ns7/JWdx6U4kgHbOmvW898aA+t1SIJlDc0WxMr1Lunj2TL+pDpVAQKdg==","signatures":[{"sig":"MEQCIFwWH+FpAIDfuMPUHZeeNUne85+84eK6Cs7fBm8tC7LgAiAUYELgDgaBgvcMfYMNicVPUlqKwn2NXEt9qoCKj+ymqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJez0EkCRA9TVsSAnZWagAAcX8QAIj+NR/LlyGR2cTK1gdm\nXEjpz26upKW2TQY8EZFV8N6MKHwZSdGuKRQ1wdSgXtqx9Gqv3v3qSFmfr9sR\nyRWo710Rlt+nN6LsRIAGLHyyv+qu9XRe9zsXHGVyglLN8QcB4GHUz9sMN5jK\n/1/Frt9puHDCfqQq8ERd+WGNUXhyS8Z4Qj34cPrIYFcxWw5zH+z5dlinOOYs\nBgHLQE3eYTdnWZblMCvufCfRuZOtPq33f7QVN0lwEsHuZSe6na6tuPekO23J\n27FQJ0MZoO2kitL0W+hjFweF54Zy0a5rN4TDx78FnRdQBBJoWg/dVEGdauAC\n7sH1Q5Yq2HGHGz3GFEAoaYl8stI1C+mz75PtH+wYUVstiyMhYY+DOcVbxcfz\nTRcrO97r780WsT9MPcU8OiwXfbOgUsxEZRGFMq95qeNedTlY4KUiwtNYh2Hv\nCLUtynGPkYol+BgChJJj6WJTC66ShS1HGZlyI38YQfyvLPtbnJacaGTVQGAD\nm08XNaIGFG+paaNz3GX9e9Sh/L6HUO/34cBnS8Hh/nCmR/KdfQ0GDpgQEbi9\nHuEOjIEAlGEPawPkJzAF7mcxpg+a+/pQo46U/dsRn1amutPFZ0DqWWxp1iYv\nGwVCQErP6e/PgyIzL4HuG0Lmutfst2DIOF3l0thee6KzLQK4xN7qDS8/ru+Z\ndOMF\r\n=/JO7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"e6bdd474387078d379d09a04220ea948dd31c750","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.17","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.17","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.17","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.17","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.17","@storybook/components":"6.0.0-beta.17","@storybook/core-events":"6.0.0-beta.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.17_1590640932084_0.11559880553761293","host":"s3://npm-registry-packages"}},"6.0.0-beta.18":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.18","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"94138e9518819fad4ad1b26f50718dda09629d65","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.18.tgz","fileCount":90,"integrity":"sha512-AVsy37rWDx16tXx8uu6VXiLXmXjmKq5p4U0yYWLMUhAfKCqY7hA6C7TpGEeMjzyF3LrtUBSXbUjHzXklGmkI7Q==","signatures":[{"sig":"MEUCIQCZPpTFdhvQCiPfgym3ffQBWDpkVSpbjAP9FSG8tm6/nAIgOaUYQQOVObSXmm3l4yw9mYgzYcxlCq7bAYWo093TmM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0SQRCRA9TVsSAnZWagAA7xkP/32YXSPVa5HMB/9Fol7i\nJr2Mtx0fBR6G9IODhUZQ77Dcl69Gq9O5O3/p+hvOHNYpmXNXH/Kbj3g5xpll\nRC620ITxYgh5y3g/evgDQ3ajF2oNJVFrEQwg9a1JtmThBLb6JAGzk1wmPgEC\nCk4q6w4wu2GwOjOh/osyaM62AWxZTqNy5ohxYTz1LYqu4W5pVhLy9wvYuaKh\nJiXjeRanuqYmmqFBzOnZyDY1pgQvj9nV2gAztLwZEADmUMnKVRog786Hkt3O\neyAHqH30JpJcamFqJst1/jtuhcpex9UHt9tDkiR7As7rFTNMiCtRbp/mFbDm\nciKigefcCrAls3kklDbqACTPOaCb75eIi9ws2eNq7CV4yTi6gJJMwpPVexbu\nLgBz3eXNHs/Nboq12iL6wNBGh6XP7uwTGRwSYohs8I9PBucjw1ubBk8gljRx\n3zKgVqd4BrihlN9hmZs3WaYYYJuvsrKawKoB6cR207PDRAllRLyBjbXlB1DL\neVpGiDUKQNEy84FQeYHGTRbXr32eGMWX2O3ubFJIKK9BnvN/8C8cAoqpJcR1\nzadOcZKlT70K+fdLrZqjR5GQsJeSOsR5hlSTpCiT11Df6tCv9dT1Ql9cUJfy\n9/QmeevcsLXCEJj+IJO0e1EaCAZBgl6+RU9sxn9OjQpa3wCCVYTRlu+qIBV0\nCP4U\r\n=TaQV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"27f45503e901d8ea419e292547aae11d478effce","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.18","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.18","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.18","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.18","@storybook/components":"6.0.0-beta.18","@storybook/core-events":"6.0.0-beta.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.18_1590764561372_0.8725553232663918","host":"s3://npm-registry-packages"}},"6.0.0-beta.19":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.19","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"df0ea3e25788550b17f997fa6e7d63556488e330","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.19.tgz","fileCount":90,"integrity":"sha512-QCa9EqUH/oEZXPTAV7DUD0+NpGsds7rk9lj24QB+1YhFSBYO+jFUqETWDS/F1bzD+8278DRHemy+zlbBi3sBag==","signatures":[{"sig":"MEQCIGOwP67qend0DhxAfT6wPK7eeZGm7yHWo2Jm98CR+6cYAiBKA45d7c6TPs4PMaM+fP3TjePDvEjoy2tJoHNAJ7vxeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WRCCRA9TVsSAnZWagAAv2kP/1lu2qTw2HmiKJ7y5pql\n7ZhXmBg8nFcaI9TfOUJCzxhPc5N/Z6JKViQCh7xzgyBFU7y2F8If5cgIO0fq\n8M7tRwgjsA2Dx9NnKeqbj3GLGH38zU/pXTIxDXp7PPgv9mVtJGUegA509geo\nuTCRarRkkp7Bc0APxey468izjls1adyNKXCco+MeII/wjyTbRSVftMmE+VOP\nbXhTOQ5bBAUsU0lMEzBdEnxHAOt2WAO12SnqQd2jC8kYNNiMGp43aES8STPr\nkBsJ4XB2Sfa/eBrG1TVTJgHvrRNdPouyPa5xoRGZJSQLkeXVP04pdx42V+jj\nhdrjtd4baq8QuY2kgZgVFKXUjRl4Ovz3DE6sNMLa6fXAXVD1BjdZLuoB1vGB\neQ41tmKby0YEgrBtnAKJEhwpZQIDPKB6sbpi8fZy+bNYA7Rjwp3AAFHvFtT1\nXmlJkLPIsJzk3Zf6JpVQ/A5mvyBM5HRpddg48sQT2Wz7T3KXI7Zx4OV9uneq\nOCvLHjeZUCAAYdE0Wb2aCHATa+XxxXjL8qiCDQNiwkN8G3KcDXDo8dO/ZkEk\nwQ5z2RCS3+xLEyfPcja4x+/K1DrBvJhXuRm/ulNLB5LOMviEaeFs8DBQ1QGt\nrO/4au4jUrbpBbXiwyZukFOO5zRnoDhtDG0fniHfTTUYZhvxCf7udwN7vJZl\nzDy3\r\n=VGeU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"57f818f5e630c148ff26ef8caaec57f5d50b4174","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.19","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.19","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.19","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.19","@storybook/components":"6.0.0-beta.19","@storybook/core-events":"6.0.0-beta.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.19_1590780993497_0.5854339614569681","host":"s3://npm-registry-packages"}},"6.0.0-beta.20":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.20","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"173469a17b6e923e464029e9deccbf64ed43c507","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.20.tgz","fileCount":90,"integrity":"sha512-oGlas5lgCpuUPBa6XgVTIfkmf2An5g0jsTKEuZ1FVlJ1wCbWuPvu/adgTxtxIdVvgMtzD1BawfEoSgHveH1QzA==","signatures":[{"sig":"MEQCIDVL/G/tn5Rszi+dhZA9vTci4nCz3ulUD9Omd2++Te+JAiATToSbeik+nZeFmxYLu3N6ie8oAi+5BxZ6Z3YvCVdOKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Q0/CRA9TVsSAnZWagAAY8QP/3chKbbR1MqmYaNU52Rz\nZhYh1AikPXf4FH/wcR1zuqG5rJwX3n58HqJuaER0nc7DV0paY28wxVXUnpuE\nmyWrVt/QG/RSfdW6aXA/VN/XxU9QxVJ7GAFQMyZTnoKxs5L7NCJdG1ubE7Sp\naWor3DAK64oQtyJ6uJdfKC4wqAyVUXzPWNgFOxmsab4en/9QA3WOqPr0M2yt\nIig9SxLsRZ9wmJVwBd5FXYj6vz2zaPfDuNQiG6Xoa0KjTEGCNqiT64FomH+Q\nuAUVq9yo7OJl41E1eX73cLvU7OjJssRIevEzkGL7tjzRXbNZRMmyDkOLgrzt\nYatE7Q52jwc9/7syDRUWkNShJpAi4yzuO7I17m3spZULAD05nxb1caUKv+Nn\nEyY9KEhhglfFtKE/B217Ooxp2pYr2rXw35DqT/nnAtbwcM6MzAfdmkngHSD8\nTxefNoE5jFdkPDwL5Y//DK/w4/O+6MJjsq95cf72tsraeTiwllj+ALbo0NOx\nxkl6H0X7eYXFo9e/q8T8LOzeIcObXyh6fCWEgViFHzXtYaa1qBNy7iFeoiZd\njE4dVCVdZp4h1tcq+2Nh1H5vEub0ZMkfKl9gal9TDiDiYLU5ij0hEpZt46bh\nHcwm4nExWOe9eRqu/2J0IOJysxL+6ciCufaxFzwdQYSz41obvcmqz2FMvBg4\na75t\r\n=8Mc+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"f296d1cfa1c4d8a541df34c1c17af964f51c1b31","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.20","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.20","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.20","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.20","@storybook/components":"6.0.0-beta.20","@storybook/core-events":"6.0.0-beta.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.20_1591020863130_0.8907720242692729","host":"s3://npm-registry-packages"}},"6.0.0-beta.21":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.21","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c0798b5664542187d01938f9059cb894cf9779bf","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.21.tgz","fileCount":90,"integrity":"sha512-h15i1fbV1fNOtqymAozoVrjQK+xeYCu0I+qDI7i3F7phc1C3i6oR+YN2rerv6BdoNEQHVu7jGhzxBiPsTULTpQ==","signatures":[{"sig":"MEUCIEJLAUkDVOIWRxoAln8j39oS9KZocJNsxCbt1NJR9G07AiEA28orwaVnxCAoJ4y2+O8I3xZBcRu0eHJT+X0Z3fvR/y0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2EP7CRA9TVsSAnZWagAAWusP/0/yOiNhZhTjIcmm8m0g\nERVM0Gd66lEYnKiFuP6WfuuZr7SA5DBw0O4b8wfcSLbHfefUUTL44dBfPbLO\nx2FylVh0BZTjeAXLdKwv1c/zKpMEIgq5AJrI7/NbbHJFe3LU5PdbuZm7pdtx\nep9dOXefYy3uZYRkbZmmiR8xuoql+b/HguEenSoOXnr06fo5mEquhOUxOxg7\nxkDy0fADaMBdt50lx0N7/BfUSujhxpwdCglc4v/kMG1omxXvGmtVu+OXJyVt\njC/K3fsLFRQCtuYKPfOkZnRy8uh645PC/Ff/5rv6554OfBkO5Q2SA9XtRjbB\nfpZ0b+UEaoZpO5cSXsOjHD4uxm9YsJ6D0fQ/B7Wzym6EIgBWkj8NNFD2wS4J\ndGI18nGF4+usm1nvB1EQ9BkLzxzHraOF9GUi/SsHuPE5RMnx/dMWh/SNnmam\ntdKi7l6NKekX89HRrarChD7ndddQxNHPYAUjwPGuvRfoJ0EVpabaX07QuwtI\nk+Qu80pEyvcL/a3lG3YdLDLlJyFpjruX498c1/2eP3Wx2WZO/2Ee6ulBamAw\nqFKXUcEjZcavQT6W0pgESn0NUfqwTDKRTNRF98LnDiQNUS6tKBgbhM7ZgcyC\ndPyVZCa947nExYGzHNfX27by5twNkZMbzfWRDy7+ucmksDZ/jHpPsZzri3+A\nKtEg\r\n=HCOe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"93c1d0c10897faf6a357218f96673763c16e0f79","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.21.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.21","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.21","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.21","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.21","@storybook/components":"6.0.0-beta.21","@storybook/core-events":"6.0.0-beta.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.21_1591231483253_0.3305036889446229","host":"s3://npm-registry-packages"}},"6.0.0-beta.22":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.22","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"370645842adcddd1c34824245e2d946e65930803","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.22.tgz","fileCount":90,"integrity":"sha512-BTT5oZ1cAjXS+f1wClLVvc1I9SBgkYzws0HoZdWM/lmBvuTIaysIlA+EWjdvuccaV1JdrQQAKPYayfLNMvbgSA==","signatures":[{"sig":"MEUCIHiLPgIRIzfh2Gc4skOFN0/bEFhwi8bp0apVH7VltMD1AiEAx83L8m6B56b+wfftVfqypcdm8x6CExKvfbPeIH842OY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2pc2CRA9TVsSAnZWagAAH1sQAI7fliCVb+tLoR4pZY0b\nZI3N943Evyjx3usta3h/BnWkLpZy/gXZXIUgat33SVAriFAqILeiW9PNSaJ9\nms+J7XmL88+jwvEnS5SF3hhn4ThWHskyc46mpgeBEKmba9YRAmdEVuDT2NnC\nWAU715Cl7/7P0yxENoL5yag1RgavTmiY6Aj3cexiYClxRzNV8cn4x43PrHj0\nhtiTtAn7EKl9M//CgZDwg1cbKnitan6MZwZFnjI8tAmRrRZe3ckoxcnITfp9\nWE2sdSo3xZzy2814+zhQBKk8xLwJiHwr8D7BV/x5lwnpgQOAR2kCFaWUX0U4\nJEGZdME5Q84m5ivDpRaVaW+SAg2eMADZD4M58MQah2Djp2hQPwcr3i+TlngI\n+k+1cvqNlR6YRKVWtymPytu8VbS3WQGtYOipkTRruM9sr5LpUn09nbdSv1nW\nAN8HpWB8eWb10Lpye7TvCVGMRan4BCvVRG3ZauVW3ft9nc7Mtq0nkdPgsYIP\n5f3LeqaRAr3Gp9O4W/JL4pwemrXyaEPR/yRrmlCbjvAvlqinrsLxfbhIpiEe\nJnBpC2nu+AICyH2DijPmuGFtWpiIbeUmyE+8cKVR1sPLtNc0rtb62dmEvtCl\n4k3+Rr+ts3XGrnwPtWr3d8HMki2uSqwN4JJMP/RSSTNLaRbuHihphc4HYm31\ngHqN\r\n=RSOW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"ff3f44f3a19cc628dcca5e36829eddd38b69ec2c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.22","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.22","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.22","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.22","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.22","@storybook/components":"6.0.0-beta.22","@storybook/core-events":"6.0.0-beta.22","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.22_1591383861730_0.4722627741207204","host":"s3://npm-registry-packages"}},"6.0.0-beta.23":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.23","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.23","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6c09be3e1257041d0baf0ee71e291f9b23126bad","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.23.tgz","fileCount":90,"integrity":"sha512-hj+RhAAXKeA+mQQUwv5EcfsoDsXaqw3zH3XqyMHu9HvuzBZ7V34imOgd+ILAiperMwaUbA7uUGGqr+fglm/goQ==","signatures":[{"sig":"MEYCIQDomSdTLFWaBM9VuzIDvBYw+LL75SvVaqTd1yVOxOfIqwIhAPnZnI77PIyOP5AWHD+oaJta6Ro5DKk6WGyw6u/xExOh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3e4HCRA9TVsSAnZWagAA7hEP/j2Q7Ogi0qj1824QiNOl\nJCsC2tvy5u5+X/921FfWPs4dv4Yt7TqBbR85i6sx7k08/SLIoL5+Ehv5PHPn\np/rNZR4vkBK06GZeTOtMFt/oWPZX5BvfiQ5j18jrZmdEBzPMGqnQ9SxlhaRl\nEPsD2uGNNozVVFcf88c3E16E+6ixijySvv2ri996sCBD9Jrp8tIZArBH4pXp\nJLhnYmA8/AIe4fk+UoAzG4t4MDsX6/HR4KLcMaY3sPFoJzmNxUmUVNj6Q+il\nLnQPcZKK/hb4zN+6JSFehA3swrYLpHFJiga9EjmraNc+GdBZqrilYJoK8K3o\nU3mXir9eQLBOLKWb8mCPAFJR5wz85Tb0glIybN2Vx9he+W9FztfLGeuEfMQM\n/ug+KtKrYt8LKnQ6I1Mq9AdyjbV74Fkv2TP8vQrhKuZfku640CHR2Lmg6adS\nneeQT86PnL9Qi6a/NjTrZMx5zaGyDkD+Sk17nBJ6vg8FFt389GZNI0eke2Sf\nCYULnA3toA79Um2kLivNim3wWN8D4vBXX1AeIHUg5p8QZl5R+u2Px6qy9CW0\nJb+SEIXAuhIGplnUipJvqyXL1Ve5KDoeqD99pyIMdifqjU905ENWl1zualvB\n5wznndGWMDHDiIkjNvjYoy6QbO+ZOiBRFXwrvva4tCyceRdsBcHpTlDrUGcH\ngRmG\r\n=+BNs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"dc89aa17376526101c1c7a98ba27762f2decdf86","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.23","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.23","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.23","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.23","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.23","@storybook/components":"6.0.0-beta.23","@storybook/core-events":"6.0.0-beta.23","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.23_1591602694693_0.8112332462115439","host":"s3://npm-registry-packages"}},"6.0.0-beta.24":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.24","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.24","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"bafe9c5d97b820f4b536fcc6603b0aab6f5f9145","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.24.tgz","fileCount":93,"integrity":"sha512-xfhJ0jGQlt6Eisl2bXiJ/UzhJJbK9z9Rb2KlI5/yoGJqPMh6mzD+kqUmX3Fevwx0VqIGwI2tNZnZfUkRreeR5A==","signatures":[{"sig":"MEYCIQDpMcLdHs1A3Xczyve4HnDfUvg6tP9dejyGzpUb2jhF4AIhAOyh+VRabtXHrTj97o3FnDhSDLJG/1xcTAYozfrYWeHu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4iu1CRA9TVsSAnZWagAAh2QP/2/nlr4aUl/lVwNb2wev\ngfIcacjz/7w9xrqnjgQV78rrpBWuNTRIFCXDqRtb9HkZoev742q/3BJfHty4\n0qFA34hP7/f1PzjNBx5AmkiOStETFKVzEyMl6lCwnLXtW99qjh9VqF4KIwHT\nHINob0Tk+TnGtLB6d5N8JTig+IBP96lX8OTZRrSE5LdwciztLGt2X3RigRfb\nX8zllQxARP7mnyIhy9N4ZzI+Ryd2PPjzLP0z5gvOvsKLZquXd2g3KKAIPFfB\nyKnJWEtDOKq3LH8LwDkHh9ooGgjZ6vfKC6z684Wfdhbn1h8JTTMNqdCfzKd/\nMKVkN1Tlv6XJJAIZqX+bn57ltngTDLJ9y71VGqsz2i3XvoMBt0dUyyhoQFdg\nxTrF8BmdX6DUPMQXWGhbH/gANhJiK9btrpCWhCjbTtqjEDKBTJ5m+2xf70s6\n2RzNDQelMuj9NNTdgCggP/RQlmyXshUwcXEeQ39zk3nEe6JJQa/SFARrv5s0\nZuiogCRJGYA/vvFOe6NU2UmD3tjMwtg8/QnWKFMbnciXEqXX7OGFpcqz9Ekk\nqJwcBDkpPRh5vL62g9lZhdfsSTJrmMY4vIWDtReKenix5RlZGhK/WdgaAvCI\nacLzKuxm7xx92jiAa4mKK4n3ICuWHIh/+7JYqsNVhWUkjrGjbKlxdvJYbclq\nshaR\r\n=LxMB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"5ab2b41f23d8ed466e53d307eb8ae00d7f319198","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.24","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.24","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.24","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.24","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.24","@storybook/components":"6.0.0-beta.24","@storybook/core-events":"6.0.0-beta.24","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.24_1591880629274_0.8533292210880881","host":"s3://npm-registry-packages"}},"6.0.0-beta.25":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.25","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.25","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"5ca97631549a42de30bd1aa2c1e15cb97449b220","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.25.tgz","fileCount":93,"integrity":"sha512-lT6TzsHbBS2vM0RYkldlgQCjtxsa6JncbET90gM1iYGKCajxSArzrF9j60TDuWFBViwPfuBk718OsFisWD77Qw==","signatures":[{"sig":"MEUCIHwL7Dv/gFUpEyKg5AKd3kYR9Y8aZuK+mWvvKo9Ygjo8AiEAjs/zUbyVpWnd0UT5IuBLfKKtHL8UifXMEQu8RDqYjkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4jDTCRA9TVsSAnZWagAA7aEP/0QWL29FgGnJ3hu2SBZw\nOWebaDxZ8zFpPjE15FQjNT0zJgAdeP4G7ArAy9lT2xg3nyDUROnZuEihzecU\nGW49G1jdFE2U6xUlEKkfnQNlr2z4T6ngzdbcriJnfF2WVlUNpnG91QFcpy3i\nQqLRUqvBGWVPyOIPoOLijY2GRLiypWNyGbYKayzTt5AqaJo745F5hV2AZHEz\nu9XGV1MT0EgSLMq9jfZSVj2hsaNxpmFiq3l4GmR6meIOm7az7Ql/jEZmYuHn\nRwB3dplNWz0myF52oW9e1v9qy7a/z6wY/JIHQ6QWOIc+g82bKX0yaX8cC4QZ\n4gCwqTxryjjLFtRdSMrCeNuTMiwy3LiYcQnidEU93V8Ji7gXUBLM1Tuqhjor\n47Ezu8QyeFEwYxVnRhB8/jIdqcSfo12pC5CO74sHnECEXi8vI6BI0KF967yS\nfsfNKiTEnRyL7BHFe7j2pbMb7UFb7KeInRBkMuL1iJr3r3cQjmiO8WLFKUDf\nBWPzoCevoHXEUkvbOKUpV+FLy8vzNBkDwylPQPfTzMQU60wiGagHHLeQ9NB9\nMOoGhSJqiZf7bD6fXHkUQ0Jt8dxJVLjrdTG44ZWotTOJg8FYWW5u21Sx2V/3\nhlys+Gq863COxSpujW/y4ybVJl15LG+6KaU5KWfIrjVN2vLHEP30mS1JjU/g\nh4lz\r\n=rCw2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"0f2b32b890bdffc055625e5ebbacb11a4fa07e9c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.25","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.25","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.25","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.25","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.25","@storybook/components":"6.0.0-beta.25","@storybook/core-events":"6.0.0-beta.25","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.25_1591881932112_0.03606542823878933","host":"s3://npm-registry-packages"}},"6.0.0-beta.26":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.26","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.26","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3bef07afa61e42445b207e35f26eb6ac452475ce","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.26.tgz","fileCount":93,"integrity":"sha512-Aea2eubT4vMEbgfYdWoH7fYLL5KpheAjAhPX8UKsw/LcQ6QGFcoiiIm8zDlybpaqJIplvqHsXzKSghIzyD5Mjg==","signatures":[{"sig":"MEYCIQDdHwQkicTGMAWj16JkmDt6uCw0M/H5il9hi6aPqZ9suQIhAO6AIO1xQfA9JZid+ZG6r/5DBic8OoSDEqpMs9mml8SN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4090CRA9TVsSAnZWagAANFMQAIfTUF52qIActLrFxZ7v\nGhtFvZ8Gj00AQfRj/M9UTMbn59XgWfxNPzVvT7UkMlkRZFrGPUj3NaO34jiC\npABSSHAcRCQ+51RkYVQMoR3EJpwaxRnVj/NkzOBvqAjjDDrnqcC3ahIrAyll\nff5hmbwOBcfiEA8OLGAAbE/DJluyGKfv0YzytzifpSK82DH2btJfduEdGng/\nqvNWe0SED8GCvSU9dkKQ+2ttbUgj7c/UCRQz5eOCj6zt/sAo0hUQIvGDWw4Q\nR+uJEw962wkJ5KvmJKLiH5h40xIY+F0AOqCGV64OOYE0PISR47P+CLfRyCL+\nKb/6JDWE3Tqr54hhw1RE6irbULy8PAHK5ouzs78Qg3VXi0xxuGXUCC9CQsgx\nxKfRBaWn9rKglOnBqV7vVzyK/Q+/Jr9nb9howtSZLUk1+qBbpZSE4sLG85gI\nQOCarPhv5n9aS8rHxs+3lOs9NQHpTGnKwLWwe6BYnvet1P+Fz6z1QGWrV43E\nc8Z5/25BoMcSAHKVE2GEzCgQOt4w+WsVnpFcbz6DtprtR6tsYmF4GrI7srHC\n+LHp+hSG4YwwizdnBxSZVZSYnWL1IIFYf60OPNg7FpC+i3qzQSr0WaCeJHdx\nb4imc2tAHvPJ49o16D4RQAYWcaoJYajPAZefvY91ibe5c6kkhr4gWu6UtL6m\nEdSx\r\n=miDA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"f0d017581007146be87a10a6da3a478d9d23d388","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.26","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.26","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.26","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.26","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.26","@storybook/components":"6.0.0-beta.26","@storybook/core-events":"6.0.0-beta.26","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.26_1591955315862_0.5717910602755518","host":"s3://npm-registry-packages"}},"6.0.0-beta.27":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.27","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.27","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"cbdb15ae11c63ec0ca00f2a5d330fb868c62f28d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.27.tgz","fileCount":93,"integrity":"sha512-GgM0uAaQAq50LK1eVaLYZFqTF6CRgD6QsnE4Lg2lDM6RrygtOogMSOgsXAvGyTTK045BtvTxveuzD6mzub/38Q==","signatures":[{"sig":"MEQCIGACOBpvij6Yy/srlkZy1qd96Vkvrd7jLwwyOcO3KsssAiBzmN7aVF0slahmByMndy1mr7z081jiFl5QcrE33tq+UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5Yb2CRA9TVsSAnZWagAA48wQAJbdKJp3yXcYzPo77eX2\nkpFMi7V64u4RkMPFGFNr8xFhy8cmIy6kpjg/SlBdNB0uf6irwy2CMVgm78Kc\n2n175eTRj3iOgsYmBXvjtkibWQHaqAwCGdCMQuNitKs9B6RMVjxLFoq/s8Yq\njvF0ub9rnfpc2sMOEVGAD6QjNbhtU4GBuvxXrIMn7hZqJRAieRj1kAsnhk8m\nJ6qfdG0ExLSIlURYA/NBaq+UZ25QyWdiOfjgq8dWadJl3BNs69LsVfDRx2HH\n0MZlPlI4PndbLyx7vJvbIcAE/XyPIWDmprJTh1Z3A1nipzQq9mLpD2t0MpiV\n/h76X3qdOJroqI+vFQ/C9IDWp6D25TP7vi6j1yw635unc9145buRxb1yCJ6N\nTYCJvxjSIH3VWMN29mKGqp9BdMpA3LMZAmeEwU7cJ811nnuQH4Xq+nvNACOd\nhcf+IPUfTqCTOC/Suv9B4kDfe4CQlk7xREUv+WRrfKxcY1NP7oOgH2v6gxyJ\nIdWJ0xBEVbVAdEdyf0tsV/iN1wp9AHITTXcVX0ug1fhfgWeEQjJeCSE1jzlI\n4GgrHfDn2KUf58k4+spOybjVkg3rfp++aQ8eUs4ah8E93buQXMkJzk2RPaga\nz4LFTyaxH6HP3WPWw6VzD1kgQFNvLEok3XFvkzg6tpp7lKE2kytQ2nR5+KQ0\nKTbQ\r\n=9HaY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"e8ce8fa657802689046a977c49e23c965ec815c9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.27","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.27","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.27","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.27","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.27","@storybook/components":"6.0.0-beta.27","@storybook/core-events":"6.0.0-beta.27","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.27_1592100597846_0.7731476648484947","host":"s3://npm-registry-packages"}},"6.0.0-beta.28":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.28","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.28","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f3ee2ff12a15b722903beede1ef8028ae5bec04a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.28.tgz","fileCount":93,"integrity":"sha512-nwn+vvn2MQUN98F6AHH8k9ApaDKiHJvq+2isL30+14YUisiqqMIMezUWnsT8aSyZYgV5d1WJN4bPjkIkJOEUOg==","signatures":[{"sig":"MEQCIDVxomsI+8UKBZf6Wp81CASGDK3QoZuw38KoHVodWGZAAiBRlkI3daWox8NOt0aLqQ5jnqlaXlF8WBbOBcjCMx3W3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe51VGCRA9TVsSAnZWagAAQZAQAJE0a1dyFnrwGIlj8+Ay\njDJaaxRDn5MtyJydFWk39L2OavLSnGu4euG/DgCFfKxTR1OwcM9qzlH0bSc7\nhtigl/seWCBTDs3kSp5lSHjmQInLu6cpa0UTFo03+4hxOGLa6312GILJLAgJ\nmyGO6oQQyRIOEE5R3o8kqdjmGtCGd86rG4Go4qObyMQXPoUp6bT9043xC9Cc\nAKX91AtdN32V6mo0Ejb9fSe/pnW3CHakxIQo+P5eH7OztCdJ+EnY4dqOd/sh\nk+tpUEVXJSJco06/zqehDoHUhqSRLp5bodw7gnnFdt76m/OiduGJ4VgNjZ/P\nkFCLxES0ZJDaPOb8X/pdBnmc7EfqrZO7VcQyeOU8beE9EoOujglzgvMdhhEw\n/ANi3ru+kQsyT218RBLnXhXPZnGCqpYibyI0MQnO0A2H3RTSCSrHOYgHNZkV\nNCAHiL3LZLLsmqfB6TMAIhxVRWrKt1uyQA4B6DIWAa86Rc78so76x5KXuV5b\nu06zaHHDNCTFpsXwGd3h17TMi3+emkQngxFSGMN4MKJkEUZDXtNq8jpwLfJ5\njpi1uNMAfPnfc0ASese02JIkbgh7cJZ/0etgQCKaVPXKa1BxtoUJ4ARHA/gC\nWfew2ku9jZI4PWOKPaFuRyyh/qwJ21Rt8u08ZtsZimOZBGh4v+AmKRSfqiKC\nBUfD\r\n=G5UR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"d57ed7541ad97d3ab775cb9091125fcca8b1c1a9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.28","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.28","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.28","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.28","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.28","@storybook/components":"6.0.0-beta.28","@storybook/core-events":"6.0.0-beta.28","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.28_1592218949553_0.22291723509089478","host":"s3://npm-registry-packages"}},"6.0.0-beta.29":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.29","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.29","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"2d08cb6f052cbeb2567f6369d4b0600e321e2dc6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.29.tgz","fileCount":93,"integrity":"sha512-/TDa7kP8U+ZQUmPoYL+m3KPRA4f+KwEjDFqK3Q6iVBmjVcMfKIzplku4drfFIN+x/cdjb0cKGki6cWhyYYgTkQ==","signatures":[{"sig":"MEUCIQCY9XmK+3LxwSE15r6TwLedfH5ex33uC319PJsqOyTKPgIgP/Hq64xn8+saA/EaPhAY9ZeDIRWZ1UkFYtoBiHF6I+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6GKpCRA9TVsSAnZWagAA2Q4P/i+YSFQ68kaJQeg+FZw9\ns1grAeTb9SvozdeVgEH4J24F8uO8qu+byjLGvqBWUKSJkZRKqON8G7lzkmYX\nqXpPw6ouGKmGKhu3OTFWkv/hNpQAn73iT5V0Ux68SMhCg0uVrbJsXoT2h7Lv\n5ojLi/4Fet9s14G/ogMJeKRha22qILcVuHAdHuZIQHGzGI9hhMoR44X6IXTU\n4imA2aYU6DzetKZXFOK2J+NSTcffD60FW7V7OHJHl/xCdsmFjEIKjfOCQ8zU\nDn3Mv0AVOjYbAzMfxQyOp2b5SwMn0KpNznDjjJHBX44Vb3dZbfPsj+aAZX6Y\nX0X+jPh2AKR9XRDfhpJy/Trm3KMjj4TfZZnXiI4UcYw2GKUEIUmN2vFuj5iR\nn2qBLRTkgPdxy5N9mN99wzjQ2xHoRMvCsNHuocW56rea3oVNTU3LD/LbXoy3\naaug2dWfwJsLqRDNobMVKPhON+T1j+4uRgzV/nzDOX3gy+/HoZg+s6my8TL/\nouwr3tZYwgqtRYrmlAiWXkwE0URDfpk6YpLFYDzRJlS+9kaSDt6um86y3Vrf\nvpe9naf3ohmhWM3gMdZTe8TPEp52X7kRhZZNrPTbfxTNtifo/pB7j0cO4I0f\nwfRIU85+05pyem3DZkpbzT5pRIQCizY0+yM3JgS9JmnhV0MD9DLDCaNQWyjK\nAUDa\r\n=PVVc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"8c0146ff03aa4e3f81b5292f2e2a63c215192040","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.29","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.29","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.29","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.29","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.29","@storybook/components":"6.0.0-beta.29","@storybook/core-events":"6.0.0-beta.29","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.29_1592287912876_0.7549131514651426","host":"s3://npm-registry-packages"}},"6.0.0-beta.30":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.30","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.30","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4bb2fb25f9dd977e8c550459ea056b1e50c0a7cd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.30.tgz","fileCount":93,"integrity":"sha512-ES7wtS5fFSMNUJ4lSb44Y0QKBmFIp98FiQmdoDbcBjYEWzCw48cG+eedIHYDaYuJsIyTS9/3cfw7NOru/0sLAQ==","signatures":[{"sig":"MEUCIAvxp5NIFd7xcpT8gbZ/1GSyl7NuAKOaIpLgT2WmpAi4AiEA3tTH01AGyY41dzoQMyjipO9xafO6XPoYfaFrWvhlStY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6NqqCRA9TVsSAnZWagAAvdgP/iRO6zg6e9nJquRGEsDz\n7slvZrEP0FY/hiJKMlnBC5e2LN3L0MJYRyB2qGTLTPEMhUZVW4/mq/qwzOZC\nwRYhjyaRLcTF+uTwKQgJqkjEbiZLPwxz3FVi90AZtezQ4v+2Hko3tIHg2dTy\nVjH4gXxS76ReMFjr3xm/ofA0g32Mgy0PEBHzBI3uxxGyzMxsX3lGrtM8YPhQ\n0YtUfmNpdd33ajKV071QKzteQgS08fVBeR4AAPEwJpq0RszjJJoxSqRGuHbS\noGPQI3JqFsStBJ1FP3JJgcBxVcgi9snKQd7VRDnKF9EPYWWcsdct5AStI8Q1\nZuCmGKPKOMuT/0F3TG9NmdDvG2WEf4UeHV5f4SqiLGa3adBIaGm+2cz3bjuo\njU9Hq6z2hLmQ7ZtOmsNT2LG9r9iYf/M0D9SEfpO++XoTC/6CrQZ4vNb3Y4KI\n9Zph1qFa36P+N5qKo/SXVEmu5clo1UGoMf5hi38ZKGxGBEw+CbHijSVT82Uq\n5WD+joVB8vsftPpXC2dm696hgoSybV8EE1bO6JtcvwM8PMNAADzed0dpEG0m\n1YQ9xyT42NXEDKXMda8OOHMK5AaFNar8lbw0zTryC+VyYCrzuZMNDhY7VT2V\nJzhfvdMoPh6NVh1wsWLs+LX3LWyYBJWUqWxtkiqKwn1GFxdDZU8yOMRc9gRV\nQ36E\r\n=8hnU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"90f8bd39b47e447f7e4a1be73a45722991a24ae0","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.30","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.30","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.30","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.30","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.30","@storybook/components":"6.0.0-beta.30","@storybook/core-events":"6.0.0-beta.30","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.30_1592318633751_0.5878499713654275","host":"s3://npm-registry-packages"}},"6.0.0-beta.31":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.31","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.31","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"fc6294d7ae994df501b22d26656162aaaf791f17","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.31.tgz","fileCount":93,"integrity":"sha512-+2n3B/j34zdqqLwfa+RlHKtFCGuNW4zYPEc4CMiulR5tEA/KRVI5NSTL4tx239zQzblvJsggeLTxTt0sM0anxw==","signatures":[{"sig":"MEUCIQCrjzRNiG3i2w52Y26CXTin5m0kCGok7S5K+0sZyDCVUwIgfj6LaWqLMqJ2dg7KLrExfCffQFRFoV3cRj64OHAIi2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6fmgCRA9TVsSAnZWagAAFpMP+gN3hlMAGTzmW4ULNu5L\nzXqaP56oEjtrpeE4Qy7FZJg8bEm2QP6pjoEIpOq4phHVwxoZLGhkOssh9Hgv\nRS36T7ZGx7RmB12+RxcbUu0BxeEDNGCOmMOyaLpdorPTvd6T5g9k5qgSPeBp\nRYaxToe7ByVRGlvYBIaGSSfElwO3Y4m+RchLgla6Tnvnh0W+7AaagXGkeC1W\nq/8aYoScmqCVz2S7dk0bscvxltvkiUNTrSid3+ydfG1OT1KNg4ZTLLytQRvI\nQb19upO28WyCGRiSYAqAJItZOimtWWNHJN2oMS8S/nemBzcxTi+CkQP939kO\n35OmJF9ZkxTHHu+1knr7wNue/4G+dNWYL9ZlYcEdRzu0uq4oVidFuowWWM1w\ndQvPs7R1qb1rOFIQCHh8FsEXU3hV1eJIEaFWOVPykUaLo0gITdYZV0dMaLGs\n6lhvgrHCGRgH0BzfED1kj4q1ifxGYdYOZi3zzlM7wzDyg/9vpOSGnI97qHmn\nMa/pk7frLlfoRsXsidlhKU9p6Ky3/y/+0bxAk3CjksKMUl3Xw0Y6MjBdF2nC\nxQWXFtPIAm0sFSrgV4zZNgCw8m6yfD8e02/Ei5HwFqdBjD3ftN5u6hYh0t8V\nU8yJv592Piwgm1OOlvBUGPURePiSTeqdEm8QHIbtSdGFoisOcI+TlUw6zca4\nTAAh\r\n=8XXG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"b4aa5d2a2804cf5dc163c57b4c8caca1a82186d4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.31","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.31","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.31","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.31","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.31","@storybook/components":"6.0.0-beta.31","@storybook/core-events":"6.0.0-beta.31","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.31_1592392095667_0.22698325551420995","host":"s3://npm-registry-packages"}},"6.0.0-beta.32":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.32","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.32","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"46c5eb1a3efd104d110be9a0b3a1fdafaf67b4a4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.32.tgz","fileCount":93,"integrity":"sha512-gJ4VKPek+caXl2ihVXDQUhaKc9UuyX9OYr1JcWUX3NrZebyrIhzCcX8Yw9VZbEDPaS1/cSIfEHdMnsiQVKOHZQ==","signatures":[{"sig":"MEQCIA99J+kpwauGssaxtLJQeTSs5kIJv1VmbndXl+ZVvotfAiAqTQXHkcTTvY4vEKR3vqZ4vOrkq1C15x6dbrcngOSv1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7L7KCRA9TVsSAnZWagAAEtAP/jWLV81OjkKvZNIipaNG\n7pjss19S3SBHpSXYaNB4FYnwX2TzAiKjmqArMejj9dA1FBL25GM0UEc9Zfq9\nrZ6Gair8KL8nIOy+l1a4d7XThwp9Rr2hePjJhe/9rwuYTLYq3E95EYuFdJ73\nGl+hrU4SVbbzukf0TaQljxq/PtE5OObp0hQxb8e+kXl0WkyomKwFTEoIIa1A\nD2p570CrFCHyuw2Cddb2rX9iB/M7W+Irwk59izJqmvQJxjbtTF8bfYO1rWVV\nkQv0j+FsuNysRTxhR6oPrm7cZdOIj1f7KdaeeLrYWHTFz4xFIhYHN6lDfpBt\nN+k1vjCdbW+BjP445Y61WPJAxg+wHU7LdVSVNKLfL5pE8v5L9cVKAbL7qP/4\n0Dw4ORg4bhItQNndiCFLtOW4Ga4lORJ+GDTM3XqBgJUBzlZVzeQBQmg12Ogf\nLL44ANBult88bjpe64u/NyByAeb6uqramNIHFp/EuavxfxLxXpQfprwg1LxA\nJUUdrwAU7gIbJQruIwxtQMWhulv/C/Q40s0pEFV/LZE9v4qjiUSYPsY4hvlc\ncrUZhwqrb6eWxb+zTr/iMLAS2XUo0SYCwkHDnBWfog8e06fUl85BylaYnz3V\nDJSVjPn9FxUeG0yCeUXGZPWSTBYnuNNIr3YsNzVel5cUgQYJeYW7e1Owi3FB\nPQBi\r\n=hd3I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"e704e003bc34586c54f368553c954e06900bbef6","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.32","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.32","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.32","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.32","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.32","@storybook/components":"6.0.0-beta.32","@storybook/core-events":"6.0.0-beta.32","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.32_1592573641865_0.11266438752846986","host":"s3://npm-registry-packages"}},"6.0.0-beta.33":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.33","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.33","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3c906eafe3afd8a8cbf5d78638ee413c91834f41","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.33.tgz","fileCount":93,"integrity":"sha512-O2JJqERhSYOg9j5Oxub58k3PRow6A8VhXXB7vV7Y5qx9ZIK4x7RhU6oqLoG8DLHw6FU8aqvo4t/2Xr7s6iu4qw==","signatures":[{"sig":"MEUCICn2E2BzTd4dpeoP9PPPymw3Faiol31ExuPwGIWs75tcAiEAtaqEsH9PVVY5u7XxyzZTq5AcO9OYVgF7/No0oBHM1Ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8B2QCRA9TVsSAnZWagAA9OYQAIc4uHWv270D7hSgT6oQ\nnFSsaRIaS5TW7GKixRv4HJGGsosYr/tLbkzy7DJYuBBV5zdx6nBKYlMuXTkQ\nopWgIlA8P/QYDpV9bEeZ5Fu+9x3G+UlkRavGOVxam5jW4I35GcVw4EttPLWh\n6vM+713ZzwxNSbIlTwiS7w0NLIFsWz9LO32XGCjT8mtlwleO03cqHkQll8rP\nYWE6AShiC7+b80olOgKiRMf356uCoww66CTUYV9rh35exfYbLFjgfcJEwQRY\nziiWYr/t9pATyU6Ogz37L77t2SZAtCFTpEbLR8kSDOe77jgT4eJ1y+yLrmGq\nhwlf6UNpBI+cKY3AUCf239L8GVE5U+WjHgoYw1nwL0QVksiPfXCE5sPEis+U\nWZrsgp3/gjYWq8Crno6flsE5Lpvm44QGm89PmFTX+Htv1pN+Oy++/aRulsv+\n1+EobQo3mP5EKbLcVDkaO61/YOQPb98x8LMInxqppEjDxFohOQaWrI9XFyMm\nhC4axAkSes/dzLIv1IPo6ctI259lLtazQGQAmpDflC8JER3LESLXQRmPP8gv\n8EsC7x8nUEN6vflQApbgLyOg4YKGwViZSs8ZBiTUta/z58eHT3r2coHFU3mv\n1sowpUhidhrhJ5lBJFJwedjEMBIS1MUhs3TDL7M4Br8N2qW1Nr/eXBLNPSSr\nLwRZ\r\n=eKFl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"15d087411bcfd88155215edf0dcfa88e35d800e4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.33","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.33","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.33","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.33","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.33","@storybook/components":"6.0.0-beta.33","@storybook/core-events":"6.0.0-beta.33","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.33_1592794512019_0.32787107806576565","host":"s3://npm-registry-packages"}},"6.0.0-beta.34":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.34","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.34","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"2139a29cb08c6274e936d10a54d29f5c20d60b60","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.34.tgz","fileCount":93,"integrity":"sha512-klXECkUJuC6d8oei20V7QAriXkQ2vuqWVxkk7NYRU+MYqhIxga53PyKAQ2983YG9Fr2NPbgr8hdS+NGvS/Jv+g==","signatures":[{"sig":"MEQCIDsOkk8ivxA4JnSHqmeIAcnHztYsVM1607WlZ2ymoldsAiAbUNb4MeqhBm0w5D6CCa18xmp/5cRzOlqj8dyxjja4lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8iSGCRA9TVsSAnZWagAAmP4P/0b3j0wDnKXrEmkK4hzB\nthOIgci9eGWnr/FXCi6XLY2RpBVDQzoqM4dF6bQSPZLTA1sNkb6a/ONdzGtn\nNcBnPS0XKa9cRL155N064v2c7i/jjhb6+A6CqemZf57VKrX3KARpFvYTD1ZA\nXv9yj5VLhpSjiQNwtkbJ+mz7vfK+UIazM33HVzgwegjj0Kpv5fumBIsKLrtn\n+xwfj7UexSkKNyJGXCq/7cQ2uXRlU6D4Czh7VKFd9npPkNvWWvCRdR6wqOr+\nOBh6J1bd/50xVzNrKTtE16netKpa4vOraNBjzkFbimA40SZYewXVI2X6gi34\neWgF/QAW7aMVmksAeFozACzRFaJLSB7rQS/PQw7TNFbJ2NnaGbQGmPiIl7GD\nDn1UFEYvXad8S+kpfrpYpDqR/NCFbHoEtbXs9b4kGhQbyNTCJSuGzcbav11x\na8rSkM5t5QLvF2Tx4Mw4AQUo835g3mSHZkf7RCzEjJXkUkLqCg3eHe642Q4L\nTggR9y0Njz2GVaPodkwYjVON5UZIwQE2aVMLAgroEsABjUudkXfVYv7Pdqji\nwFB6GLlXnvrQofifske/vQhSFLrsxP4Mp2gqXQSiZJKV/FR1u5wt74kKEK75\nFMw4QkgoUyBqpl4B5mqvX90w1cNGpPmeLkns5wOtrZlPh6m/fBMBA+gRV/ZV\nspsX\r\n=Rznc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"16ddf367a2e90341d6787d892542ca12d4c5eabb","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.34","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.34","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.34","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.34","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.34","@storybook/components":"6.0.0-beta.34","@storybook/core-events":"6.0.0-beta.34","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.34_1592927366355_0.773487917867995","host":"s3://npm-registry-packages"}},"6.0.0-beta.35":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.35","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.35","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9f8e10e1082656cc2033a4035d0d7fbdcd8ff451","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.35.tgz","fileCount":93,"integrity":"sha512-xenSOnE8bf5JrYQHjY14TcV98FzomvoKiHrgFf/6t4P89J0fnw/b2Y/dPAiaxrs1/jUAupnksGShXl1VhR1MgA==","signatures":[{"sig":"MEUCIQCBrHjlf9F5mD/MPWudhtRgbe4YIWapUkiJ+YC6tG25EwIgWUFiT5E6yLgxH/g6+y/AmNaehKdNjnOTIhom24MX/to=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8x+nCRA9TVsSAnZWagAAlAcP/jAB+GiifT1M2TkfqK+H\nu9208D03AekuHkE5ywhn3aI6dnz271osQ/5jPsp9MzgGfGT6KhJerKl0SHph\nHSXs23cZvKxiHaSCfsMUHMAg5EtONzmsm6k+vjHuggOJCPsexw3dsVzo1dgT\nVU8g1cwxMYjaoUokatUEkr7H0rfXccNg3vEozdaJgwGjL4hcgRikaCts56Zu\nKy8ZPdOrn6K//6hNE4W2wr+ckUc+nm6GcbaQMz/JKWZLmFyDc8wgCt/0aZCR\nLngVs6Ykfii2OSRhynHT6FTII7gY8ovF2IOHcj+f5jFdtHbHFpYuhpN2UMNq\nNzvclPJ8izbHy4/XixLLTXtA4qWDheirwJMtEDOnRVOMRGZCnol6a+b9abbn\n4WXZommQd0x5VEDD6oi0Sj9vzySptSvujzxATnEs9JvXxNrkx0XwO2ff9pbO\n/FDoNluLtulplRCiCoAF22gD30UEeCv+Y5CZ2m7GxywVIJ6tuHYJkNZqhBFq\nx2DlUPXHZeRfR8dIAwMGELsQ1KbmcdKMtvsaTpuRoKbUnAU2pTi8Tgo6+Erk\nZkBjbJuVZRmeO+XsI9EWSm82oi3qdToZ2iVs88zoFr+15DlBBKZv1+D4crfo\n65ngaxpAlhzg8Wm1cSOney3VlQ14i6wVZSp0VB+dOYczs2TAatJ+0rnhnOeO\nZwJP\r\n=xo96\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"24b285dff12794d836004e67d3a17f1c8883920a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.35","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.35","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.35","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.35","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.35","@storybook/components":"6.0.0-beta.35","@storybook/core-events":"6.0.0-beta.35","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.35_1592991655165_0.5728148730162006","host":"s3://npm-registry-packages"}},"6.0.0-beta.36":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.36","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.36","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ee98801ce99c37a9950c2cfe3f9dfac0129d892d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.36.tgz","fileCount":93,"integrity":"sha512-FfrwqN3PPcODjVsGYiF9nM1FXXfwtGCFdpDdsGpMHTWPMaT4pdCBTjKGb9xDKqoZ4qI/jAEinzqza2zoBa7tTQ==","signatures":[{"sig":"MEYCIQCOWw3nVuJTOh7i4vVryQKwa0szciQOIdRPfijr9W495QIhAJeP4Vwl7MJHY2uMFJAWgmDqIvJc8QMjE1u26YFMt99/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9AmdCRA9TVsSAnZWagAA7f8P/RW0X/Im+JwqrL3BGcbH\nBUKyHqNsOi3n1z3I9lu0/5on1aQKVW57bstZOgi3ybAISaU3iPJJB5P9RPcP\nolfeNNJlwAL6Fl8ZtL+GW5PUz/NiKjeP5dF1vm5M1/uLyPMcRQ6kDSPE1/hy\ntY1famgGBxNCjX+Ms250lMHKqK3rO4o7Sr5ZpKMkjHk8XFwmGx0DU0KC+6mI\n1dNyVpINOSDC+FkCzfuyfLmR0cuKf2lUfcWLRQvv0zNzd2wzECOwZeo+8QNb\nHcUoouYBNzcwRZYYd/DM1wcvpSm/h9uexG8KJFm6Yy0fhZ2jkfqlxf25JpDT\n1KqPpNCbF1hgMYs1TO4gFZkorNQ4Jm2ss8vBteW9leeQgzjy46msbwLp6xFr\nXP1xlgFnrnPeEUkNr4GSeGcd3CXurxRK/C6h5mqEiD4QatQno21rPvQQ67Lq\nCjHIaQH7DcOyoMjKLgBTGk/6LJve9sjJzAFpCba3D9JPykKRU9423ywCab40\nwYFeYgIPy9KrJluDzMami0byyUXplWQBJW7IIAj5XImQK+R9bOnVnerDL/Jo\n9v8VdzYZDbxsllX+pXermWzz6wS8bES6fsESzzWgkMnBJ/CN+bntSPmn3t8t\n436ad88AA90+4QNRP+lakuzxe+Xuv+FRhC29TN1G7Jb3YkWK6LamIeXMKWLB\n+nBZ\r\n=BKK1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"9f4d471500703069493bdc974e238d7506d7690c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.36","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.36","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.36","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.36","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.36","@storybook/components":"6.0.0-beta.36","@storybook/core-events":"6.0.0-beta.36","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.36_1593051549037_0.6119514445616012","host":"s3://npm-registry-packages"}},"6.0.0-beta.37":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.37","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.37","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ef7188b5a677926e3120255afb82156cab577d33","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.37.tgz","fileCount":93,"integrity":"sha512-KMpqYPFcJa6H+6IQk/nJ5Uneon+pNju4C2MFci0ChlZ209xvY3teNM7Gbc8znbRpzoHKzcGogl8TpKkZk7lIbA==","signatures":[{"sig":"MEUCIQDxyPMilB33NJEI9cFhQClRFHYEIdTRazT7ze6E+LePuAIgV34hmCsGY7CFhd5FDUaW6o3ii5gc1dEj7mEzIVbY1gk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9Yy1CRA9TVsSAnZWagAAlrQP/iwvesydAeKeFKfuwtCh\nArG0DtbndS/gtKa0qpyXoofO1NCs46xU59QjOf2dryVbMHgsXInea7EIjrm0\nyfw/6ZHGwvh0ZR/3/FymTjZnAOAUJrNpExTsF9l07vqaoTFUSN4Nkz26mhnD\nLtXLNbSW9ejhRXHZUX/08aJIBVyO1z7kngcjgj5903pwOg7w+VwxD4CgqqtW\nZxldOJ3dDCs8D3FUgBFwd0ronOk2mgWJBEkzxRaw4b2BKWu2+tUoVySwqTTg\nemA+ya4UPKKdfFr1hrHZosiKvuj9T6WDFGyM71MBKsmnHIVICjUvJsaFmC8A\n7rWu6LZJ1THSV1afyT2doUTUVRDTrir7dqm8Vj6joq5FlocfpxGYrRE0iVd0\nRPI/G/50OOq310nVBj4d5h8CT1ZpPZ5kxPoVZQXufEuzIQNirv5AH10ShPLi\nGAa7BMLugIkaAwtc53YiTPyYFXDGvePCVw25/YpoVvREZT9sB8rjguUVEANx\nb/HJ5E54GlkTZxf0M6tGrJDNNQJw3k4t4IWDxlnmgrgbw68/mlA5Yj0Opujc\n1BGo7AE8IPVaQ1Fj4pCJYDypQtflwZ3vbzrrJZ5wEkY9CcpmdBgHbTXsFi+T\nbQB6NPBMTw+Z7E42WWxdTbFU56fpwiPIPDzSQzxBVVLeJbMSGz5pMmv1Wb9Z\nr4XT\r\n=trSE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"ee6b50fd15b8d653c28f213efe3290cce208eca8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.37","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.37","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.37","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.37","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.37","@storybook/components":"6.0.0-beta.37","@storybook/core-events":"6.0.0-beta.37","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.37_1593150644469_0.20933481516591645","host":"s3://npm-registry-packages"}},"6.0.0-beta.38":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.38","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.38","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a2d5befad39b6731718d4c1f0fdba038ca2b9ee5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.38.tgz","fileCount":93,"integrity":"sha512-v+kQJZJsZWQVUQsncRT/vYSsVKbtQEbW+SXMHuGApdfegt1nTyW0H43Etg5AlBE2OX+fYhLtXlj8LJH+Qbul/Q==","signatures":[{"sig":"MEUCIQC4LjXeIh1zKJPtHzDahXhqDfsLjb7f2e4xXitOxaOxnQIgfV70UVSCX4hrtbvG8PSjqHus2qQdEXwmlrtx2kdG3wE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+14lCRA9TVsSAnZWagAAt/sP/1va2+H0NKfU5RjcPFHZ\nE6fWXnFKchXUsu2Y2T4IZRiuXsY2fdjPMAgFITzyUdWWeSsVTQaSRZv5zyXh\nAoE8ZFyKTA/o6TIPXcwdln1zkBw8BdC4WjonR1TZCSst+S8k3lnNUPNbCBrD\nk+Oqj1s9mxlTGn6Ca1g1aw3NVgUjbv5+80h52XADVltN8M5fAmAIl20/6cmK\nBKCp9q3p9M3uXkyWWz9VWl4szIrTPnAXTr2wRBgqkyuU0QMBdS7zRfM6KYoL\nyDg8wVO7n7nvx1Rw/0VqsTUD+REQnu+PRgXpeJ/r4l/6hXCzpclMkTuMyhuw\nlwn5NEkAE8DwCCrGJIC9fE21gwqXltSzCxGykd8SeIMUfzibdLdaF+vj+A3y\nPQH0aVNHIO1P/ILvkgjflClntUsblPl1W6DQm5/joHfs1LAL1Y5dvUF78vdY\neyVQi/bpp5dbsNRNTQVDYzGYUwypFUAClyMKvqyWkhUMC3WeYJzTveOLryPj\nFyke5Ovdxziztj1O7hx5kWXqQ055WoFd4ASvoaaBax37dnXqESZAmMcdEkTg\n/YrFv8zKwcBLWQCZw1dZkM7GOeqqsGLdsptq5NMfzQO1focyAOhkeV/VgxNC\nJ2f+hKoxN5orwUxzgAAXYy+iJBCc4cctmcosYMvkPEperwXb4goR/Ru5x8yO\nz4zf\r\n=+HDo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"1646f3881ceb0bc51b10b5cc92f0a8ca8be89998","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.38","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.38","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.38","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.38","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.38","@storybook/components":"6.0.0-beta.38","@storybook/core-events":"6.0.0-beta.38","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.38_1593531940678_0.7621749671093907","host":"s3://npm-registry-packages"}},"6.0.0-beta.39":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.39","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.39","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e0aea0f824790eb86adb912b4a0f6fbfd95fd980","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.39.tgz","fileCount":93,"integrity":"sha512-Pp9Gty45skQiWHNUa9YEozhEWNCXQzsIHPmX24jIIBnjOT0k+UFtn3t0B6TVQykISuIKmJ5jxkMEqzdjXsNQhA==","signatures":[{"sig":"MEYCIQCttKizVGJ3Yv30zbntyWZlcjYw8cdm6AL82VLBwRPNTAIhALTmIw13Y4z9blRG8p5J5Wxt0e8rhgyQf8phTv06B5/r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/cd/CRA9TVsSAnZWagAAmogP/RAXHI6IaOLu09M7Xomv\nHvGxrZwKjiS8z7riT9J+42LZpIqsG/UI6xqBPdYuxhFlapaO/GbeWIVCa9I6\nnfwaEmaCuou3hj0TUvVCFA9VBTG7BB5zT82oTH0uiDtSrQ+uSMTwW3/6GWrg\nYs3M2X/AfVhE79K99cJNUHM+TeYFQAGOzFVZkVgSkuIXqpfbyC6nuJhIBGrf\nBVxKIqfrzsuUwv/9mN0TSM82+kqJp9Wk1iq4uwEI8F45d+3JV4Ay/KOSooh6\nhHXm6CBiIhBRsuTw9nw6mlumb6vuY35sQuiaf18S0N3C1pQedt4IBj2dGlyR\nWY7vF6xx04sQEgKqCl4Pmf83Fwg381rGCb2wGkCeO6Y8x/Xak79oeFgJZHXT\naBZ/LLQMo2prkuckZdi6dOsR72CliF+ViwuT3ovL7uS3peFsfMFs6H0l5ZaW\n2UZIxW+eegXAp7fTTW9BVwa8lxLBSoST2J05HqY3OnKTKO9cXw2UKrcJv1bg\nfotwHNZkTqxQZcugYMD1XKe3bYh50YPK41r6itrNI4ME9HXmxSFicZPSslbs\nWrpMIsdPYnh8cl1uobxEHTnKk7u+yCCBdAKF9UexSx/Z3028RWp0ofDp910b\nLyqV2Nlyv48ELGOAEog3h2HQ42MMQy3uZFghOwpmEPJhQeycXJ+sYh7CpSuD\nhcmc\r\n=2zfa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"ca9e1affe9852f3b2614046f60bf820c61927f28","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.39","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.39","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.39","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.39","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.39","@storybook/components":"6.0.0-beta.39","@storybook/core-events":"6.0.0-beta.39","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.39_1593689982648_0.4846798979507263","host":"s3://npm-registry-packages"}},"6.0.0-beta.40":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.40","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.40","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"30cce1ab762ebdac7f4a838dce43f96115af5683","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.40.tgz","fileCount":93,"integrity":"sha512-2qwys1c+EJ6X1yqTQt2XfxKxEzhdsSnQJOQgB1wfj/jfL8yik9uXFxncRI1XB3SKU/2aC+T6t8ZrQgKUZii73A==","signatures":[{"sig":"MEUCIQDF8Rc5TNesMoKlVNVccr4rNwtsoKuJHfZwVRZGavjf1gIgdcQDqkA2mYORD9N7TGb9s2QP1VgodmTc0GJ6sg52RJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/1v7CRA9TVsSAnZWagAA7d0QAKTwljK7J8llsMhAhHP7\nh311g4eP+bFAMjfkqLhXzHcl9gXnGIAHf0QU3DQe3TB3u3t9wnxiLkAbSKz0\n1i/aEMGpbvhOpFFCUZRxiRQwAHr89MYLHc7Cii20RIMFK/VNWzRhLLZ3w0lS\nNeSk1h4dT3R/zFRque2NQ/RSfu8hgV/smhYrcX/AQ8M1kL7MHHQvq37J+KEL\nKWoqTmDrUf/PVOgVwIfUoR9nOMr2b9+5E1wr+GNP3DKdGJ8yMen77e8bCOST\nQmadFlGiAWRndA1V/MW2KRSBcA4ygxb6CBVM38goYB/ql7MCKZdXPnHu6eLX\n2vQaYPfVAmffK2ysuTq6gXYHIIFb6UfaAj2IJNlWRKDQzz0iCUANQEmmqShj\nnP97zbaaR3jJrXNvj/sNA0mTokMWEe3fQCqLH27FgwQeBnyV+zcU3/udR6FD\n7hCpskT4WNgg84tc50cyE6wcv1iO1OCyGovKvJwnIrPiHsm7MawxwikN25IO\no55PJMtT2UiqYNdNq3VSJ5GF6dS38hxoe3p9wWjv/3MGS+H/AfysBlDN5/ak\nE1CRBQb0zpz6ykqNI2ItHdyDhydIliknDKGdljRBs1pAH7ZbiSDC+Rkg9fIn\nLbyNECL0zVh6HlG3oU+9isGCmAGfl+Ym5Wjx0k2IeHrrVB2zfCN+rezgGXbz\nVnbi\r\n=NOV9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"0ba27c4d5bb416cbb4e6719a1a03c6c31c1f0372","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.40","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.40","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.40","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.40","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.40","@storybook/components":"6.0.0-beta.40","@storybook/core-events":"6.0.0-beta.40","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.40_1593793530889_0.7684567416360937","host":"s3://npm-registry-packages"}},"6.0.0-beta.41":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.41","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.41","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"95604bc5d958ba58a2a4be4b64e8d38241d5f796","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.41.tgz","fileCount":93,"integrity":"sha512-yOVzorTImX996JZjXutzDIucOqhHUdaIkqF+bFNp3fyv5v2OBpt7QIZIht3+nuiOwU+PYb32mOhKcqdUV5kVjw==","signatures":[{"sig":"MEUCIQC87EvNJiDDulyP7OQJ9P5Qz1OWvr5qYc4hR5VWQtSVvwIgH8XaFnhhoPTZPt4kXMYbP+HiH41QOoejmXUsRNY9DJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfAC5HCRA9TVsSAnZWagAAj2UP/2unaRFxqWnGA+xZ/iS5\nHa1tevKtWYdw/5R4BBTlTuT/pdh+M67SRB9ZZxtpysrgIB/7kP47quVPb+8D\njSGhTWXTXLc+/6jEQgBa1TepXul+251Ljnli1K3TSlHeA2yRws45KiabD+GM\ng48r6iGlqQ1LlUoHebXH0p7b1+5gE/dzbkfOIwOdigXaA9cBgHeQNCIvn9jm\n9Yq79e1vFfBwJHaaEEcTq54ctN7hR6bXPqVzwQnazd3MHZmWOWmZxjeFe0f1\nUbokvI/r7E453WozGqKnIUYK0pkqzMhCeq8xv5MwDdvR6cvJu4i/wMUbg0EB\nvczQuxTz/MugL54z0MbK/uNxoJo8X6PHq8wk0MpmLCptpi9rj/vIFLBYpyRn\nxbvmCA7sS4LmaUyjkRnYV6lo+NegZ7z6q6NrqY5PKr8msmXQjBE3U1Jdz0Fr\no1nG6dap6F0OQ1VkMW+0j7cUYCyqZvjkgr2qpFalLuH4Ul5is3xvuAZlcg5B\nZacql5swsFrR7zDGDpT+tDJvZX11ZzP66rESgMNgiqNzP6vYopIa74otzGSz\nWOQDvFLGE/79k7v0ZsF6jRO4GuLk0J5yuWmrEy2CKCkMIs0/T/Mr+2YN3IYl\nEDU9OuKARjrj0F3x6mBYE8PViroProKRrTy/OgJ8KMTfSFCw0T3Jo0VhppAx\n5tyO\r\n=IVJj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"ee425c3615df11b4a2cd993d6beb1e733acea4f3","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.41","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.41","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.41","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.41","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.41","@storybook/components":"6.0.0-beta.41","@storybook/core-events":"6.0.0-beta.41","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.41_1593847367174_0.2631426103593526","host":"s3://npm-registry-packages"}},"6.0.0-beta.42":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.42","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.42","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ab198e8a8f5a08c482523c2d169cb44b903f09c6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.42.tgz","fileCount":93,"integrity":"sha512-E2bkz9zZAaBilC1NcXU6eNf2TmiCZ2V6pW880fLOrTVj3ao4mQjQKUodkvCWnVFqWXQC5RA03WtFM5Cst/byBQ==","signatures":[{"sig":"MEQCIDE6UJjt1aeuRbIUwhgrXAvgylvinnA5TPyrqJj1xWeCAiAmpoMqx04DZres7ok9fJ/ZpAgCK+xsNhdHABk8mENkwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfAVRiCRA9TVsSAnZWagAADtkP/iKvaC0ZGeL8cTx4Z6Fg\nkg+MjfM1D2iM2m3rtAccgnKkzzslzyaMoiL8xgZPnERIOOacf3G+7m0LLvYW\nkz0wsVKR9bbqS5db7muC6P5RQYk4d0dppbjXLCBtoWNY4LSZrY9ZPjoUgp3d\nwz6cMCwWGMoqM3XUyu0I8ZCGXi0Uttr5dXnGCJ1jz4tDnpHGq/iGmhzPQd1Y\nzj7/o/0/kujIT47qW4YyME0YpJV6hpBtw2KNSYkCS8IS4Gorc3TZvcu+Fe2l\nduEdKf8g0JcNfZekJkj4a7c290NCIgSptGRMWSUG2FXwLnRYOamEwia+HUjx\nNONRYUjPs/+HVFJKO68FV2ta3WWaMKGMJ0a4SWPOra8ZGeOqs2KQvNvuPKzz\nCivpVzA8bS4RGKKJJAVpmaTlUL2X3Xv5IWcD08Pj2sfPswZODfj6FCMywofO\nuP7N13sbW6rI4xOXRaVyXo8PYAl85mWsBeJVAsAY98wToBw0y76+NrszEC52\nnTJ/cd1Ykt1kjJsKMFMLWlFLoGt++OX5VDeYahLr5kt+7j8iUxx0P8CK/IvP\n5RKSVbAu0IhJfkR6TzngSxLTC8Awp8gKo18tVJP27lB3/gfYY2SfqTbikMLL\nRpWSO5wP2xdqUJfFpVlpCxNvqcmzckVDcan3T5LbCxj++Rz/sEmcaeFJRLHh\nzTtn\r\n=CTLl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"8b5427577af0a22c9a9b291ea7d8a3e96c3d12e0","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.42","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.42","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.42","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.42","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.42","@storybook/components":"6.0.0-beta.42","@storybook/core-events":"6.0.0-beta.42","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.42_1593922657738_0.7871746360644356","host":"s3://npm-registry-packages"}},"6.0.0-beta.43":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.43","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.43","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f2375a5840bdc3cf08742eed852dc3a6f93b2f1a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.43.tgz","fileCount":93,"integrity":"sha512-D20Hq9U7WwsSBZ9SqfKruag7XGszMMWxOKwYEDVvJ5YjvhS/f6norAK9RuXK5u2KoUePkoNTixgVGUuKAbP9Qg==","signatures":[{"sig":"MEQCIB839ggpo78IXf4UuIxoOUc/HUsdQSmXH/F1805EErLVAiA9HMAUNF++D6HP54e+I1mM16DGklZ6F0Smcxw+KQ7Igg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfAa6eCRA9TVsSAnZWagAADXAP/0dcQtFPiHbiOyZZQKuY\nZKjXcrHTtZ0MJP6qoH48HWrcwq9JEt4Hh8AamQquSPa2jHOynwyX99cPqol7\nrKiVXLB9dcgsYs/sjuQjRTrrwUTd9avdRVA12q/ueqAdGW8sXNhSqE8xXEfH\nrdb+eWMcyCcKIetcrnv69WoETRmVMU6so+6WdPSTXgqamdoYLIjbabm6kqZ8\nVnhyleIC9fYTRuKrEgaTJtDKZiW93hxTfR9ziCNKv/ym3c8HetQxxX7+Lix2\n+NfzNccbNHNBNEiRrcpAUl3fG8PEUNDGm7IbU7t7ntZ7UcR5NRTHyH39lAWg\ngBbPuFfsf81C4w/hOna2SSgtbhQ9mhxzMwyvXAXG2zMtOciiAyLiTdZyvrLO\nVwtyloB39bCsZHRX0E0THsY2WqnXrhCAT/g8CIZh2pSPe6MVLhKCSioXHW/V\nD+auEKJiALOvf6GHqwgPA0XGh2ChfLofVwA5VoW43eGiePxqk6KrE/IdE683\n03L8ZIjhzlo6YwgoNWFo9Zb0q5eL8R/clmUeC2KN5pjJWDK0DtZXp+5x5i/g\n3rNyN5Lo4mmJ87+2j3i1Gdn7kaUcSO4VFJMIeFtPO0QqYSZPg6cEL8pZf4xH\nPPAm7t373zd/Wd3oevS7lHvRZnR8uupA1Z7zViJHJfoaJz0RTPpBwRBPVrW+\nHbcx\r\n=DX1l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"99a191894a936ad0476117d857ca0387f2cd5afd","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.43","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.43","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.43","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.43","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.43","@storybook/components":"6.0.0-beta.43","@storybook/core-events":"6.0.0-beta.43","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.43_1593945758486_0.11193174719565047","host":"s3://npm-registry-packages"}},"6.0.0-beta.44":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.44","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.44","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e59688a738c85fefa55eb236e34759f89d9dc8bb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.44.tgz","fileCount":93,"integrity":"sha512-tqMTLFc7OcjYm0QNMvQDoo9G1UuZvfEVsDt7rf7QcNoqeHLTXJgHKIMcNYIH+1txMfeRosjnvJYIb0hAAoeTeA==","signatures":[{"sig":"MEUCIQDJE4N3z7kS1QHXV49KS5VuyFlpcdRVKDewT+1QPttTOgIgAuj/rjh+Yno9Eo2fqYKQCkA96LKCWv06nBcMcMZB4Ws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfAzVZCRA9TVsSAnZWagAAqn4QAJHU35tkqBlkyJ+xK1M0\n/sXj3wSjyq2/QNz2j4NLgR0qnWJMCUX1P4Qx0x6inKqB8h5tXpdxdi4hRtjB\n4G2XDfLC+G1+LmC/oKhnry+YmPUy5s+8S4dnoGWFkIWyKnywxT/sCdpFhewj\nBFpHHq/By+oyjT0UmEBO0ewAvav2KWFNnHnEemyMeBnSYDBhfnXA49isrTG3\nUXi+LUawzHHP2k3ZN29+TrCFp2Fqd7JcbGGwP6mHnICNcgvHN3RUTAXKZgbp\ndmjU6cH8mk4MUlK1kzn/ry46xu8H/6Pt4DilnQ98hmg6/D7w5AzpG2+C/1AT\ngTGzHfw4kId/VI5fW4qw7Fi2iAagSSgmD5gv8hnXJHYFo0Ovm2i9Je7PuC5e\n7yCEHmYsWSoDiTHwhWglpep+FkS+017cB6BtOPLMMSFFsk7xblwRcLH+oGGW\n5HN482HHHaIA7amxTTaeM+4fViE9a5IptOr9Tg53C7FFu3A62Xein/As0t+1\ntEH50pBvXDtOOM+VV3PFR2tNHVrq5zx/Q67aow40XhRirbN84n0xJvEQBCkI\n0K2nmHdWN1qfcqMmo3BBoKbMOeRBAvYOWTScKTMsCW3AHu1t3bM+yK3b8tE6\nTt4DepA8kYULyxLY7dQwMBl+UWzN8CybLdPeyHI9wh/dKJ8uN30+2rK2qxPP\nalJw\r\n=BS4m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"d5df9d126f8862293ce5a0dd9dd13cb50ea6c588","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.44","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.44","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.44","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.44","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.44","@storybook/components":"6.0.0-beta.44","@storybook/core-events":"6.0.0-beta.44","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.44_1594045785335_0.3384639942084704","host":"s3://npm-registry-packages"}},"6.0.0-beta.45":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.45","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.45","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ffe1e1dd9dcc4e0f0c3d301146326b3668d0f614","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.45.tgz","fileCount":93,"integrity":"sha512-61vJemhbkhnGzW4FNIoEm5IPEKUNQsuI3/+XznnN955rTOHThO4a0JQ0gmA1WYHKg8O0S0yxsIblDs16yoY+Yg==","signatures":[{"sig":"MEQCIC/qVFZYcLMHCVSLdhl2+8S+X+5PdpsGL8hclxmXAffhAiAPj0oL3ibpDd0SFNeo+2aZeWdi5mHGoK1QVlVrYH778g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBHM1CRA9TVsSAnZWagAATdQP/Ap2S6bffqrJV7CUB6I1\n7MCHaa6JQTjeRxxTWJb4W2NuQFlCUmvNlVarUniapo0hT3HKQxkwezrne9Kv\nZyiU+EulRZ/2UuNXUkov0/VOeoahGDNje+vzZ682UDGW8DSxq/oVmslUdW3P\n0c6pYF15A44Iw8+d/omKsVSyTUa1FV7/8pnU8utCzGB8UHyY3PqWYD1qooH0\nfCJAPC8h4mn87LVmUwGNjaNODpIcwW/C/+D2Vm1eWo7z4A9/gil7rEhWtV4u\noppbipJFJzRNHaljqcpSkue03mly4fVKxRO13cQMSuixcS+1XZJZrF5NPLmx\n/HDr49EQhWRFB508fjfzTd9YUyh+gURLIYaSpjx7y3kBeaF0Z3kFy0TX++TE\n/ZADnsIXpsYU9mxTKH1Igh5j1Qdk/rKyYUcVT+Epbh00J/dhreKl1IwUU9W9\nrht5V0dE0LUBYRRP3Kvi01oBvt2rq4OUkptaON5R147J699st2dJyF31zDOX\nWU+FFanadXvF06APsRfB5McWDHhK8gn/OKjiHWH9QpJ3S/lsII3gPi9pCELE\n+98rsDhGwWdYxQo3xcSUeMyQ44vDPXdHwZQcc2xox7TPS6tkwFfFswThZpjK\nOexksUygwjJ8gtOC5iAKa7wXSO3gu2nyetrcaElaGgL3dYiWT2AUg5yRELU5\nhrWN\r\n=LeHl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"f03eb04a2ad4bf14c762419e9c960a8906a0bba8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.45","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.45","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.45","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.45","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.45","@storybook/components":"6.0.0-beta.45","@storybook/core-events":"6.0.0-beta.45","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.45_1594127156796_0.7745512573589521","host":"s3://npm-registry-packages"}},"6.0.0-beta.46":{"name":"@storybook/addon-knobs","version":"6.0.0-beta.46","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-beta.46","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3d132f1e6386feb62e9baf7ed7245b2f2e150993","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-beta.46.tgz","fileCount":93,"integrity":"sha512-EUbWwp+s6yAHHGO++9YJztXnbP2k7gUjbamArPXSUUDCKJa7lkN5gqKVXEaJ09UuUfaSkLMvCHCKnMD/01ngoQ==","signatures":[{"sig":"MEUCIQCAEiTBeGrkFE3V0BxsRPmcu+oJNPP+NjfFC8vZfR/e+AIgfoW/UhyMG1eivb9ROjnjWRiARxI3JgtwJFbO9VGcF9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBYnvCRA9TVsSAnZWagAA584P/1jtKtS7bGkJkZm3MYKj\nTV7PWQ4Oy9phkK7dV3z4VCrPxunmi8+EPrbOLwKw8V6EE3kU05Jniy/3jtPm\nWSV31xFCBT2Iex4gzXwT3/J06wEhTq7RCTSLj4gWFv07RpqsSUPf5Komd996\nfoNOsKLcASSl87KyC1II5y3Ur9qg2eHvN2oxnopKugaN/JC9Bdg/hK2nacxf\nnY+KLgGJZ/CNjlooIzfGIY+TkwcKEhsglWIXXmthIAxQPH4idCCh/zizPs61\n7UPwR5DjGUUJi7o71wALCvIgURKDGBzUsNYFQu9gFfbsyWQuM1REv2qU7ZfR\noXR2ehdJAULde3v+YOdveVnrJsudDOjGqEyCdkyc1s0wkw9CM+oRp0ijTCCo\nt+/XfIWR+pB7wgvzLzwHM4d0j5UF0KARTeh0ZsEd7KaN1M20fDBmZiGBorrD\n8YHSr33YYeikTRUjG1+G99Ae8k9zSlah/28wbgiFEGekywA99UOkN1KKfroX\nXHahc2AX6/qtvHawT3gXHhrRI/YUw7z0nFBaqW/uh+7b/OntbhLlS+s7Atk8\nU8bvMXbNDzgQuyMCiN6WQ2jBAVQB8ZGUbdnmw5BGs8V+3IUyoun2nBr7h/nE\nay2UZVRiUxhMiVMiQZbS2DEsZtt/0K5WqP0n/B3PdhVlf3YHstWylD3Gfyzk\nv5tN\r\n=WZf8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"971b888701279d3e1c135b32d20262bf2aec5b85","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-beta.46","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-beta.46","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-beta.46","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-beta.46","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-beta.46","@storybook/components":"6.0.0-beta.46","@storybook/core-events":"6.0.0-beta.46","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-beta.46_1594198510598_0.6776688355291287","host":"s3://npm-registry-packages"}},"6.0.0-rc.0":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f615a67ace8399e6c8ef0a0537f9f6455f7f0c67","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.0.tgz","fileCount":93,"integrity":"sha512-/ev0a4zZb87gIp99qTfcSIkk84zOkInyZlWQeh6sahm/UAd5E/Hbo1L0v7CENBJ2Q97FPlc9+2VLCbxhVDrd2g==","signatures":[{"sig":"MEYCIQDUG1ElE7LB/m48KPcDKplafLQ1jcchH/sskF0f9EYJmwIhAIvqCTk8B4CFaLKOsWF8uDrh2JIe7El7ftWNIoe8kBwr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBaX0CRA9TVsSAnZWagAA4E4QAJd8tGyGz3ZQ6HcEXJ5m\nFMgdpoXUpwq1mfKt/kGTqbrIzf1hhqVOe6Uu+OxmtOTDmYMRa+FVe8IcIP73\nOMKh4Ic7bsRL0YuSOc2oGuiBCFy9ESIGRAffS/nxBC6LDCv/lDFC8y0sB9Kb\nwEEhmrlSELF7OGfo8K0j0vPU7tbB0VJA6prkq5kH2/uWDCZS5RqMj1V/Cs6O\nu2KJoLxxxhPTRpHWpVX/6nlWMt5VhR4Sjfg4ckoSEdij+1NNbhmUAQibXHSV\npP1/04uVVofJX5bIn8z2qePq+/2hNiDRh9ASpBKezH2dwPd5piURFtqcIZwT\nu2ahnY3/UbucTorN0i170wrXMC5kfSdio4drpqi3l5QuahpsAWhfIRYFuYLK\n2xGzMpAh2WnEeDQR3RbWCO4K2+t4p+PhJWipZ29ihYsLSn+rAvHATDTdgenQ\nv1rIHP5N26A2+XADxXxjavxQTuGh0U6dX+mx6trMH+qdueYPAo9sqrpiNiJD\nyzBY74I6s5Ps+YMOx5DqYfb2gnYGYohOfkXZ2NRID2mwdGSnimKL7jUtHj8Q\naEaYLnohM72vjnh6pohxPhpRzI0QqfQYAoG/0ibQP7PNVlojs0CdZHL7qhr0\n95GrV5tuy9jZKU0jEkNoZTjAZcAqIHW+DiHpEG539Rzy/z7ITLciLbhUcQat\n4xpW\r\n=826Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"9558b3901eb79133f758530c1c4c811a5e86b7f3","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.0","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.0","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.0","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.0","@storybook/components":"6.0.0-rc.0","@storybook/core-events":"6.0.0-rc.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.0_1594205683861_0.775544195518709","host":"s3://npm-registry-packages"}},"6.0.0-rc.1":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"997d7baf35ca370fb78bbbd307d8a7aac45edb29","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.1.tgz","fileCount":93,"integrity":"sha512-rrs9B/45Ij/u5WhXJpsDVc5WYxbrWOTjCGVC7AFY9C7m9KDwzDGU6iQJEulsMFoO/U8Q9vexbuf4S620AXfUoA==","signatures":[{"sig":"MEUCICLzrZwcVzs35jkonwbUixEnRKyX3xpjLRyghvOa9aWdAiEAz7c19zM80f1WLG3ysk8icXLdVLXPYcXE8tvWs0tJkvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBsbICRA9TVsSAnZWagAAAGIP/iRUdTB5j+1xpAggoHF5\n2slUnKEyWkWSF1cLt9iDLObr/aSgyI4bNsRgoWCrrl3pVwjILCX9fIXCDTZx\nt8jDwTjT1QE/al0rb2mtK+vjdRM6vZQFKxqCBKWlTaDezL445oR+0GZvWSYZ\n6nvF5TEyipUP+kr5tds6G+JDSX7uHOXfxnL1DWOZiTp20c9zkU6GF1obeaep\nmBz/lqFiSUr1bRZeaAnbdAH/d1AUBFHXyhPRstX6uuSNFetmz4YbMLU6SvUY\n9quMAT2pVAEcF77213gvdZEUpRg/WyYnLi9r7g69Hr5lWsFMAjim6h40W4E/\n+NjtMTJ3HWjsaQyQbhB17vzonNkKyKkfJpHcJKdOk7ovKwCUzEoNmOkUy5XC\nW39UFph6SJyhLrbIFyeJI+KsLXQ/52XNvZCvbj3lQJdXRdmfoHQ9LLu9z/fU\n5GXoa6+PILf3XcuQu5PmLQOpTwX/fIhyL4JZEvyhe8vd48HZIrIc0dGrQEH7\nKcdk5C0HPHI4KDVio24r9sOH6bMgsfV2MRIhD0Bci33xz9AST5/PQj2BZWuO\nreN2BInbU3dxX4vWPZ1fmOWQaeW6Fdx6vwi02ymUhC+pNjcIPm1Poj53uv1N\nixmSQQorlb8F4eXCq/nVF6C4/1h90+vTY60dB7AYRRyVdW6iGV7u9H3uJtpj\nj/ia\r\n=FnIt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"9aeaf80a2c224e4f3dcb66b6329280c4cd73c017","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.1","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.1","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.1","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.1","@storybook/components":"6.0.0-rc.1","@storybook/core-events":"6.0.0-rc.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.1_1594279624173_0.7097311614518163","host":"s3://npm-registry-packages"}},"6.0.0-rc.2":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"bec209637822cb7ed57a8e4f2d1a19f518266b63","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.2.tgz","fileCount":93,"integrity":"sha512-uyyX2qLcu3sPVsqGgEcLPl5zrE37lu4+LHkTJeZ58o8iuunEaRCm5Fd8r+Qy7srWqQU8rZPhXmcTYoc6fShNWw==","signatures":[{"sig":"MEQCIHFcunobXWMDg+w/9LVmtrC50vDalM5IWYuxTKeIrxmLAiAGkV2OflLbzjbhNbr3Fhp4XOryUDHAts2pxemLS3eLVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCHaxCRA9TVsSAnZWagAA5bgP/2RxSy5hGnvCuPXv9nCv\nqNPgFELI83sGCISHBtLqaGBF46iGpTOC+NvMzU1Pehd4XYuqZmxFQ1SnxSXo\nCxnnbZ4Kej542Lg3YEigZ7bxDTdYr4pEMZ/XnDHRVP9cRUpQ7cs8W0YtVGVw\n/dFNJFzoNpSYXoWbTvzYq48r0vyS+vltGj2FXgXm1VH/kfZJqBIV/AZw+JP4\nNmIMS0dTe2F5zdTUHKMaMwhhkftH57oaxxMy4lCqiVSAxLeEBF0w7toWJfV6\n+T4ol4S2Nol0FDi7gnvwpHma0X+CWhcOb3MRGl/YCahRqV49CvETu6+bDUG1\nlArGbzYqEdM4MtN2Vsb2ALD+ltkdrFXj6etfgPg3pbk5hnee/MfcjQk0NXq+\nUqodlrTjUAcDRp1rChugaVW4CdPYGZUHg2A3vUo54CJhD+oFjHkA/jPLJTS7\nJPsdZ2gp0oh8HzAZc3w7OY0ZYfn5MmhlIf6GuAqZHeAQuuGh2flcy+maGSn0\nF7X0/4gNz8lib0ZS9+q2QhQQevdPCdRoCHl65KiSWjWTZoEGjoxzkOqcpF/u\n9u9jSzuNUs51tgwe52kAgdPPfJlqSPUzAs4hZsTLpFmKL/c1FHFl+ZMhu5Yc\nfHLyK8lq8zLMMvt+/NRORuESDuQjigGlwMLhFQvD34v1BSJpKLI4ODaiKO57\nvwKe\r\n=z5i3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"1e8d1b0d027007f7aba09d8e6ba50de77c60e94b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.2","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.2","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.2","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.2","@storybook/components":"6.0.0-rc.2","@storybook/core-events":"6.0.0-rc.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.2_1594390193338_0.3127730620914029","host":"s3://npm-registry-packages"}},"6.0.0-rc.3":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"828c050186afa9809af79cbce56d9d7664479dfc","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.3.tgz","fileCount":93,"integrity":"sha512-UnJ8QCieSekbfe2J3ibqgAXgHfn2AJSTEHWl0GZJgzTgOkT+Aj/RYcY9gwigznYkIpsziLKDi71rYL6LyqGUGQ==","signatures":[{"sig":"MEUCIQDhgNb4V57tavT1y0PDxMW6XCQ6UuUaMtBiUsnoP6/kEQIgfZQHmdCr/cmEwsxm909oRkK8yG86xL/vU0JmZ7BuKv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCXmhCRA9TVsSAnZWagAAdP4P/0RxnF7KwMIKiCwwQ8/e\nFkURPR3rgVW8ef+m6rgoYojB/YEi1/9kO3sbbAKQYKcVnrDSna/DUOVNPnJX\n2bxrNSAfG1qxug1p2EdgPhFw+RSAz8sdEySALfqpNf1JrKsZsUm5PvUiwVck\n6rLKZBOYxr0L8X7lH3oZPPwt8292QRAGDO8fb+ERFVbvhNwmUNUbtTITS49B\nufM31XEzTKp0wuiigLJAouqvpmdLeDfdLI+KabNm7/XEHpjUguKJP6YKzj3B\nutY7+K7qru8asjOtppHNFuos+JwkxnrnyPFvka0E9FETllxKQlxpkisqrb6b\nC5jzyNMXcxd4aLGmBvAceTMKlnjCqjMlBI7uB+/fWzIOe/6+ZgIYCWH5cCZZ\nzLm5B0BQeKD8L7IREyOaNiTCVZ8b4OqVD5JUTtybwSP5qkIt7NLE+7zb4iyT\nbFLUm/R7DtVDwWzCeftflvNAyq59Q/+/S9xTjjHmVdTuu1KAnSSuEGetmaQF\nALcYptSzBbpYHOQVEnygsRYJRYitVWWT6j0JmUvrl8ZpZQ5jUvWxJRbk583e\nMrpNIM2ZIJsXegi/VrAkUNv9UVzjD/shZTJvq56siO1q5Oe83VARiY88bwt+\nErgSjdlgewqPayXcyjsGlvZk2J6Z4sM2dS5k2VlvxXLnzerIQ9cUTeG4F2FQ\nFTmi\r\n=HJ2C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"d7b8606ca3b871c91ad321b407c0bbbe0475dd56","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.3","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.3","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.3","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.3","@storybook/components":"6.0.0-rc.3","@storybook/core-events":"6.0.0-rc.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.3_1594456480972_0.9426018377608569","host":"s3://npm-registry-packages"}},"6.0.0-rc.5":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"5c1850be6fef60780fa24b2fcf92bfae9d4fd216","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.5.tgz","fileCount":93,"integrity":"sha512-fQGj5IIaiCEkknVN9dQpzOMU8X6viwp4XJJI/oLLHTpBEkJgRgtHBsK64JkgJXrW5CkmBBoKx/YbGtoKrHFWtQ==","signatures":[{"sig":"MEQCICekuIrCiNecRhHZv1Xn1cswd/V7uYEJnO+tcqi9i+oxAiBLvGR4+U+uURiD97tyjK8po+Pp19cen9ttBCXMDxreNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDvt4CRA9TVsSAnZWagAA1x0P/2U2lYJW0a5nSc1MWfNW\nHRFTw/qNMevVvo98uNHvdnMEO3Kw8HGNwQ7ObgP6qDnU4xykVRp1334zvn+2\nelrbfO2OnD3O1N6KFDjcfN3sf8/ysUNVlqwONb6aREEegVfWMWU7gQsFA6On\noDm35bmKMPUohAqPtJPnB0Vxq0tEQMxEhXN3rlG2iwWfVnWf8ybNGQM8tlOO\nv2Xk+77Y7dLkvQEOPn/tAEdSiDC3MkGgDHNXoskD5xCLtC94ZrR8z7A6vX+X\nYuI11KxZ5ca1UmJUr2Q0+n4MmmZgm05fgTt0hJY1/Fosk34wFZz4MF8Mv4CN\no6kGB91QPixgAWQAgNcO8BwD/sgvWBr8m/mI6f1MscpUNQjy1/nsMaGyBono\nPIek+GOTBdcFCt0Dm8y2QmSyPv/Bqnen3oL0VtFAIxOVSsbZhmF51RP8Cm5c\nfWHSjRpXr24+K8QB3aDLQQs8NAmKrBQk/7fWOc0DiGd2Gy/oGYOP7j1Wsb+z\nMlvqAxwHIIkz2RB85nJRPvjG/n7SGdtKsNZxL8VnCWi4eO86Dy1PeR5zCjxq\nsDdg1qQczy9EZTdkxvleZwRCZI3qeevnfbJrdD1TGDXu9y5M2+aEyy6Pr31I\npzgw/8riNZ2AQtlf4z+p3Ruvg2Grfq9b8SA7iVH7NH2lVC11sVa8F9Cld8zB\nSzas\r\n=g5v0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"747ced532b90bf7a6fd9d5289d9338d25064e764","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.5","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.5","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.5","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.5","@storybook/components":"6.0.0-rc.5","@storybook/core-events":"6.0.0-rc.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.5_1594817399785_0.9049482013020669","host":"s3://npm-registry-packages"}},"6.0.0-rc.8":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.8","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0e48ec8c446d883b8b686f128accbe2059d12aa9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.8.tgz","fileCount":93,"integrity":"sha512-hGVuxYZQ6p9zM8VPsYKih69bsgBfnuFwmoPq6LrrRHD/+qxDzGbF+e1XxAliFFk13a7gj3D0Uom4UprtZ4KkzA==","signatures":[{"sig":"MEUCIEAI22PAjdVTQZ47vgQwIMt1Is9Ti/C7jtRzYCKb6ueBAiEAkJ47Lr5EfPyncZW4c/OAWBnt4b6qnkbIXW68CK5A6aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEEAPCRA9TVsSAnZWagAAE4gP/0GqygtMNAUv+lHUlb86\nu4DgeWDReZGFs31j99rDl1nL9JIOldZPMBfzHMaX5V4dpV7GsZxqFMkrAUoB\nO7pExbtUbitIWPkr3bsSo1hZmwTFgevQWPU3rNwjLxjfrT082AIOU1BtRimT\nTdDPD1Yl0ZnOcqIU6hqPlx8LNmUTuy5q3C7dwpa5D25SNqZH5Xl+XQzE3Krf\nT8cRfWIUGvc+Dy7bFPRmQpiDmNJQmX+QoZfVUYrreYKcJDEXRngQcfoRabnA\nLI0noSZ6Oh0h06jElStsilVHD/QFAm3pfFhjpd6FawPx6BNJ8hqj3A9b9AQt\nneZu5xUtVEX/tx0xRDXdZpn163K7jmteXtqL7zA/dtpeZRu4pvYIagaZeV5p\n7+8ppju/wCjIxFldTI79IfaFbY4RGVrYWf0pfYVi7ZNVgSFc0mNZw2LlahFY\nDST48KcO6juOdO2vEcxwcA163sFmt5LE3cjKOdW9DizBMBOyPhh5GnYKGEP3\nJET0YsQU31Q6Jva7M4Hb46QJLXy1UV+z1vTSAxETVM8DQrCebfq6hpzYs3gl\nk4j/xdxhF3rvYJmTirHEb36Anu/KCN8pBvyCM8Ij14ttoGcdVr/LfQad/QfZ\nErs7tQG9Oe+m64HHs0XxBfzowm9h26cGBXNdueNU720Gtu8kjDMNqqjBsWlA\nMyqB\r\n=ih6z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"eab66aa5f27498c4326e37087185048ad224dbd6","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.8","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.8","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.8","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.8","@storybook/components":"6.0.0-rc.8","@storybook/core-events":"6.0.0-rc.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.8_1594900494621_0.8177466708495238","host":"s3://npm-registry-packages"}},"6.0.0-rc.9":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"7b176f7ee2f63100957d714e849a088329ecd071","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.9.tgz","fileCount":93,"integrity":"sha512-kxrYYBm4TnVPUnNhraIwpNVd1fQ5dAh6NUWsiOnUtTkPUQ9CGIZ+tpe1Ohyc62FNgx4lz0prXJR/iQWKxdhi8g==","signatures":[{"sig":"MEYCIQC/88zAdEsVYZ3g2LjqtG8S5t5A9BS3ofM3RZzeYsXkhAIhALIcHFX4Wejn/Mf+TDJpTS0sDJrnJpPdJE89OfDXBVHX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEbjeCRA9TVsSAnZWagAAkIUP/3HOIog9ZfwDg80pdfbR\nBy+yYJJR77dayKGQ7L2Ag9yBgsaTU1CFubrE13R9NGX6MtCuPCwn7d8VbYEo\nFYrB0ik7H/8V851yzPaHAOsu4HJArEAJF4heeLc0Xi8RRspoHP8wO0H7EnVO\n+QblOR5RmCOm3a6SbX3cPGZZIBGBVFzugqV/waF8kjH1pUmlDPxn6RGidVdJ\nWV91gRI4CPQsVHWqCAl7RphaGWThsxmUQD25aW/5FB5si3xzWr2BGsLrgMR9\n1kX7I/JDwQzt3prE2DkRybotA3OkLgqo3vLMAvK4jOMzZGV7GsjtBfXdGpIk\nx7ubvHXKzquS5Jamfp95pPSp4+jR4OFG/kD9H3nhrmfqVoT+Hg8q8xEuW4bY\nfk9NqR7VcXunEdT1EHMqhQNvsBmcIiykixD4XsHd1M4UxXOEvggvA8+btJSI\naMf6anKQAhJfLEwA0QHzuZ/Pr4G+jC4PgLHANk9odH6dOShBVMrPXNBAbrAg\ny3U2BkCtIFjtX0l80tko1A/T97biBfUPbNvEs1fD5/tB+qjeSLei1sMN5CGN\nKE2I2MLCjujxXiap9/2O4ht+VT9RoxSWXEaWzw2FpwlKThWw0T9ykaJJBFPD\nuusGMmmztEJPhZoMbBNFmCPi4EJl3cAHUPP+/HTW7UeH4lgLRY1U2e0NmkWB\n2wj1\r\n=Pg/K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"2e5d8431be9d0d3d9d2eda95724f772d980640b9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.9","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.9","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.9","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.9","@storybook/components":"6.0.0-rc.9","@storybook/core-events":"6.0.0-rc.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.9_1594996958130_0.6043073117934332","host":"s3://npm-registry-packages"}},"6.0.0-rc.10":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.10","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1d92115d22200414ca3b1c23290cdf6766d3d233","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.10.tgz","fileCount":93,"integrity":"sha512-9g7SguBt0WQFOnif2PtN38SGxjy7fqLZkbUjPCaqLYplT0o+hqNtw9WuF0ALn/hD5n1K59J8hKkh0pvfkCpQgg==","signatures":[{"sig":"MEQCICwmir9bMuIjYS2OJmGb00GyGUI6jrFZGLHQlBjIHhWaAiBAOCpvpb3XWZ9pALRfsaWgScYw7vkvy5sxTykCcQzVgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEwJBCRA9TVsSAnZWagAA5OgQAIBr8e+5/7E5K93TJ3hD\nxSK1KJAL9mbe+/X4ccDVcSdEuDY9jzbKdFduBWC0ZoypGuMcO0OF8ppXJqv4\nZxNdV0OjTucXn97VtekZjo1kNBJm5Nd0TfkQpRnn1u/gw7RVatWglPRD5U5d\nKvjDaeMFqiDt+YHYPiFODE7oOwd/dJ5XqJF493T5gdawR2ajb3M2kwVbwfZ/\nDbgY8xdoH/2E/OaPxmdhktJqXciRTJw0Xv4ekLidN1ooFQVixi7tjUCMr8Yj\n2cmZZ0wYCyobMurPGd6T5JHe9k4dbka9VQPHkzjqugdoRNro0T20/ZzwPdgk\nJfd702C7BxbpmBoqBqKgvr+C2Rzf9eZIT3ygl8/97eyumdSfS+6EVj9eRZbV\nCRGF5hlaI9wPonQxTGrnk1Iz2mZeV6qCt3iVce7ZEmDE9W9Hzr+EKLUmcDnm\niMOYM0JmXbk4W19NrLEM0aUpJXEg9R2cSz8SpaRzAObRk3Zya0xKZsbEHUh9\nbXhVo7FBbm3ZlRC91xF9n7ijRaZZ2+dJ6Ldswl//U3zly9NamR5UEOl855WX\nihE5Q5Akn6RdKhEVJsOZpmEkfobKSL6o5y6RCCji8K89njAUDwh8/KCtxWpt\nvN5mKeInIy9j7RH3dzdaa4LBkiAKao2Z/3s9y+XunKD3xXLs/w7cTUBqFZIY\na1jb\r\n=ndi6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"1f0309cb5ff737b40dda25e770fb63daa8ccebb3","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.10","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.10","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.10","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.10","@storybook/components":"6.0.0-rc.10","@storybook/core-events":"6.0.0-rc.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.10_1595081281055_0.5296665151427891","host":"s3://npm-registry-packages"}},"6.0.0-rc.11":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.11","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4f4cbbb51857961bc0b79ab4a9ae39dfe1e035c9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.11.tgz","fileCount":93,"integrity":"sha512-U8PLJcn/qNsczCP3/7WcHVK86UgjLi3gu3Ju6KTgIosiQSWYoEE1sy+802i6InB17ZOZXMqQvW/MOm8vHJLsGg==","signatures":[{"sig":"MEQCIGTDu+QIovCN9qp3BFUbaV8bO9JPhnc/Z2F0embjZvunAiA0dgAeA6ePlkKENpnRlazjohtk/8If0kXqVNYeC67+3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFA25CRA9TVsSAnZWagAArbQP/23dGuTIKTAF/DoOj8It\njxremgHnAK/u2hXDTcQtG6/apVO9oNaNb3FWnYLowCNWXkErBJLC/kc9IyYc\n3nlZtcYliRT4BvIxy5S9S403HZobeXjd3/ETalSGzNJZxPMBRXn8pUe6fvad\nTbnmcX8e6fmarTpoc4rRqTqLfGfn1krT8vABEeLCyVv7bU1DbA1hE19CCkQ1\n+2TUn7LIZiApjH7jfyARB6jZkBh9vigVIeisJS50/9nLO6UCVVIwQwvul+Iz\njxSqYmqgmRLnMW0LcVIIoaRQYQOYA8HsoULv0+pul3mePVB452KY4aX1uuqf\nvRSwVJKeS1OvXhr4wXmbOBHI6MPwdkTDn/0DE9FgYqRP+rlIL98hjePQYqiU\ng4xzsPTnzje56XcwAGDPuzlOyfNHvZE+2ElClNSseQjKDMmdIQMmKT+/6eo5\nGZasE6QM+yOJfq5aaiuSuM6xB8C94dVemddBMvQgXIvlkpciRYdmqobEqXQK\npB+P0EsMJgRCDqTsf7wAkTkaOk40NmAR+nwoadP3kKkV2G5ZNCSTru7U/1EL\nOeOslGLjDh0/T51SACIM/ZnfVws8WyjIPRD4/6HMoDjiME4dRLnCcxPZ7esm\n/WUxq05yBoIqLNi7kt9tSdtxCl3MnmIsvLtl+j4uRaAK5GJF5M332wh29lTm\nQ8M3\r\n=e5UQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"24e238da6e1be075eb83f67af3f2f5a7eae923b4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.11","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.11","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.11","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.11","@storybook/components":"6.0.0-rc.11","@storybook/core-events":"6.0.0-rc.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.11_1595149753084_0.43937843825097955","host":"s3://npm-registry-packages"}},"6.0.0-rc.12":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.12","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c69da6fa74f636a0b3b18b0d12465250b0c15ff1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.12.tgz","fileCount":93,"integrity":"sha512-vqUMQF+oVD7JEo55vA86NJ9eVOqodamAx3zBo0Mw9v4QoyYelAb6mwZDyffYGEw8s0m6t9L1nnvt/cAEAhsO2g==","signatures":[{"sig":"MEQCIHsphsyL6CgrZJcU4r850fZIeHzGqMclbbxB10zClBRlAiAPTaxLBYimn0DsqQbZgqnNebL8FdnfnJf6AYj+O3FzIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFY/qCRA9TVsSAnZWagAAJ8EP/0huJbOTHdBnqmdVPzQj\n6ZUr6GBdU9EcpMZs9+F30rMJFvqSMQmKcfqIQYANFVVr8eYrlIcXFdTcVLmw\ni+fHQgixLgivpugxDCDezr4hkJCYcAR75UHOEjxEff0SrhGx1fdvKRQysyk3\nIOy3Zhj13WSk90Nkw4TsZ3kl26MjgjMBbKG/B9zPwS5VCd+dbt9rgrwg8o47\nxSgkgoFqFof0WX+nzbejEeaKxl6in54/Qe2B+ireAldf56f9qhJHOCNh7WXf\n09U2msDSANIXY22ERrJhF9JuxENvZx77v/+/BsGJihppGWUh9muyGRgGx+a6\nQWHGr/pMqqtgzQolysGfq2Q61kOlgmkQWhCVTaE6b0gPNGK5yohjFtb7nzA/\nemiI+H04948xBaz9KoSErDbsSsdqvrdRpRddPlBKNBnga9QkTty6hnmTzU6q\n/PsiUH6NLZgKDrvdBDZ9p08xRsnhJrkPfNTLvBmX9Um/wY6N/73mS033bzgj\nReBjbGZcl8n00MSnpYQ8MNxX/CuFLfbo0wl+eCJ5Y9SV6pOw/cIgaztY4JJV\nAjx+/rGxC8QrljURl2j8/Rchuv/ZnrNhFRN6cxoSvRkfdQTMOtsfbVLnclrC\nF/zjIn5Ds+4s6GNBCr8gX371Zk7M1pNwWg68zOZ3DZ96cQhNRgySYPwxBedj\nvy8i\r\n=xAFP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"7f48e2852608964b1a287a0a2c36ca7386a56a05","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.12","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.12","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.12","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.12","@storybook/components":"6.0.0-rc.12","@storybook/core-events":"6.0.0-rc.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.12_1595248618265_0.7498671216762702","host":"s3://npm-registry-packages"}},"6.0.0-rc.13":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.13","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ed6f9c66061e84d1469e76eeddfe223179fffc62","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.13.tgz","fileCount":93,"integrity":"sha512-qvD4tY92OZyiru6vn7A78tVXfJIRct6zQChvMt/eSHg+YhMMsFgJAT8BP42XxgrXnpE2dhU1Ivip5HIR3NWbZQ==","signatures":[{"sig":"MEQCICh+rkZecRs8XhWYdkisSQWunL2kgnWtJxvAaoHRs+bKAiBFZtB3qiLGqgOyowLpBdozbPPWwMsoemfv9L2DqIkxsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFsPSCRA9TVsSAnZWagAA1FkP/A/GtwuCPZk64N+VwTss\ncuu1r761jgUDpxOMcR0RNJb5JXuL9lAiUKGuVxPJAKoTWZM1uXR7oKq7hVCo\noaWJtUDZ9thW6DIXEzDAiGxf41RRYzFYqHzFz9qgioVE2AZNHiNlmJFtzVx/\nmg2mBt4QvltpE2KUw6cG2wW1HNunVw6HtP8LLdWj0Qxtxr0BfS66FVc1uFWn\n/tudLltTIymFMo2YffVqkpDYx1XQdgM4RKhANWyoUwjOokM8LtUk+i/hLgDt\nAX6yMN/QrBTUIkaA1CXR+kGpttqkfzLSNhZRZ0B84Mv9OO6IXbUbG4ARPjJs\nOQuNM55piQK2V/1SmfXmmRCfhbMnfZxYw8FmzSyfydYS/dixsIG4JzqMB3uY\nwuAo6W8NHcaYQWbxuA7vs7uURLRPemiJtJXFGQEAZvgGJwOh0zKZYsuC+Uih\nRWYTSQ0KJ4l+NWOsy15aVbqhKl6Dq1kxA29ixhqK66PAxMUI0JV2cUuxO4Iy\nX0qY719RqJe13feZWGqzWkhhRSMjSrwgrYJGNxNVbSmNUMKLD9KBn0on0CTO\nMxrwGujn0IzvNr8xYvHe/Hal2JG8nSLlyb9XWfC0c8jloCNceMffs9oX4lTN\nKR8bFaMFRY+j8xzkPFwRQl+rbmWCfCsO0N7FygyVG1fY4dAQ7Q9dY/eMqXVq\ncX+D\r\n=LFoh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"b5a70c7e64cbc6ebec9454d0dbae7c0eed9db23c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.13","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.13","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.13","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.13","@storybook/components":"6.0.0-rc.13","@storybook/core-events":"6.0.0-rc.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.13_1595327442411_0.2231098985994242","host":"s3://npm-registry-packages"}},"6.0.0-rc.14":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.14","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"da0baabe5645518db4eeb70f143e4030f3cd8dce","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.14.tgz","fileCount":93,"integrity":"sha512-RXmsPr7fsyDyVpuuSp8LRfTwubAIIK2LTB9zkHZxtphcPSBPtEZfCT4dCvd2+l2xpVW4wfB7TkyaPL9fYu2AAA==","signatures":[{"sig":"MEQCIBYqZVSU5YPLKl9ygkNcS4uns0Z/gwWHjA0prrsvdifbAiA086sIMlTk+lZ/t7pFFFmyQYrNqPmWiRS+eFASLoEyMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGGF4CRA9TVsSAnZWagAA/BoQAIonPoM2v1g3osczzRgd\nftX8orBRbwSb7x7OdSZICc5e6OgkXY6OHeUjWyRfEqZu9MYhNYxXdD+xCr71\nMo/29gvwTP0xpUyaYDo+k5dWDg7IzgaAX/sUAhcTMoMzWSeNaHWV7twtvfkz\ni4aH69+wwfuuHz61W2mQ/bxqHxTTAzWHEbSqRyENSE01OIxlzIRq3misFGAe\n7jGNEn6nohVXah7U3/xusnNEYJxnx+WD/FjKyY7TjyOiDUMdk4UJimTOmFBK\nC1W6bCAdqkdabdKEu/0maLq38n57J3aVzmaqEQTA/6c3UWWP+EVjx8vI8fxj\nClYSY18mHoWow7ozxw0XgL7bmv67ZXFeCkNNtDWSc6r7oF4m1FF/GdlpERQj\nJp9w30HyBgMqg24WzQ4xe8ar/DcnloIDAGDLl5hVBNoviCb55MPsQ9lCjDYS\nYhhMRdaEihMKj4a4MimddQPN6WEGfZEa1CCAyCA4wlzteDQMs7t+9DGF/wtZ\nVgpXPlFPOOdbYoL8GOGQ3ttldVn7wNNidSnYtuQPjx/knW+82b+qOwr3o+Py\nTsUMcq9+IBrh4abCYVyHaqsJA07/0trQrCKkFd+Rdd5lXnAtGogDtFYvLGTS\nfoy5ZVFv+mfa/wAEIdBBt/On2fDlqgEApI43FyouT/72knOazufBjJggggdO\n202c\r\n=11FE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"718fd4614223ebc427911ca5daba122205e63f55","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.14","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.14","@types/react-color":"^3.0.1","@storybook/channels":"6.0.0-rc.14","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.14","@storybook/components":"6.0.0-rc.14","@storybook/core-events":"6.0.0-rc.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.14_1595433336524_0.7609038128060897","host":"s3://npm-registry-packages"}},"6.0.0-rc.15":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.15","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e57beacb91902b9cea30430c865bbb3496aebca5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.15.tgz","fileCount":93,"integrity":"sha512-4XFoB+3rKuxHEWtSUiyGVsLbk568EsCH4d+I9AwOmXF4MYDgWTmgL4cx7Ot4PcWlZ4R4STg9c1/RZbZyB3HWUQ==","signatures":[{"sig":"MEQCIAWb7+Iaatlf4oQKhBHt41Ga3BVocDRxS7Q/50g/EU1+AiA1r4nPHYCE0f3WJBfC+mY2ly9BDVjOTl0OCD25Hny73A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHl+jCRA9TVsSAnZWagAA/C8P/3/rQaTd11dTTNCiAiJv\nMqIPpk3u7kbceVYtraW6sgksuIo7cwqzpBGUsvflrHEiGu86rQjF5NMTpsA5\nktrA5aMB+2czYaf3MQgCCXGzp+w8vr3FoZxvXBdVFOt5mRLuHpq2Sli2fISM\n/4OPrhCsOfihE0Jp/RYcfD/Myh/Yy+vc7yfK2yyX7fBBpr1fIvkV7xxMQub7\nKLNHIorOmBi/Qsx8CIHeZ5dT9G7wtn54pCw0uQ2c0IiPxM/qaG2fwZSkiVhC\nyuUDx52/iWlkIVk2WZJGUako/JJENvzcp9JR0DtcMHHp1QAt+BcUli6AqRnG\n9TPJ5jlLB00IJK7Vs0DTmBePSi2+I8/L/6k9oU32Xt4O9f5PEe/x6rWCRzJi\nvb7tWHZrtjI1NHL1J04F746lbi/2p7GkLumNOLnHbYN/6dpRxKSX4Ev/UGZn\nr3ozKA+JJIchbTd5C6oFRiibcrwQEHGiHHHmoed7zLdP/TDNf0ucuGEQvIrz\nx33q4UVDFsvby0/QVcnRccW0011yl3W0aY3FXlmZzuyXTwtblNQfTTEjf5mU\nspaHNMHM7LfUKMRXkkxxBci31eo88GcrOwkv5sC3yy/ZbSv/D6srrK3zEazK\nEaFyM94jxccmIQ9/fzdTxdu+t8EQ7eP7+zHI42ltKfkHoqSJ7mibovW1fO6x\nebP5\r\n=tuYg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"7354abe09cb490f732384d8500f0df8be2707611","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.15","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.15","@storybook/channels":"6.0.0-rc.15","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.15","@storybook/components":"6.0.0-rc.15","@storybook/core-events":"6.0.0-rc.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.15_1595826083600_0.44054534046780636","host":"s3://npm-registry-packages"}},"6.0.0-rc.16":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.16","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.16","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ea33e6ea5a308a200fd3a33f7a246fe2aef9d184","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.16.tgz","fileCount":93,"integrity":"sha512-ypVPBHH+aWhO5QNZ/pOxaVss3E1FF6aHceMhd6wuZcc6/LZjiy/4FcPUzdB4dLQgVnTr4iNDeLPRWIDUyFa/1g==","signatures":[{"sig":"MEUCIQDEppRJO+75dOF1hNZFYZ6N6Bo3DbH0DFkrv8EATiReQgIgCJ8r3p4HgMAFf+Acbru4HOTt/FMJP/A3M5JD/HM0PJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIDZsCRA9TVsSAnZWagAALc8P/2IXx4q+8Qy89YuqpzhM\nE2lUDhMcJpRGhweZrrsqYvPyaCNnpw8W+eAW2JJtgXPTDcNpYzteqgIJdzj6\nXIpTvgRRA5MDA2jdeOWo7qlcdzivVHO5q+Jo9mDuvAALVtuHo29PRi4PpRi9\n84ZRxhvM+uWZCD6ZTxDNGNoKhPuBzVE1QOA4o8HBu3LRypRtbSsFiWfxWJCl\neLOO3S47N3Qgpka+by5MZSqr5phlFfMZkE+QM4xUyoX5c+i5tYWXqTrbIA7Y\nQS4d1TSCOsDQQ4/RqrVWrs/C3UFY6ZA8KXW4GWN/wrAUSe7NorS5Jqns1pE5\nAMnKJOEV03spor1h1e0A00tUnamIpPe6QhBWO6vvSRGmWba6cpokK4NMu/YA\nIKyJ5d+EHR2hcA1WSnsaDBHI7ZyS2wjp3DkD7yNFXqssrpa7Sizo1SsjpPk5\nHgLHf/2eprbneush4pHIr4S23GpfL8Ycjh/tIhi0p0aGvZ1Ak6I076vhOGg7\nTyFHDQ0/qZi1aOk47/VbZaNIODeQbysMgl81qR6TLN0xGwzWegNDrxdI1Bil\nUd6mkOpvREVIR6G+uR9F5Wt6sWFIYc5HI3Yp5iroiqL7yvk9BHxvtWrCc+fp\nWyLdA3bNdkyd7TsuYoplKNMsqm+vl0NvomTgZvx/Al+Ccg5lJsQ9RkfStVxI\nAUm2\r\n=5Cer\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"58b5208af86922a5a7aacdac361fb1e15ba6848b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.16","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.16","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.16","@storybook/channels":"6.0.0-rc.16","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.16","@storybook/components":"6.0.0-rc.16","@storybook/core-events":"6.0.0-rc.16","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.16_1595946604036_0.8046652244504329","host":"s3://npm-registry-packages"}},"6.0.0-rc.18":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.18","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0c7571740e55fa84e8e54ea8d077f96a0b4856b5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.18.tgz","fileCount":93,"integrity":"sha512-hS6obD5tE616UOHUGI3GJiwuswVoJp2xoNSIPhgO0pBWm6lTq0Ux6YkAnIMNUMF/n7EPhVj4dihdlAuPaEu5PA==","signatures":[{"sig":"MEYCIQCgyXpCJ+eFCZih/hb0+GxsnF5JRgcJyWMtA0ExzkCLxwIhANdxSj3XsNuT9/BH0uw7da0D81xHUsLzi5eGtpNFnJFp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbIDCRA9TVsSAnZWagAApm4P/i/MxUD+98My2n+w6IJC\nla2MUmWNCJC7bHrYHR+MAcqUGmWVkh5g7mxkwU9UkviJbR4u0yUBPmI1sFfz\np4mddmzSQAgO2Fa3jSaKg2046zIDsOEuwoxcA5a7cmlrihujkIdEYn207wM9\nYDaMpBa8c8X5LBmcSevGKtRMqbzI+gjIbQg7vvHnjmqTOtS8MWLlAJP0IOsa\n4GjFrg48EaIyla4xs806lGHZ4O0UorV735u3YNDJ/2cYe2nxLBWJBBMpqWtz\nCU53X+9X7w33M8QBj7sr0cCDyrta828uL4KHBixLKSXb7kxHTHKTiGPPrxOH\nVUd1C5rWMFBQrlEssVnjIJ6Z/8MAyb1/ngsYGHPV/uH7KcmdsvDsGjn24KLA\nPT3i8ti+6wHOpqDIth90Q2cibugcCRCoRUwR5NWEsw8md+rAbd0v2wUfo3or\n+wtWExfGCf4K2wrwoLDp1VilvBhdPEGcOTjFEw6qnSxZRMANQe6hiXHo/5ur\n+eATqwV3mpBFo4VXtLBxqpJpqTflK0rO5YgATxJVNj4mOYe21No6qLdXLEaR\nK/5hBgkWSuTXsNPZMvMi+4a60faR4g2Ern5E+e1qJQQWJnnadYTsL6GI74yZ\n+9mFARRWcUphkoJxFOKZk0Y20iHcBm1VCYHqJ5ej/JDkHiP6mfhsUEPSojUy\nqGNe\r\n=rvH8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"42f3ea27e0c82d6f6ea2cb964317252ffde27a71","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.18","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.18","@storybook/channels":"6.0.0-rc.18","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.18","@storybook/components":"6.0.0-rc.18","@storybook/core-events":"6.0.0-rc.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.18_1596043778991_0.8087695855238091","host":"s3://npm-registry-packages"}},"6.0.0-rc.19":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.19","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"2bd74dc20f097a2152de1f6f7517bd7034ee2953","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.19.tgz","fileCount":93,"integrity":"sha512-Bth9a06Kp+SDy6F/+7iIUvs6lI0l7N/7gDC4WixfLAjuGx/He9MqYqm8P4P5jvq4uH6fTd1wZD78u4UOZbv1lg==","signatures":[{"sig":"MEQCIHTmwb+lHxDKlcbyMlBoZwH9rHeQyCKt0pftg0MCrZOoAiAWeF9F0eTviJOBJVgxcFRiUIIBBLoMtEP5yk70LYfsaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvdACRA9TVsSAnZWagAAyAoP/iJtkyLzalkW9qTHDBZp\ngd3lbZvZrFSmZNhymXGPToqKSSbAcgHnL1k2af+PRnx2t7QB2S/gnoxc+veA\n2fdek3qniE/yQBK1AWY/REUzaeCV8LEmtR4JmbrcMxFcc870aJf8VdgCyXi0\ncbeZw7L42/cdSK20V92Ds+uwM8gs35K+ssKjbkcHQk/g5mfjowbtZjMiqOeH\ndCEK86Q9L135JHuFGs+LOXWwoyuUQKTmWNrCxS6PTbvdMA8P4OL3CuBPvEtC\nR0W+TQwcl5+2Jt6K24QR0NkAf11OPRMUj9Etz4vS4qvK10zS4a960Pw1DFQu\n+HU9p2gw7BALwnkjs5rN35kF69XFQ59feQcJLIGkzVHGmaDVWPHmB6Q/z3LJ\nrTd/Ln5BcrN8BY3CRyzzIkV1FUNs60Oy70H8h6ya1U1C67x9RbcqWRjkE5v4\n0/J3o/Q4iVKStijlw25YaoCKoHHFIPKx8aCVXP8FpinE+CJu+a6DyWZVQZKS\nEG6Q+JhsFd9u6uucXfNbL5xgO9eJubDl90QWpE7Q+Wt6yh+N75x2ux47XHqc\nFe1jS3mnL+I0y6q82eWHlSjAJ9g3mx78xdmJocOFryYUiOyqszZZj5LBWHnK\n4D1B8iulETgZFqeDbh+i9X09UJuvbfQULQrzkPO4Godj3gq6YAgZvMxws+ZM\nxrHf\r\n=KJcF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"22f5d0c54ba4c6f04912309a3e93bee8056268a7","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.19","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.19","@storybook/channels":"6.0.0-rc.19","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.19","@storybook/components":"6.0.0-rc.19","@storybook/core-events":"6.0.0-rc.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.19_1596127039580_0.5541441005630865","host":"s3://npm-registry-packages"}},"6.0.0-rc.20":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.20","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c9bf283b4ee37496f8cf48a4cdb0ec0059c72948","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.20.tgz","fileCount":93,"integrity":"sha512-feI2N+uO8KlYvyED55XHqLf0KQhhgL1VDAsJI4vqTV4fSnlm0Ma1xGmn4e04JTLPWXyy9NqtlY9JgoEgPOW0dg==","signatures":[{"sig":"MEUCICwG2w1L9RBAkIds5h3z3RloN1rZK2KFlN838PUoPsccAiEA58hZLnltHa+btcUsvl3/qek0zAS9cVESrrqFEi6zJSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI7roCRA9TVsSAnZWagAAeYkP/iKBvPuGs/+Df1CwvCYk\ndrqjMtNy3Okzild+Yqzn2bL69HyCG7adiuxCDrg31nOGDlm8yB+mLB/rPR+K\nbk+PgfVDr4ZrGMC7RbLU6o38jsF5HV+loLMLPG3rCwr52/BO41GN8gBokIbw\nl4oeJcu/OIM/pdKZGmtxNproF/GBIoGDu3AweNWhRLSnuE4M+XTBvT8kqDVC\nvJId7qBF0iFcmNjxVY8X0KBZmAUAoZN0n77VYyt92lR5LunVnG36vXiUBlt7\n+21fUSPECcDzHEmwtGCQ2lhKOpX3bjlse2z/gIfeo69Yr/z/ToYvZpw2FopF\nY2jot6O8XcDkBAcKVvF7JruVhU6v2LB2Pdwh/cn6iJgsaPRF3B3zTrGscFwn\nEPzrj8htFEXDyUXdm7xQeXzAONRbReHoIHcTt6+HouVoecVN56bB5+t392FP\nxchvtvfNfp3VHgf+hXpaqtSpzDXv6Rr/XlDOPHz3xMt9b4NoZ43d3fsF5Ax5\nzT072UFFM1tHqv3uz+gVJUvFRHKXzcvAo6vx3lrpnAKXn1jT4Y++Js5HIx3m\n+VciKnXdc73AMp/5Mykt/059lrDTZkiv/sp14wOfhik7M/4k4Cw6lYRsTkRk\n9kSOhi6yrg5w25M3YjgbTSNHHX6/rS/DvGI3/ufJ6MqzXw3Fj/WovqR73Bpf\nWv4B\r\n=re/5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"329836be34282e34417b21e65d2ae7057c1e75f5","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.20","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.20","@storybook/channels":"6.0.0-rc.20","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.20","@storybook/components":"6.0.0-rc.20","@storybook/core-events":"6.0.0-rc.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.20_1596177128151_0.6495273362629572","host":"s3://npm-registry-packages"}},"6.0.0-rc.21":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.21","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b75c0935e228a04612c875ead032323399c2730b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.21.tgz","fileCount":93,"integrity":"sha512-W7Js2lpjjNhzrfDXqwu04s9/tCdzoEfgvotMxtF72ggh7WUgCQQ9D6iSzdxAaxdHcgK+nHtj6SWan/N9vWu5vg==","signatures":[{"sig":"MEQCIGYU6cU+0pChpDDWeohcJVcaOFfnkpJQXKJ7Hxt5zzTQAiBEGXevZ4VRoyRJgNyCqLI71IUcVgkhRvVYLHS9CQIaOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJXPgCRA9TVsSAnZWagAAw9oP/Ai0EsOkc4NJdQzagCbt\ndsgb6VpG/Lv+9YDE0pIbk+BCHPHwBbju/VthXzNNwZXcgd7p61PwuE8AcdZQ\n8LkJjBy2pRxKz+SmjdNDKL6U4nFqW1zx3Vt3phYUQNsenS7SXAqknnbbmdRB\nHtrwGl5UMfhGVhIL85qaDDMsr11EE4JdOcXaQA8BmyGNr/6TyfL+osd5+Sol\nu33GGRtj0ovbu1Pvh0h31HOPuWVmhZSD2QvJVnsESfuxQWqMQXVj+C4fupRE\n2tkvZQP9og80q0WHcoXFARtcbgVjvw4KSGlPVp/EWL70ZHXMxdohpr0SvFNv\nUadk5pK3C9aYwaIVMekMak4Y52P3NaEv2b9uGo0TjTsWIZpnzxD6WQp95OPl\nXQuyPPrAFeLvA7aajhTRIwaMaOepblnXw0Hk5lcPYnh5zM+qxSbsODFKiamV\nhPa+s3sqbUrq1o3wdC2Powih83e5gcrh5dVsM347dQSrnZxrwM+wBXhTi5Tt\nAMKRTK0tqVzu81yg5U8XyBD2AGZdbFNcn02bKIQKDWlhyvrVo/Iy69AFjiPL\nplXw0RlBS2eC0KLMxKZBs4NbKuCDs8bvbVQtHSt5YiIITPTvXwrekZ/VOAga\nkajrbqGlFreljANLeKBTGbkNFjJNmMu/Gby13Tso/OEXGaiBp1pX4IKRnTyc\nZJfO\r\n=3XEH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"aa7ad3c00f46366cb28205e8fd82689afc4dfbc6","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.21","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.21","@storybook/channels":"6.0.0-rc.21","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.21","@storybook/components":"6.0.0-rc.21","@storybook/core-events":"6.0.0-rc.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.21_1596290016444_0.018351631905974886","host":"s3://npm-registry-packages"}},"6.0.0-rc.22":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.22","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"bec933afdfd81df81e320cd560d00eba939bed4a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.22.tgz","fileCount":93,"integrity":"sha512-9mGOjfGQXjPJzelcLjcS+Rw+E4LZZgK+L8h+gtkoRUQzy36X4aDGUSGbMxoGOkjaGpFiBhIQMFcBJOoWkBlZvQ==","signatures":[{"sig":"MEUCIC0mH5rzyoy2dXGjYor5PQFgg68zqnWJU69p4gIEhkovAiEAoMmyFEDe9ypozUFDQqu9rwccHoxcPa50vvKhX3pArjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJs++CRA9TVsSAnZWagAA5GoP/jR/pUAp9OaN9wFjDd14\nNq12a9lTgLHtq3rI45AQap/lTHz1uQ9toz8gEwmB0I/Y5U8duzMfvZYejLHa\nNt6v7AJLpIO14RI/TRyV0gtHJj+R64sB/ljG0EQozxACFvSn6xKUqSGPxkR0\nqaf4YhMLqT6YDJkRMGudJP+RCj9gx3eMMvsgxvVBR09bBGoP7JN/3YO65gO0\nz4b11OHjs+aSuq94pNVfwq6QLYDmtlvBMnYbvyoEWRB4n9ZTXDx6NiFjjThS\n9rQcKcTxq6gWzVO3y80qA9gb+30QL6eHq7jm1iuapiBvB7xSsT44RShBwZy2\ndhOyYeZ5Sc6zbVpXeG+LXBSzzifJSTovWvMLOfw4pu4FtmcothLNTi2n0lO9\nisj4PU6Ht85y74ooesvFS5sQ9NSYl9i43JoPioUoCgnOEI3scP0DB1AqfGZ2\nq7ArLeAQcEW65GTckrd0ox47Hv1lXDS26MvmikeGdq8b+u8m6sLN5WkKHvqE\ngVxl/M+DAuoeu38i9NAXgV6h0kUg58Jq2+Td4SoNcZU5OIIDBGzIVLLQwcHg\ntoVeLc//c3ncB0nhIl2giz6c+AywljCy6RKa3QuAl9zEfE/EB+w4aAJFQ9mm\nq2goOYM3utN01IXtpG5ePfbMTL1TK40xY3a1CTE3IP0b9vMcF0241SmzXAHG\nTulb\r\n=u1Ir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"c2e3329d555858e7a8c1ce8a25e0fc0b245c4747","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.22","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.22","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.22","@storybook/channels":"6.0.0-rc.22","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.22","@storybook/components":"6.0.0-rc.22","@storybook/core-events":"6.0.0-rc.22","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.22_1596379069819_0.2092944042867393","host":"s3://npm-registry-packages"}},"6.0.0-rc.23":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.23","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.23","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8d1c6853aa65f95b8907c6d29728a8c6a32f536a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.23.tgz","fileCount":93,"integrity":"sha512-a4RwV2HqJ8e1ipWdE+FoaCH56Ztco8ZsHheWX4I6HDfQ/rlulhITdtBma7X5c5ZBxdoFWdpt+JDbnAXX138UfA==","signatures":[{"sig":"MEUCIC6QIYTRjPD5cXB/k7icPM02F9QzBiHchSfnWCMmoOsCAiEAlJwdieLBO+L7G9CdDg/Oe2ZwtG3HSaM4Z9qRms0dUsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJ4Z/CRA9TVsSAnZWagAATc4P/jamyKuKHEBgHFfA5Roh\n4JTjfRdKra1CoO4tZ64eCU8AoI1T37DkTBE73GYUDdDhY0aImMDQL0x6vs3C\nDAy8mlyTRpszcUMcLQvqsYIfzmfvGfot2IWYXj30ljhM6DMeRdnZ5rahHHPq\nB4psRKOLdW8fD1/deopI0Vzf4M44ybygldukjys2YJ1Bxny/CMLU8eBXu2eq\nDzWOBg8tl1Auplw+XGcMu/RA+NQ0GdGhSFJqIZ+tldZMhG5gXSynL1MRLfvl\nanqKhdNnfZZVhPj0ajS8LUvAgcPby0hyCFQspgCxlKXhetjXFpFi2u+19R5D\n03N0tRka0y+508521y8T6rbf5hDN/8WQWSjwxcryB3g+viFRyiG32kzpZJuT\nk8ALm6k4LlwseLzfmTGlejXo0OqJ+TD7PtxLc16ffvWvTKJ8FwuEggpxcEK+\ndrKKSrtswOkbTCRse0/1kvE+XLl7aqr3zL+9KNKrln3RhagZ7sij9Cckvfeb\ngnt1ONcK/k33RbLWW4e0FVv/1TZ06S3a1sQpkCtj3fvLBR6P2eytbot8iUNJ\nDn7sudSnz+mWj4yCGKmd0kQE+7VmfvP4NFXcegIHDtp1a/1g50z8at7QpNsy\nwBXAmIyg50BM+jqVdmnQB9aFKLi3vycVXkC/+sR+6B28dnlTRUfySgZP51h0\nxDef\r\n=jbsp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"f541dfe245537701a0780393633c5453fb19e740","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.23","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.23","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.23","@storybook/channels":"6.0.0-rc.23","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.23","@storybook/components":"6.0.0-rc.23","@storybook/core-events":"6.0.0-rc.23","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.23_1596425854995_0.12088786545949182","host":"s3://npm-registry-packages"}},"6.0.0-rc.24":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.24","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.24","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e53f344d42c5a3a7d6967052903e45a06dbbda60","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.24.tgz","fileCount":93,"integrity":"sha512-gGpul88t1MvFOHB76PYUhMZ8472WvQwNWCHrvwBKMfU2i5cjMgjHLqnF+QDzEVHBXBy4j+qWZigMNN+Yabo4Rg==","signatures":[{"sig":"MEYCIQC0pc/dEcH//srvdKvibSoINEuMmIv177n3hXQnFd54JwIhAKI8cOkbWrEbOqwQVUPaSKSGBOIwl4/1Qbk+oa2IhAs8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKBLsCRA9TVsSAnZWagAAfioP/1f2WpCi1kxz4vipAHe9\nC/fC7X77gG0C0HjEDU8xdjsgKBJqhQtDYbXR6bvZum1i6WCmJT5gVRVgJQ1/\nD9NqbIgdXDWifiFyF6ieysRpmBTZRhcf03U6wOwsB3qZaqTUUVxZVVPnJyG+\n+3jspx3BfFFfDY6Z/X+Ydlnf8Q8AoVt0Lyg9mGoFM0r1Fsf53dKMHKEkhMEr\nM7/fTDlMAJVHRNU3rugKpYXR9EW62aoJUSbFUnTSz1c9iGvQ4xoNlrSWC2la\nrQtppuoXzjrRHKxgi8nGCiXDXqfJFpelnle6ajJS0WtZQvLC7zEMu5Cy07Jj\nDDa3qQU+IqG+mfdvUhG6Gw0BhuGKWuOr3dLED67vxo1zs+YKqcq8hlkHpmoK\ntPKb4xpiajP337Y2H9dLzX+b+4dcrIXVdBYNH4FTcVExteb6qODqBz8gl0v0\njcNxujS61eJ8AzsdRtVFzgGXHPpIUKgO9zGivDc4aq9mBPxHoWV/joVK6AUd\nBPHOC/ZwmOscIXCUAZ+WFxLnDkzRIFojtXViNk9v2SCmx4zxPQIj9mj8m2Ux\niaohHoZwfVrHq4t76quUisvobRQKCCphOimr6VS7AaMJtxvKoxzeNlPWv327\nTaFXgYTVqEE2xIcrq1eU32dDLVGVOc2XNE+wn3yft5a7p73GGLYO3/QWJhJL\naF1K\r\n=vhhM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"76e1bf2df32ec75a3909a7f5f2b382b2e553120b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.24","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.24","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.24","@storybook/channels":"6.0.0-rc.24","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.24","@storybook/components":"6.0.0-rc.24","@storybook/core-events":"6.0.0-rc.24","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.24_1596461803889_0.07668006230556612","host":"s3://npm-registry-packages"}},"6.0.0-rc.25":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.25","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.25","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"295fa76201276a4131e8a5331d7645f4a5813d70","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.25.tgz","fileCount":93,"integrity":"sha512-zXsiYuGhOaUjjc8Vd6BGpRuosnj8sZTWPJAg0ClqCzbuWWj2voGLrIPfLRL8g+NxnHMrQdfV7JYljykX0eZUsg==","signatures":[{"sig":"MEQCIGykdcus1f0Rqs3Gj8oVvCk+aaKfVK+fBFFue06+R7W8AiBk+u14bcfjgfj57CHGXnuduF3g7a6qEXQlsDEFh0eEQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKQR6CRA9TVsSAnZWagAALPYP/i1rzGuiJ76npDGV5Cq2\nzWrQ/yQLeAV2jRqOpFv7kNz/I61A7a439DAFphcSMRZM2v1JDJOR4O1CMsNY\n0RsYydnkMhjAhKDzN/10ZH/rV8t32BXXpA8vg1TBcfGKzlXujgNNj2idMvW5\n1kjKc238M1SgSYXzM6P/J5k0L8XyYhGuvERO8JFdzu7HMQKyzu4U054tBJAc\nW8IrJhEevZ5iAYqcg/vcPt1Ywmpi8HPcuDIe90kdRxWUxSnXwznoMeau1Gjo\ntoYYh+Lbek9doEzWDapqyw+OL2Am/chc6Bq6HSL3qAQZ7cLBuFOr+c8Eh8Op\ng1qBIBgyNP/OoQvXFLj2vhuVbn9nRxEkQ0sBKJGhuBwjuBAqxmmFEECUl9Rx\n7dvxx5Sbq83lo3Kl2pvXNVQhDLyUU8RJ6eUGZoeWPR/nrYijiZznf/1bMz0V\nLL1Jokx44JRLmDFj538XoyVEVgtZTlKjR7Vr8kTlXRpH6c3PEfoDr9WhYM7b\nqxOPmT0Rorka8+iVk4ckHp0jUQBlau6BVA+KG01kCG9ASDUAGM/mn4QiNBGa\nxRsIVyrfmf57jwrydTIntiuXJ4LAoMOE8LKXwmuf98YaPrj+jn+r/TgHRJEx\njV+Qv7G2htwCj53/3z8zDc4qfJvngccP9DrRkHtcq7qs4nbbX94KOgC5J03n\nimLJ\r\n=QKZB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"b0464fa1543581b4c6ab2718014f88151d17ff0e","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.25","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.25","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.25","@storybook/channels":"6.0.0-rc.25","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.25","@storybook/components":"6.0.0-rc.25","@storybook/core-events":"6.0.0-rc.25","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.25_1596523641831_0.7901921977437778","host":"s3://npm-registry-packages"}},"6.0.0-rc.26":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.26","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.26","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4751957c401ce6f42697ffedeac7e6affa04a88d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.26.tgz","fileCount":93,"integrity":"sha512-HLjtdCycBaYV8zlXAs+rEzQWuaKiyKph1JNcGJy/Y8IpUyEpVzqoObZpvVhJMIWJC+m7RFksSJh/eQOwirzGNQ==","signatures":[{"sig":"MEUCIGKYNO9i8MVUuI5DykgPyh/2QLWphkIMs7BTxUR4F8wcAiEAg2aG0rBFuYkaGsm9UHDY07d+7P69dr/hi6Gtm0CCY/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKY8VCRA9TVsSAnZWagAAlnUP/jkqt4rkb62PRR/zLFQM\nDzuSNYYKP6jAVcCrTFvjnnta9RkpCZGK0Nt6NpO9AuduO8ITDkFwI0UcDqZ5\nQH7myTRrNrjAdpX4XGcT4bL0N9OH7CXe0SR/qx6dR6UVll9KfzY1pODZmbWb\nxbjAWZVsQe1JTHKpEOXRvm/BjHnPad5Wxfahn7sijVMkPT1CWjYc6aDhKSGn\nVYX0ibAxEEg93Arb+fthwIN/VocPGmVW6FAHWhLMHmf9jjEnHMWQnDsNR5qc\nBvgSMf7kKA4fu5vT49QELKag6OteS4CDF4kaTIMbhe/eDSsoMA9rOL9xrpdG\ngMBKHER0bHWDVmk7OpMRY6pPkXrdVQO+yrC7QJx/x9jvhzU/50LwelNnSQMU\n755sA6ttQivJ8NPdFGUcuTBPvi2IJCmlFIDu3CC/IgQkobaWLROQGel4DjNZ\nkwfP7q7fBarMhC89rwmic8kCxQi/c6pc6qa2vW4rGdmPUadWUD3QwJ2Mf3J+\nj2ypvi/uQnebyDnKPKseNzx+91CUuk8VudXem1Ue7DjblkpGvd8HASH9Ae+h\nRjIceQDcr3xmfK13j8dYXYDHsSFq2to0x+ykUOzGJC+0QTNqEFYND7cCd+K6\n6QNXC5BcHSRY+wy2cO/RpXzEhGAhjcjugrvvJwsLhBpXlwkLE7LurBD4P1/Z\ngecQ\r\n=fiAa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"fcef77bedfdb9ffb77cfbbd843c05cae67f1a749","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.26","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.26","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.26","@storybook/channels":"6.0.0-rc.26","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.26","@storybook/components":"6.0.0-rc.26","@storybook/core-events":"6.0.0-rc.26","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.26_1596559124624_0.10384211792570808","host":"s3://npm-registry-packages"}},"6.0.0-rc.27":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.27","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.27","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9447691aa688b3de451e19b227b5361bb4ee15c9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.27.tgz","fileCount":93,"integrity":"sha512-dVgLZWN+jB0IvSENE6PkdDQmNoXxivAt30wuT9YZEqUVby2av5+OCF/y7IQilA9m7hDPKnX2O1/TH/O2DAvleQ==","signatures":[{"sig":"MEUCIQC8H1T4WCk6OimyDfTkqLKNM4e4Dnk/CQzUwz3RSshBEQIgKF/+Ev+R1BUadRjwFgbHamWPYGWb0GBPeylHr035aOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvS7CRA9TVsSAnZWagAAaBQP/3rdYVv0Aj6uNAdUunkl\nRuasqtYrPvA7+ux0gaFf5v6ZBCcvGnZJDcKef+eMohkShzCn/xstDf+BIh4c\nzOE1TByEzd5qW3TPtEgoH345NNMvu4eJkQbtV41gTD2rMWxlf681Vptx/Rvl\nUSnYwuMuFVtEpQSt81pwm2egjQM2kygLNC6YIigmNRRMf3UmtrAV45ddKWcb\n5ehs/qrQ8Lu/5JMGhmRXUr5fdHjokXChGI3xQwy5iLydS9PGYWr4fDJjmk8h\n4gPEMd0MxRLjE70zJE9QhRdL6tDKBdxERMugWWQZ3hQU5cJ6RCXgZQbPL2wR\nFPdeUA9DuRlbFOn4jmhireoB0om6PcNsVuh/uGxKXao2i6Btj2mxgkxbcOF0\n/4aO7J1STpBTCEpCeSPqVHljv0yb7KwMg8y8xf7SdE3cSjR15qcsvzTh1jmT\nhgokOZGp3k+j/WoADynLV6YGq5/DcSDDbnVGUORQhGyykOb4WkuguZHxfSps\n7yszJgTGR24h6gR+ONTeuq7ERLhieyCLgZlmrz4qNENYrZ4gz50i2fbPnK7F\nBegqrVA/0/gLRW/zF82IChfGMMme4D2iuzErEQwYYQS029x0iuNtgH3rFRcv\nuFTUI81oBIudvPNrRYVGtIH2WJ39iAksGaz+M9v8fPcEsE+bePG7vD3baO1p\nyjo/\r\n=pFVb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"54e931312fefba535140b6e1290b3074970de978","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.27","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.27","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.27","@storybook/channels":"6.0.0-rc.27","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.27","@storybook/components":"6.0.0-rc.27","@storybook/core-events":"6.0.0-rc.27","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.27_1596650683093_0.21210958233162946","host":"s3://npm-registry-packages"}},"6.0.0-rc.28":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.28","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.28","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"40bb53832848fc36fb8519a9f2052b05d62256a2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.28.tgz","fileCount":93,"integrity":"sha512-bt0n5XGtWHpIr3MDHGKiZX5BSx31ngrmKPxA4fAw2E7WKqsVJTRMDNGahBLUGdzeQM3sEG5c3Mn6UKbui7BTWA==","signatures":[{"sig":"MEYCIQCVIDNjRyv1NdZcXADDeIoDuCeHYXz1F8e725tRpQcfVQIhAMs0Ngr97k2I2vQqVAZlfUTDExlgnBGm0BRrbOIxYazy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLBp9CRA9TVsSAnZWagAA13sP/1M7r62ETQ+YJiTiYxar\nO4xtRKtF2ZF9d9srOo/YC3JbOos0SIAKLe1FCHvYI+qr9RCKCbC8bQsc0kHV\nEHQoBDKLNPkMqS1k+LHtH/h43D2IjOSMqz8ZPKpkdeNmtSDvGm8s1weHKuLy\nA8LGC6xng60UYZ1Asnr5hh8dDPovdP++NWV2I79/aX7d3CE813RRiD7cwT/n\nd9Y7xz4O8boaBbVMe9iq5ww3h9z5q24qn1av4X5Gne8VOrTsrY8Dmk40laSv\nm0Q+Bh9ZErAkI8lvw7LzOl3KTJV+jxESvZnNk7VQSiP6se3NzfwiWZFvbGbd\nLZEIFNtrdPNSUdUzMTOI+ADd3YOkwLDjeMFrreXkCCQsR5hZxr33J1peK+z3\nmhnUdEGZ3uLbLqMhPvbZJgInvejejoC4ssgIO3BNeLxp/CnVuRLxKs/Yh+Gr\nQOnWFVS4zRbl4ivLssLnGnC1KaerqzgfkD3DgrSSQGCPskCa26ovdmNTT2li\nI6u+6eaC9C9c4I8M2vnmv4F2pngDeoua82K6unDaef5C2P3T/D+XXt+rdMRN\nTRP5rdTGIacYmsFqyIXfK0n4SV/BjFD1RarfY5c/QBH8Mhw+a4Q9HORzH7Pp\ne0uYm+Qoenbke32mAKKhC410kcsNE0CX1AbZGELiIDEJWjuhAMkJFoRdwSbI\n+fS3\r\n=by6s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"7a8556f396217ebcc5c1b1b91e517efb9941faa8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.28","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.28","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.28","@storybook/channels":"6.0.0-rc.28","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.28","@storybook/components":"6.0.0-rc.28","@storybook/core-events":"6.0.0-rc.28","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.28_1596725885371_0.1945193552185438","host":"s3://npm-registry-packages"}},"6.0.0-rc.29":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.29","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.29","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"64098353c2c464916a362cd8e37fffd35be49268","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.29.tgz","fileCount":93,"integrity":"sha512-T6eRvdgQ0ljqjdtG++DAdRgq9OSTGEKYAMvXEuYQlW88WjMIuC+KR4zUOwD3m7CmSdhRKvWRAs532yhsjo3udA==","signatures":[{"sig":"MEYCIQDS+wGhs5VuFeVcXZPFHfClM682XIHvLnF5NY1C6atojwIhALhM32j6qT44xbSFtw7ZcEOQAv5G7SYOvcko6pQwKFkj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLT39CRA9TVsSAnZWagAAxu0P/2xBFD683xML+UJTvPF9\nI7QUXVHDhnDI+Jp4t58pSKRBpwLUoF6gZTR9WP34nQ6QmIFBOvRXxrOwppCA\nR+1KzdikaXKuES6Z9F6888b0YDV+M5mm8ARmH5e4so1ESVo9UUZCiBtRKjAp\nKIBZ5QwJgFmZ0PGMZwF5i4yS2IVlJIKH47gD8yZVxf0X+h0sopOXOF6N/tTz\nusnYrb4pfQE8EG2pT5njncer6dzoaVL1ow4dOGMeawmFAEqLm/68x9QEMfFe\nuMhYZ2mgsvHBFovxz27HnEFQwv2vh3O8vaq6vg8QsnxLH9Z181FKPIOFTMyv\n9f013otHOzK1kmmyqXWVmKcr0ImSllbebUWG5YTapEN5smwdBhV3CcWqjPIk\nEzfdLNRG8GQguBesnl3ADdLREgs2vrvXpN8urCtEsX+PRp3R21NYAsWkOZBi\nk6HxFiBONpXBxGuyJWTeWGhjxeg6gcfDETx9ZmZLYDVvLlqlGqbKwmZpKCPB\nit1Bl4PsdRPB75ZwmjoKJol7w0ZPoilpzNxP2FDwIf7DL0eSxprayHReUwNQ\nFxTuz/bOu5Cp2j93SZCBh6s+2KA4anc3izLfxxEACVAAaKsQZqN7XgBBuxvM\nnyn42WsCgzmpMKcrjWhPr5NcsY8yFXoyudt5eGFe6Qo72vf5K0VURiqxjAaD\nzYgR\r\n=lkgz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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 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};\nconst groupId = 'GROUP-ID1';\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","gitHead":"d31e743fc15970ad5722abf4678e03be82bf8b8b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.29","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.29","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.29","@storybook/channels":"6.0.0-rc.29","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.29","@storybook/components":"6.0.0-rc.29","@storybook/core-events":"6.0.0-rc.29","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.29_1596800508645_0.8535926950416737","host":"s3://npm-registry-packages"}},"6.0.0-rc.30":{"name":"@storybook/addon-knobs","version":"6.0.0-rc.30","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0-rc.30","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b15e5093d635497b9a8a5da5cd8f96abe99a15de","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0-rc.30.tgz","fileCount":93,"integrity":"sha512-XOcyp3Z9dV2ZjkMR04rZd7bOIr25/OBLWedTYEKJ9QVnqjmYRR3PUqqPzE6WqALFe2zEG/Anpnuxl+gJAfiPjA==","signatures":[{"sig":"MEUCIQCMJeh/bBwG6lL7qnowUEdbIG0WAdgI/UNRw5TMZ/3uZAIgRgjxwae9bCX5z6UoQV3jZeSOQ4avcCqXtWLY9c3nx1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMRTfCRA9TVsSAnZWagAAMVMP/iEDiSMFdzfhxEMDzCUV\nMGZiaPt8DWAsO8eWkKOSBo1x2hf/u6hQuMrmv3XbWlnnkQmDNbYFZiw5bFio\nIchQJdCNTy8XeQ5r6Jzp6YMuqZO/TDGrnLMfrtwjqc6vbS0s1uK+NVNfhM6x\ncATsHsPaNoJnfjzfbLXrqUf+QBapvY6qkUVbyEieD87W0N94MmhuP3lmU5xJ\nmmY26XAX2/OF8yPSoS4JKhkBnrggMy1yr8jhcHAqrQUIIncs1WCJ2bE5TA/t\nlpNhMUrvUjwpfb5sOhj1oVb3rYWI+seW07mFSojjUHH+Jxb1dlyLd5k/NnP7\n316nRPKDnhxUe/AABUF+h0ScWvFMI9nFKKCtyqHHZCgel2VgiJ0zuwYGUtqw\nYgYs2cnjX9JSNVW8pjtCJTT5fVZuQMjeC+89+UTJUjgHHhwNn1xa16ifGkUs\nqjj2y7UiSY8LJLr423KxAvWVmcECp2qf5JCfk8dQZT0wIgRp7kBqByifn60L\nm/xxTbwMmp6CT0EEwSbbRrnbD0dN8gZhp2+k8E1FR+fU15SaHVzQhFTQki6D\nYaRcUWxdCuj+qW/bFCr/PcPZwBGSHoay2sDGbR/VCkoRprhZ62UXlK/vvAx+\nrEUtm1Q9Ds4Wyxoe3vSOFDfrHuKMyDPXQa1EN4GLEJBYvo13ZbeZJqYDzBCM\nyNS8\r\n=ojWL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"46bf85714342208cf612aee130f8876ce56ba46b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0-rc.30","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0-rc.30","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0-rc.30","@storybook/channels":"6.0.0-rc.30","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0-rc.30","@storybook/components":"6.0.0-rc.30","@storybook/core-events":"6.0.0-rc.30","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0-rc.30_1597052127100_0.1780104918151728","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@storybook/addon-knobs","version":"6.0.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"77dd63199968f738e766cf73be00a62eb0526456","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.0.tgz","fileCount":93,"integrity":"sha512-wd5nwnrBVz70OjqcW95+HkOsj5WLZnOZDFJb+lOHgAP+6SmZ9FrWZCCXqmfGBTRftwhGJ8xUNtBvQYWOaxxVFA==","signatures":[{"sig":"MEQCID01eyxidshl81yhN3JcNER9uCJ7uJSLa0P4wCQh1k5IAiBqb+GMHkRrfphnWZ5RPvgFQmqJBerBh11BbcBv67fDCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMj4DCRA9TVsSAnZWagAAAB8P/RkgX+BYKHBGcSic+irE\nk0N/KFLZOGX5PcRddhB5/rij0M/hubd2d7/TtG5FbnCjt7jcSTWLtRtw8Plv\nIGgFBRTnvq2Uf6Z9B9JzeIKu08GY670kHpvaAsBSN7lMS6I/hIxGXEa9Kobn\nUsne77BfTD0Y/rnWFwm0dESwHhotqBiKxw3p3sdDFktq05dGhicvaI5wcEh3\nF+tdzeuZ+BODT806XMrzf2loiWwpigOM7aIG2lqAczPkVTSMWD34rKwrTJC2\nygS6soyFe6ZzT9XXP2yafi0WIAgIMmFDCMjql0nQD+MPtmhs7jR0WkCGEmj7\nxIOA1vxlbwN78+qtztl1HVKJH+TKpm3dseZPPYtJ+0450RY9Akq/iJlhW1AB\nNcrSoyqxa9wiZuT6q0f3XN4QxhFbDWpEsGBNzD8hkN6X3svJYHusvVwc2ndJ\n3LVT9pdTl85ja8nIP97REAVSGxKxderYNAOvluulEP8Jr5JOeZ+5BGOd530x\nBQ2HzyCoWu0S3RymgxdPGBep4488zLowPcU1rUT8FMi0SZh6cXTTeH2pA5ZM\n5Thsn4LLCQ/jLo0rY6/rYrGbDczmxyt0Z5zYMc/DNjNcsYPhWwSoeR/3G8cW\nqQ9+khg9cbgiCbcm3ZNQw+Y6ozSbaT4L7dOaFLvYzyyjcCO5EtatNkQl0fdd\n6RF6\r\n=D9zZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"b97e2eed2fce5e124eb825e2a3c768cf8e134219","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.0","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.0","@storybook/channels":"6.0.0","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.0","@storybook/components":"6.0.0","@storybook/core-events":"6.0.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.0_1597128195199_0.24294369901751756","host":"s3://npm-registry-packages"}},"6.0.1":{"name":"@storybook/addon-knobs","version":"6.0.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"864408770eaf59e510360ec4f95d751faf28f542","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.1.tgz","fileCount":93,"integrity":"sha512-x3Czvfm1959nHMkTaAqojAkfKEGMZaqhvpQqXg1RdiR+GXYoNRnlymvhjspYZs9S0AlX4cPbwUBrLSSZlmCNhA==","signatures":[{"sig":"MEYCIQCvE2PhBLnZayCrNzJqMv2wWc49ll85Tly8eplYBG8xagIhAPBHOz5rhgoXpSVpO9j0Y7WNpqM/2A+0Fqaw4t9XyPIH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMoRVCRA9TVsSAnZWagAAoe8QAJ0KogtdIS+htpPFCQbF\nVYMufQO0flV2gyeUtblokZ5Ne12VkSb4f5uDgbau6QLv74sM4bUk0hVyGMpC\nDRaAAnZVQG0DSIHwfCOprzgGtDQjo3WgRSjiyN6qeZAecOT//jYNv5mH3E9L\nxOHcw8bl9qT5VrC+w29DFHuvc/AJg38N5v4OAAJXNz53n7X78AeeicZoWaNe\n7sf1tAEmjpISgq9wfGWAJl1+Yxjktr6dvpKunoHmf7ybXuifYRQVUUVKjhZa\nHgszG1dVrzs6LFwac9uPDii5MuFsZcrAFByXQkYp9IQPsnMsrXRi4vY1ktNI\nW9DPQut1mmV8fWd+84egTRAXF+VxfGkzYCzEw7uYi+4EiqYl9ejMvd2FqWTv\na0YeRotsJutmDDCpjqpYRiL0dJyq8qArdgWMU/YWkgN/XMetCTMuGyIwfub+\nDIuyvpJO1LbGcqDJ+t57PCKwjaAVfmLdhJEGv6tP4ZPvOzb4eveKCGrKnVgX\n5Fyj57E1rkhSQ362aM0/8Q8FtVlMN2clGPKHnMQSIvxAvI9IzNBU2Uo3oxR1\nJZW02Tuq8O/2k5oT5Aa1TmSGhpxId4d7TSTvlcKNi4DimBXvrJlju6aYfFIM\n6kHCg1zMCscAnc1ZBVGlBcktci/89RG5uy6azRyZeVFGGbBNzPu9+UQ8OyZq\nAKeG\r\n=sseU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"7b5b726aeac3de6eadc4093c2f054828098df5be","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.1","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.1","@storybook/channels":"6.0.1","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.1","@storybook/components":"6.0.1","@storybook/core-events":"6.0.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.1_1597146197420_0.024286275128249324","host":"s3://npm-registry-packages"}},"6.0.2":{"name":"@storybook/addon-knobs","version":"6.0.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.2","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"33b76d8a98a159aed10d867d26f26c93b7c937f0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.2.tgz","fileCount":93,"integrity":"sha512-ALM2RQzrXW6KA3xokjfMa+rr1h0zIRZkV+487SElMNomcUoiRwLXnJryowp8EgkKBvUzwHILNXjSnD5GVk0sSg==","signatures":[{"sig":"MEUCIQDtZRFY42CHiUkF82BQ4LOfPoGp770TIWE1+O+But8cGAIgGA4bKlbm7aAuRmOqr1HSZw/l/Ckt1qRIKRP3UY9RR00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMrVzCRA9TVsSAnZWagAAjsYP/0lkYY6DweMwxhdbiH5l\n3OK3t0I3ldcEcKAZD8uuMUST+DXLT/B8I9ZP/Cai2N39API/h0yxKoHuu6al\n3aOt0ArLgd/WtvJiNJMWkHVIW5XhISbgn4/8KZb+4WgDhxD0l+lNMRb6wtmo\nGIT2Bh0DAR3Iunv6PROenXBcBfIQBkBkrKwD1qxDGlNsPljhSlqwZYHUhqug\nYLDm7tzbgce1VOBHrmFb+4in6uoYKXOUpfFJR1ZY9ex8iqZI+EWIX21fy/X/\n4DTeOhf7mqS0eHmldYPJEsKjrxmJ1vTMgsSz6ky9SHCS4MM9imLdt/Dcthff\nIwfrcosseZryMKffUWw+wNbXET0o0qi5IYy+Xx3KbsO9VzMDpxtGNmpAtutv\nWVZ6sPH45oj8eByVcGG3LrXQT+GvC+3dzOqFp0p/7PHHhg3GxltcHeFngUHS\nwdPhg2GIJDScl/3Cf8cWkyUXzODf9IW/LkXpiJ8jL2NwMSX1PqFo5jCSgjwM\nC96RBP+KbgMAPxUvp7aG5pYMWjdvQZWIppyxbl8tp1o3m2ieMFQj6OzN8WT+\nWDdOvPapB8kXy2tTsJDZnvxcOrI7G49bRHeb0vVSM5MffYHUbfYfUT0D7nJB\n/JWyL1UjSc14A/vTyKQ9hHT4TqVLMUehRA9YPC2VoDhYbPT4WurFLYETOSMT\nsWxQ\r\n=j/+/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"f407796692e2809d3d5b9d5b832ee787097041ad","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.2","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.2","@storybook/channels":"6.0.2","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.2","@storybook/components":"6.0.2","@storybook/core-events":"6.0.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.2_1597158770704_0.5672088643471125","host":"s3://npm-registry-packages"}},"6.0.3":{"name":"@storybook/addon-knobs","version":"6.0.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"de8e9d7f52541f087f978a2b7959488dff7fded0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.3.tgz","fileCount":93,"integrity":"sha512-qbukPhI6un7jdOaZSuzVGjMYUfH2CShS5TvL/H6bdl0optH0GQeDGXwhFaBjLKCv8vjGn2KKL/dmaHyjFGK5RA==","signatures":[{"sig":"MEUCIE5bBhytyYisZaKyz/WieEEvGJq6tu9U+xIRQtVRnjvoAiEA+7NPT3ETE7QctZipVv6LXHSJtE5G9GAb+ZPJGCbizgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfM0jCCRA9TVsSAnZWagAAG0EP/RLxNCGP3wnKUIqwsZhc\n6GF0/vE136xX4merdMmWulZi0QcaKBlM0SDL7c0+4SknwEI06cZENFh6tt+P\nFFnJeSpy51h71ct43DdfJDCcbWJXAnq00X2zpdMGoZe7Xgfjp4DKjeVsKfq2\nhEvEYysNfQfD8ywFtKNs5FWrUzGGv1Y99IBUN9vFQ33UtI5TUAqUZcD2rtc4\nH5jmuJIlHaft5GCdNuDTT8XFaCGVlt55uFLkyOzZEZXevE3v0twAkvNNQmoJ\nVa8PpgEB9k5/Oazl1xe5Bzbp1cbS45n/kxk/W379EBw882WcUradOM7qC/SJ\nsjYu2ZtcxQIheCn4qPbqTzhqCuZCiRAkin/7wgeGjT8g/igOOp2a+7eFUyzF\nLPeJqoy62XvMg2s31Aafdibq4DTREv5pyS3BwgQvTK2+R3rpckvVGhBiWWzV\neI/oKylnGZtY/qmL1lY5t250Y2tIASXcXqxaSydR5k+iAv7S+HFJB7KIH2rZ\ngJpck9w7tEZmjaeGieL7nmS6zd+Hw739qwmnvImssl3aVnCO3zOTC92K+oiE\nGwbh4H1V/JAjLGhJibuu2l0Q/DC3m5FKXWf/hpuZ9MlGHmlmyzfCYq3gwVdq\npQi+WuCVFNtEsOk8YgBcPwtgn4Q7i6csVdnDiLckDxEff0V1gTAtQNMnGaH3\n8H52\r\n=3D2D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"0a9ffbf955848072ef8971e4023e8388772f2818","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.3","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.3","@storybook/channels":"6.0.3","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.3","@storybook/components":"6.0.3","@storybook/core-events":"6.0.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.3_1597196482342_0.03897208116258377","host":"s3://npm-registry-packages"}},"6.0.4":{"name":"@storybook/addon-knobs","version":"6.0.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.4","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8b85cc3c2f101168f1028a39177acc1ccf3f2485","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.4.tgz","fileCount":93,"integrity":"sha512-kcbRsQmuSdWk9sKX3KMpnc7jXWNqX7vBw7ArRcU/sKPDEE5c2zlIoOyUXORv8muJbDAX6Ql/83+aCrbZJ7uL9A==","signatures":[{"sig":"MEUCIFM0ld2Z2j22t1XkkJoTojwzRM6irf+bXmi0mjXLxnCLAiEAwr9rMQ42jAJCgiiUz6ZxwIuK7OdFSpFLTlu5d/F0KJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfM7RXCRA9TVsSAnZWagAAEwkP/RbgIBcXvOsU1jlFLInb\nE/+w5cNcBTJRrzGWGCX3eIU64em1Sp2ThUPKVmwmX87FPpYQegXrKAKwsbL1\n35qL2Rm9MprqllagZRHtTFCc74pFmxPcddWN/C49RwiLkz/6ENBZMbT9obDD\nRx3ZpPqDuDZLojgjO+wBZXuNd6rxoAIvQ6L7XCpn3G7T7WsQHgUYhSDNHf2E\nG0NJ2eHNU5ZgmvPiwXain3Fcj2ldrsE2trt2/kIiJOgUgTguhAhMcr0Hd8R8\nB7JvbbgFxK3e/TdOUUnz6UcVd9wnXDwuYkmTsbmqvYbItqW6sfkn/rL9hAO1\nx/zQvOuZR/ubXZs0ItAMJ5+c0yJb5kYU4U6ymkOKeWAHFfWQ+MPtRNmiGEp2\nyvuVR3yXwDDURCVJMCaSDHauhcHvppc9d8nrASieUKHeMcDa8hGIJn1m5iy3\nIRfkpmUMPDICkhgejnOFJ2pbVXYPjtZzEf1rR/NxSBxmkQGuztf/gageowEH\nHF7A6NhXljvy3dEvTVCp77eb8MdcBSH3L87/cRAL+QS1HqhYid2xetKZeHRm\nBGWDNpzJXvTViAOmD+2gfnBwOtdOKw1HS2+R2SoXRykOTVvpNWYTfm5xhSv+\nLvcvcTfIrmkUGH/ThHYLTyuB4up4EPFSPODLVWddViHHqlPqAE08ANAEOXqC\n6av4\r\n=QenJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"ca50653f3a10879a7e0677d2464677a86678c3fe","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.4","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.4","@storybook/channels":"6.0.4","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.4","@storybook/components":"6.0.4","@storybook/core-events":"6.0.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.4_1597224022704_0.7864216650850935","host":"s3://npm-registry-packages"}},"6.0.5":{"name":"@storybook/addon-knobs","version":"6.0.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.5","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8d9a8dde5eefb03cab9383b86922ce30c378d99e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.5.tgz","fileCount":93,"integrity":"sha512-P3pNBkIRyYTgT1R7dD+8hBBlMMpTawLYYyzpjGnsf8daYvEdZd4M73PPU4GZnucX/EhZlZLMDX8AW6jkwUb68w==","signatures":[{"sig":"MEYCIQCdTabZ/721Sr2HgfbAzDPBHLP0sFC1FkQt0GrQGOvI5wIhAJ+G6UfL7A0ScMO3zv/hb9HF4MYukNO0GnW2e0XvUZJ6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNC+lCRA9TVsSAnZWagAAKN0P/iEZ8iobVTm9ulv6v1Ll\nqxyrCMNZkzPFFIFK4SkjTHXV2xCpGPCwpVctFmeeOiAQEviTSzElbAqEUwB0\nOAGhRjj1L4t0EENd9X7Gq0PY2VZhwIFAYVKok2M4Ohvt0zG1Y+xtC5f09BWa\nOGeFaE9kP44UQjHLWyLmuaVRODQ+hJ4EQ0fx6BBmHIKWlufcnjRFMwmdc1FF\nDotIpqTixKOaQSoUv9EwsBr+SHNdrkZYZygNaF7nCggFE5BSMRn43qDU8lQU\nJ5sy/oWN3Xl3HloKmzQhkuTgcpEoL/rjkaIYPRVdO/tka10M9ACgFCme7LOh\noOOrJlXUwbXldBUUu6HR/V4fuklv2WGV2xal64+CNqgFnacATLbj2PVQfviI\nrWmlmmmacveLBZ8t05gkYuzEDQjDlXvSR+Xf25mCPNXQElzGSiUD/5iJUxmy\nWLTo8D7X4DdmDJO6GhPHm7A8sFLrEGsEUCL43oq7B3W39IsqHpEi53r6PLms\nZqZf13TaUByeB7NHhneNofgZWu8lucYvpucvM7MJ8d1v/5na+Cb1oBqyUJCb\nu0bdwj3zZid+SZheE3bsp5SlMX/CqULS2K0bZeQcxzv4AFlXvmvWH+zAl2BW\n5zISKPwFEfjx3ALUERFeMdmcSR/x5fW0icTGKzQUjn3nG6+cQ4xyJew8Z0+6\nFLHj\r\n=asZE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"4f6ce4ee3d7c060965f51c48cc0a75848db895c0","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.5","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.5","@storybook/channels":"6.0.5","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.5","@storybook/components":"6.0.5","@storybook/core-events":"6.0.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.5_1597255588969_0.3188861141858703","host":"s3://npm-registry-packages"}},"6.0.6":{"name":"@storybook/addon-knobs","version":"6.0.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.6","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3c1e180e3efdae80aebd77de816be44bfca40380","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.6.tgz","fileCount":93,"integrity":"sha512-8jk/FRFWyeFrBsDw6URuInKS5TyHagEStjxlHeEG6QqN50Q60LPGoIigt/axhdSsw3HewnoNGM9ZCUkODm/vAA==","signatures":[{"sig":"MEQCIH9gMZyZ9RCMFF+w/aVt5AI0LkKkv/DnRsOqTFNHmqAiAiAjkknn6/T5QsQHro3odxPZuaz4eVia/GmWs/29NLMdIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXhuCRA9TVsSAnZWagAArIcP/1PT/3rpSxhT2aTzVK5a\n1xya2HdOXkqqcnn3of/0QgaUwZ9Hp0wLhafeaTeDkUanS5jYtyHZrlJOGfQZ\n11JszeEfAoXfuE0eDeekOhQxbn/tq4Uy/saVzIFu8BhYssIsV1oRg5RN31KU\nCfPU3U9Y8J/owmuo9sDcaxzriS1oTtZWp2iOObAKuGtwZ6RnVRb7D71v2b01\nAf5FQIL8J/8UnXZ52kYTGblJXz8YcXQhb5sFmW48xvLsDUzzHSyphlK/vU1c\nzrIVGfDZL+aguVo319B7PH6RGVtD0+b1zEJzsTR+HAKIx+zlH63gK1tLVvZb\no45hQ7kG7MdA8xGRl1Mip6yTonsTM3MoTnEDBIx4D2t7SpZqpovI9gmD6F6n\nfU+VrndwwilmK/dzaxhELL4Nan2x32hlMALVKWQfQ9dNG0SaPN3LEpPCD40a\niLSOWcAojt1jBjs/WncNLeZyRnYovi/chX6LDKKu3aYqAKLJm0F4QSrh/3NX\nkA2AMhe23rnDqOitiJ34ahYPJKKox0f39FHjPHdHbXOBtZHJIamilokxAuo2\nyfacUyNK7J/DDZu3JFVhsezKRKbfsfrrsWgxSXkKjw8rcgk/yAKsJ0USNi2Y\nWfEy+hbT9VM5jhLn2kW1ii2ULph/M7DrnRx7ygcmoCXYzUdcjpbCbLo5KOdk\naEn1\r\n=/fr1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"5c8ecbc3456a5d1ac361a8abcab084f113d8123d","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.6","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.6","@storybook/channels":"6.0.6","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.6","@storybook/components":"6.0.6","@storybook/core-events":"6.0.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.6_1597339757647_0.7690254361322246","host":"s3://npm-registry-packages"}},"6.0.7":{"name":"@storybook/addon-knobs","version":"6.0.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.7","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3193795a70a058d891355a94723456b9ad045ef4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.7.tgz","fileCount":93,"integrity":"sha512-HUnHOAtS03iuLHrK53KNPe74RYGJ3ww3WFC4051yl+LLoyDthcMwmIMX7UdM84tngMu5otS02+XCJg3K3aV7OQ==","signatures":[{"sig":"MEUCIBaMeDrpnwFVAmThDYqUTZruAAhHKbApukwlJEOaLgynAiEA8lmZwvyBca7WPGLxfHUmqc6O7ANBLXXqjHDbvL1hQtA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNmF4CRA9TVsSAnZWagAA2LgP/23U2jy6pt5Hf/XzWweS\nr5Ojmho1+1NxlKeDxDc9Uny/Ery7sq7vS04nc/+UlSaCBae+M7cy8sQoDua1\ntbYNRRXojee4uP8hzzftrpdvyvV8CMQKtzvN5TPzl/LIYhJ330R7ME5ErhpX\n6aHZPclyV0Zdoa0sCM7NMgdDyeMmhWMEH/io/GskF7L0VWqJ+QI8OWNFHBVT\nk7XdwgA062Di8aabHz3sN5kt4GgbkFfGuD/HqJ5cYtI6uTDEmu8X1I+v0+Zr\nscbwKU1I+SU8TMfrQx66iHzW/A8mfc/11cWg8rNkLg/0pZFoNdB3eeaRe3Gf\ne/Vkyw+2ut2Y/T8jQw3WURhmPitvXZv2U1xUNwSCmK7aeyoSQWk5sFrSvTH8\nsLExn1cyKKSD2Vv/TwegxJmjgSeT8GznrsvVFKABa1lsBSYjaOToprYjRiw3\nZL009WQPMBrr1LM/a4noyUiSc5tdrIwThmidA2acGUUNY4hWEgMC4jNbcRmG\ncZrPBI1BsiXhhQmEydpViMhHjlwauZsqvZnFpEjj8YwAcNRVYQguVC7Zc4/Y\nP8DEM6BF5AzBoeEzd1cY0WATKgH8cGzxriWIuEX2FqvbNytMch5GRuxbMg0C\nqGwS26TTwO0+nBAueJrKNApeyG+eC34rObYsMYUfwQZx3HT4pcT0QYMqBz2l\nLyjQ\r\n=0G91\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"2ba756b82c1ad607ba5bde77a445a481ccaaf68f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.7","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.7","@storybook/channels":"6.0.7","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.7","@storybook/components":"6.0.7","@storybook/core-events":"6.0.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.7_1597399415565_0.5500831621397981","host":"s3://npm-registry-packages"}},"6.0.9":{"name":"@storybook/addon-knobs","version":"6.0.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.9","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9118b401a90783f5c48b0f405ea1481bdab547a6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.9.tgz","fileCount":93,"integrity":"sha512-gwa/TwnmYisEnrQN2Rf1N3zLr9TqS6ssOsOI8fQTekRAh/zhmaOIKpw6kXsPwv3nl8uXS8bCQckW3KzUWfC1fg==","signatures":[{"sig":"MEUCIQCr+5KWxIyCvHPk3fAa81VMiIzZOUNMxIWRjCSh886KvgIgZNVlKkJ3aYEim7lz307P4DVocKOFqFmFjBkEYP4p16A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfN46LCRA9TVsSAnZWagAAEJ0QAJnwGSFMUt92MLyHEnq7\nYZdMVi7cy53vO6MV5JNVx6k9Hr0mLeFsQBqKjk8OAFFWOCXh3NEcH7zFx9Fw\nJcCcWDtFbmDmd7zQ+fEK52UoMoFzl6bkIA5Q3Mho3nUw9s2vQHnHf4C3TBT4\nDGzWKkZ9rHxRTyCNbZHfCkUC3pUlQ24HnjenSQOi4C88BEXcYAv/fAqNTnax\nGRcoDfzRiQ8evTW2HSRkaJ/A0aV/vqkyqFRGuoVU2dP0xLTSutqZGYkrBHYq\nRiqomk1QcEnzWCq7dUtrxuq40FgQaxWUp6+LJsjw59Eori4z4hb8rJRu0MpR\nAybSolJB/KY6TAimj3ASeN2pgenwWIjXfCXNQ9V0VdcJXgb6rY7fo+et1+dA\nUZCwcGeKbXboh1TuIN3Q+OKn6Nn8ZvJPV2vLu7bc1hwDDZiY40DXzV3uXWGV\nL7j47a2DxqmkSTQsmlsOHDxtoNnybDrltdY6/vg/wIynZu6P6I0yqroIB1kK\nHamaqQ5CXz/pEnuI0/SZUNGUvUU312o96clVQBHJx//e7ESvPMawMBnQ2zXN\nalukyPow2KviDbp8he5DKyjh+KOY6e/XeYPWts2L2VAkD2E92kQ4sDFoyvMy\n66XSqzyFB6gvBHcfZvV9W+VSWTXadyPUpglD8fFLM6oY+I4k+1Y3lo7CRxTK\nRNXS\r\n=Am/E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"23b6d64e2b3655da296cc23b34798af16865d8ca","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.9","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.9","@storybook/channels":"6.0.9","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.9","@storybook/components":"6.0.9","@storybook/core-events":"6.0.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.9_1597476490715_0.7958839571036758","host":"s3://npm-registry-packages"}},"6.0.10":{"name":"@storybook/addon-knobs","version":"6.0.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.10","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b5a1b15d6712ffbb8d4cedc9cb74016bbbe010cb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.10.tgz","fileCount":93,"integrity":"sha512-EnvWgBrHvCnxL8HLK3kTY11QvnGVI+cG/8mFyVKoMGv3JcriOG6nq94S4K9H4BMjQYv+T/Z5140m508RsbRuzg==","signatures":[{"sig":"MEUCIDhuR2o5Pjyw/aLdm4hNzzYy/dU4fToyF1GTl4eHRdsyAiEAk/VMl3J9dPXto6e/jLT/BOsYzU0fpu0Qu5PUPZpXgh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfN6hvCRA9TVsSAnZWagAAFCoP/2re6cWkWApkYRldZvJR\naknbsF9dubpZfp+KW9ZraMHs2+VCkIOvN8IeOPQFsFDMD+SWBbd0upZu7FFq\nt9eBbtCOlbXMRsisKmIyNeZa7z2LNHt1XDfIDlqPhxrM1Q6fdmQM0rgiPYT3\nkTXTzdTWvxA5pGlt4qsjiYmuAoRZcLDHMOM2EPq5rh2jHboY73QDQws/G8YP\n9dpKx7033Lyo4hF9JQUXiViaOrxKfyJh9AkfuJ4eNSZJpWLauEJlz7oFIEjK\nt0aHStDRuhNR4XrLgUd72bLfJClAeeAUOsGje/ExWK0oU23Mv/gA0yzvNrgH\nsdWjQJ3uYcmGLf6i69LXTjJyuHp/1U3nfq+EPkHnzdpJZNv/etTst6qmeWIy\n4N+HQ/uKIUZUSccaXdYHDC75PLQ6GhR8dKIr7E9GBxBVAAGYa5TBgt/YbqTO\njbOO+oxwMsYfjjGNuo79M3a0UxSnwVvigL3cy/3MDJS+Cr0vHWsqIxEktYsa\nLCIOX0S1MStEuj1DCbyJ/rg7Lapj917KcATgCLtME4O9OryDe2SfNYF/irOi\nE5cjC8YGzr+khbkANidz+Re1VcrQVpPEJEG3j2U8VcShLo6X4FP/wnooiVbt\nVkpxSi0m1SNxL6jMXi9HPnGpTT/2gzyiGfIxRAsQrMml34mlLwLTGpzkUQLZ\nY44Z\r\n=a4J9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"7bdfb903373a524b2bd23836564163dea9f69372","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.10","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.10","@storybook/channels":"6.0.10","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.10","@storybook/components":"6.0.10","@storybook/core-events":"6.0.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.10_1597483119142_0.8068345125769472","host":"s3://npm-registry-packages"}},"6.0.11":{"name":"@storybook/addon-knobs","version":"6.0.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.11","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8ef2c23a66505767d76fca5f951e62ab40f63cd9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.11.tgz","fileCount":93,"integrity":"sha512-K7E+m1UfVmml3C8uq/UyoFR7tfeMuzy+esancMV5LVjj2jpwMBrjR9U0sb7JUReSeLhDUVoSRZY2pqC+4QgAXQ==","signatures":[{"sig":"MEQCIG0GkstX4F6csfiEmXEso9mwQdmm6GetfGe+7axSfT7wAiA0kp3o3jAW4xluJouCIQAKEY2T/QR2yCChb2nUJV3xtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOpIpCRA9TVsSAnZWagAA65gP/Rcp7WlDIlJm7h+AsIrQ\nIxuUIKrFEvQxTE/ciy4optzKKJ+P7UQhd9ZlflqVIUeO56BPGPnI5X8slDV4\nbmu3rugfDgan9kfV68IeE5wKgMOt+//gdLVgTW1WLH0CNpE6bcBHIuMN1nBx\nHC5drFZZHUbvWaqGTuJQsLp1wWzqSXKjNIqAWwFwqAnzAfxtslDq8dUb7PhE\n23iiKEwyzmp3Dsf0f2zb+KUcUA1zfzv8ibx4lvnD708bcWlBKRqA+uKRDvxT\njbVVr8Q+AbV5XbwVzAS4fBBNTGBJg/rj9OUsk7BFBQHTiEizAos1XXtF69HW\n8jfm5lv+JRAnHg8heb3yuE4PCG2VBu1NpTc1WlE2Zd0JOjho58gRGetFGu8a\n7A237dsEWhwzcgUqjv70xPRDFqGXp9tq46sUCvJOrGVmeOOQT1Yfm/iKuv+v\nqAIJhHsvPI/Os7tspD6a4c1ZM0JMU1r4czdf57ysBTQ16niyvHSMDGWI81iD\nV+eMSmadLH2i90vAd+6RDOmZX2Tt8iW0cgPHjKw6nqbU/sZ1pjbfx06GArIa\n/Yxmd3C9p5oS6eqNjXsYsVQ3EUcqa3BO/Fp9jgq5Fn7GBbdae8VfnRHqteFs\nq0oGvIGmDrYHRz7hTGDkjIvUEJWeVvvY6qtPBVGOhHlA8oRB8jeCCn76jR/q\nEKZ6\r\n=wpsh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"6aad4f1511e55b8c6978e556e4fa46184047c049","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.11","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.11","@storybook/channels":"6.0.11","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.11","@storybook/components":"6.0.11","@storybook/core-events":"6.0.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.11_1597674024625_0.9036154486800578","host":"s3://npm-registry-packages"}},"6.0.12":{"name":"@storybook/addon-knobs","version":"6.0.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.12","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"fcde8e1f2dc0f09d237ac571bbd73deb4ededfa9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.12.tgz","fileCount":93,"integrity":"sha512-k4qs3XXGAXMux5Dlo57Hs2D1NZ5zJHtxC625dQWhgdnQZBgovEK0T6Ny1VcZ4vr6dvlCF8IN6BKyC1cy9f0r9Q==","signatures":[{"sig":"MEQCICgJ9SoudjkkNc9s/6xboWb3Td1oGZcoK7SrZk8rKo3xAiBZtoetjyGe/FJX5wG+RbSdXQfDMZ2u4+l+u4ErPYcvxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOpZ8CRA9TVsSAnZWagAAJCwP/A958VgqDkLDOThRuWJh\nf1OGhBTf+q2YfgoXrwKZLuqb4u8dRfaG8NJQgOVt3HKoO3trma3zFcWB8Wye\ntW/oBYGnSR0CdwyFlvSv/lW5XLmco50i64R5dyDdzFVgIefVXo8hPIbHcN/+\nRy4RIOIfKluCzzhFOTyfdc3pub4phNXZ42rMtQVE5T95/8RhmKFsp2rBfXjZ\nYdOOrJ76WZLl9FEmkoHY31OtOE0lV4ERJ7g3UdF/CZmbM7OiCYs3iCqGseMF\nGp5Lv43djjRskz2wpriX/uTLlOu3ZYgqqJdJiAZH2XL1NANt1FI0yZJF2dkY\nOXSW/6EerfUhHT/KVtKGKYisPO895ZXabxmDZBsVfaMVHVG1samzQgvwcMIJ\nztb7fGrgr33niGHHf4z8exIFWTwr2pFTupfLaKrtdhrJEI2cWgYmjqyp4WPb\numRGfpNIEjc21CoqlR+LP5+DTymAD3thAkalutXn3rIOmq2nazsOPsohObrf\nYYeAPV70bUnREIa6BmchX18ZMySAYcjd21ri/rtglkra5M8UAcF84oGYyHWP\nva543GCyE7QQ4sUTjZNvDcPq069haSIf2Sk5iPscOLS8Q5ov9EcAkK1Vk8FW\nggtuwwcTAyNrd+AA4y6Sd5ht7Xz83hdieZLP4FyhibmLQgDbReo36ncczgD5\nyic5\r\n=cDhL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"ebb058e4090f2a697a6f2f16494d57a5e3a553f4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.12","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.12","@storybook/channels":"6.0.12","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.12","@storybook/components":"6.0.12","@storybook/core-events":"6.0.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.12_1597675132138_0.18297591959772852","host":"s3://npm-registry-packages"}},"6.0.13":{"name":"@storybook/addon-knobs","version":"6.0.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.13","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3fee8a282cfa7541d8bbf99fdc4aa4f49a586509","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.13.tgz","fileCount":93,"integrity":"sha512-uePItx6CdLS0fklZZ6v1VTw0KR6Sn26pXpgr4K/et5oTuP3WqDBjb5lBhSi5tFlVI1wMDMYSYNq0gfF0HsMi9Q==","signatures":[{"sig":"MEQCICfYHoUrxKXIfJNulyu7QSA1K7KO/TeVMfo0mUD522ijAiBTvs7dHGVMK2BwC6QL/+ri0B/FEIQnh94mlYBoZ2XsVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPOx7CRA9TVsSAnZWagAA8YoP/3zvG+5DY2tkFaivpJ0R\nLzjTfP+d/4ld38bLpXv66r2KhzSYbgJzvCdKfeoQmBgavVRCjeUkzXl+R+Ks\nHVPEhYJLqGzmdHoUjh81aP6O1yiNjaY7sZY5YS5FoGxxtXnXHTeGejBxn1gm\nlcgFila32jbh5VMi75Unin3g2dhk+XFWaS9G4BHNfZXLnubtMqnAMDDqy0qf\nDHzaaJpUC+JkoW1h+jWsQbFxo5ycgG0LlscQYak11eMBn8aoG+HttiFxiiqG\n3yo7dkNjeWZPm5hUbjc+p/DqULDJRPlPxeR0nIPGyD22My1zNXIZhPcAS7qb\nWmi/bTbYHH+IsGwHqkMGWYNq7JX+1QTAKsJazUyZPNULXmvO5QEvgemQKDHe\n9uEY6f3HVq23dF2vIq3eGlsqqtvtA6M8SQAr3lZk7ZnEHlLJGir55geNuqy7\nUrdJ464O749qEG4fb4JWi0AWqrmN22UmKbwiuJw7lpiZxbPpNnmHzv6hSLbt\nUy7F4+2y8UPYi+kJl4Ku3ForCF1DDRTefPf+FJsSUrZuWvKoaN1oNp5rfle1\nJuqe3wPkcF+MHkU89ReTthALrYbZBNkflPclim64kgd6r0Z/SsgKSAbmm9zg\nJd0zoD4oU0WT+kF1pSYzJzeqh8Rcn+0WZWp/jDfPkq3pA5u82NERQbhmDxtJ\nPlni\r\n=0qh6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"aa75d28f1b85794e343355487171655a71941eec","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.13","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.13","@storybook/channels":"6.0.13","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.13","@storybook/components":"6.0.13","@storybook/core-events":"6.0.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.13_1597828218946_0.0950169433900776","host":"s3://npm-registry-packages"}},"6.0.14":{"name":"@storybook/addon-knobs","version":"6.0.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.14","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ce38828405954b05a9a995d78fb4fc2f934f4aa3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.14.tgz","fileCount":93,"integrity":"sha512-/PmYSGmgluhf/0gUr3SzAXZAQBelpAtXJmPP0zOVPNXFDJWJhlKice6k77YvGlYUV2mgzoKP50G4eOo77onYpw==","signatures":[{"sig":"MEQCIFwGfxUZZ8Bt7/9+QDsovzcEwEukTHmEsuOwx8L9fiBlAiAgBwqF4ZroCH/fn1IWlqGMZ+ZLHamabQg9aUexEh0C2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPjCVCRA9TVsSAnZWagAAEhoP/0d/3XLQoosQ8P4f+L5B\nwB0Bxy44EPXeXfIzr3QtE5pAZnkibwqZJxIMvgsW8G62aNPQ2YXlLJ4IEa+W\nT4OLBHcEIqfXirchwsyGzVofrwzdYsz+HX4hj6qzG0bwwVTns4f2WsiqZsNo\nUaDW5IRnfjoepaMgyY9GsktdvFNHUSdAsfvtvG3H/HyKG+X5R/PXSTpjVnAR\n49ui5plkoraqxg+t1zPBOm8fD8aouRMT8Wj38bsUn0z6s2q3M5I5oV/UrcpQ\nBEX0LOI52RM4DRhGEdjcqB9gWTzOmKksJ706rjKtSqKeUf1h6k23aRRxEDIE\nFu8lgA6HiABXfxbeNViMkRVxYgmOO9B+8OGgKeVcaujRE9tKO5ZVwP+5dEfS\nFbeRcBTi+I1X0xb3hgb6xI0fGfodGFk7uG2iUYy9KZ41mYkOADwxhUOBigC+\nMwB4Yo4IZCbxGIlVn2mW+bFzXQdefN2SIcwlFYhuz9LDtWz/P4Qlf3cJv07I\nKtqFTAuv902+zgRQo9hUNyTmcpI6qg/qNPRMABL2WMjv86fwnpuZa/t9RECn\nIuX3SpKyiXgXrLUfOchOMOW1A2blK3MyTP34p+FVc4+Pio3GnZKLOX8cLNHU\nzkjfB0BQkdvzALWcqi02TqX2BN2GEleTFnhZxrtyDqd1XP1PUnhBBMRabJwE\nf5Mx\r\n=yNRU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"717fd675c952948094fefd9d7196c5040b95c736","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.14","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.14","@storybook/channels":"6.0.14","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.14","@storybook/components":"6.0.14","@storybook/core-events":"6.0.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.14_1597911188871_0.004956123105218646","host":"s3://npm-registry-packages"}},"6.0.15":{"name":"@storybook/addon-knobs","version":"6.0.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.15","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d3dfbd046ee146e684431aadfeec8b5511fb43b5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.15.tgz","fileCount":93,"integrity":"sha512-HPRIiMQ01Oty2iVQ9hlY01XkX1tT7mygxN4byOxQTNIh15CXqyVGxyIr+5tdCuu1j18jLeeg6UrFlVT+3jH1CA==","signatures":[{"sig":"MEUCIQCMF03T4NhH7ejiHSI+VWQHETePlGB+RAsqBvpUlbc+iAIgZppfOkVmPFNngjwvQVOuostc2Xo1ujhLmqATUtPSYUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlYhCRA9TVsSAnZWagAA9RYP/RkXKfFB6sQWGn/vpGDo\nvb1pSvMYa9KZBF9wMXKaRR2Oah5zHRM2UYWz/xf9LJqhZ8ZoSD8CaTZVoQwa\nZSXzzlhvjE/RPkKmgWIthIP0W28M7J5dO9RMYMeiBejznN06BmQBoOZVJvAC\nf10S4eGZPKgCl2ByDA1VaS/VisT1Y16LZovrGHhxQWC99N6z26WmPi2U5GKm\nHo7fNLsD6mPQwpoJE5vl8R0r1tAaqmueJo1/Ftfd8EfMado7fCb32CwFMyap\nVZqMCIPNeGEk0P9NxOfOMyg1TCsDk1TofmS/RsJY983yvilVu3t6iGaxDmRd\nXBrqAgTZ8okbaRrsNoz9kv5BTxdTVHnMrWrpPldfhed3VKyGTyDkbFjHveqT\nzjga9U2RVJ1YEQ2hB0SvjElx9Jy/TLOGKL6CtyKMeLcIqZq0dQDfyy6y8BiW\n/2fDb+y1voiJSZXedIve3JNBJTbEzVvkFd9MNH8kFsPOKzP+GGSy/by+8ysX\nJHZvYAO95le7V5fsDy3NswJdCVnAkOH2xnIKYMR9CTNiVCXoWAxuGYFo1U9a\ntbQqlAHU1iP5s7ryYH3rDhBZKESxQcMGVQRWHpvaeXcCDQ+lwUQSkMwN7bZC\nNA02wbYLffsl9PVxXiCg5uuH3rJwYYl9ahH+4am1wmzxRW5rzodd96EXPOQP\nzurv\r\n=PUWd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"ab2a9cc10ce49d8e534124881bb2264bf0893b9a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.15","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.15","@storybook/channels":"6.0.15","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.15","@storybook/components":"6.0.15","@storybook/core-events":"6.0.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.15_1597920800637_0.8972175888286631","host":"s3://npm-registry-packages"}},"6.0.16":{"name":"@storybook/addon-knobs","version":"6.0.16","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.16","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ef7b9a67c5f3f75579af1d3c2c1f36205f77f505","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.16.tgz","fileCount":93,"integrity":"sha512-//4Fq70M7LLOghM6+eugL53QHVmlbBm5240u+Aq2nWQLUtaszrPW6/7Vj0XRwLyp/DQtEHetTE/fFfCLoGK+dw==","signatures":[{"sig":"MEYCIQCYl76FvRic9FM374jKikP9YyK8hbWc8NwzXksnLxG9WQIhAIfNZnm1Ojopqr+lYVonXc94dmZ26yFe8KUevNcfDkgS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPoViCRA9TVsSAnZWagAALiEQAJhhngYl9cZLlxTkaZF7\neaY147+vYqkyb9D6r6U5aRGZcGMv14V6LvajNHSwWpA1XldDHvFIfF7Kulh/\nePniJpDG4dxUvsOdhK6jjA8lkJMhQfJC32jaCh+HgyI4FDuQknOA5oIcGlzq\n/L6Dbl1BBe9hLJEBifsNrvtbRHIRngxVyCjowS5xQFxy5nYaGiUsv/LqCwmF\nqSkONS+/HHD7PKnZzDvzGBH94kDNk5gWSJ6Nx5NR6tPj+iEnJHA6hwZxhQOz\njFoiLmes7Qo432bsUTAP+GS9YonKf3w1EmSdydFcy5/PVv4l5usBZBaPMU/L\nDv0Qjex3GJXBt8jm0ha56r4T9uIpjLzdAflsYz6lqKITGSlVPd6z1Gi4naSC\nBhqTrYl7qYuUMGc2r6uuUcg0y7rRhCdLrxwJczXvg5Qi7c2NHXTKbGVXl5O4\nrbaqHbWCAk1gFTBsh6+68UyooXnwYQRZsrfd+yWss3ab4YT58gqZJWEoHwAJ\nnfQj4AVDPOAVygSTFfsiKjmuZW5d7W27/VooPW6sZZetLCOQ56Ar5ANUKvMb\nsj2M+avQwTbipjx5TZ2quR3SzHF6Ome+f4rKJF8H1WYyWtGVOdea0LS0KIx2\nBVuOnz+z/h4LGPX+5P97xNnHmOas3YSVdTX7OGtzHzkDaEqpMY4r9ebOTd6x\nPTPU\r\n=0M5t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"f01f03d7f756e32cf6f8cc8c9eff85799d36938c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.16","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.16","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.16","@storybook/channels":"6.0.16","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.16","@storybook/components":"6.0.16","@storybook/core-events":"6.0.16","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.16_1597932898386_0.09815525906859346","host":"s3://npm-registry-packages"}},"6.0.17":{"name":"@storybook/addon-knobs","version":"6.0.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.17","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"33bcf63602796aabd5bfa56f2db46b2e0e7f6aec","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.17.tgz","fileCount":93,"integrity":"sha512-ZBSOWS6mgVm7vhZWMPXvlfwEAfRNG2sQGhb3MqJujh8DOROvje8yZ3UKc0aba2eEpd0TiRy4WHxVlXeB5pQv5A==","signatures":[{"sig":"MEUCIQD2DkKxghaN3jHW+j2FtzNNspYgVwbIaM3vXqElbuTdDwIgKf8HWOdei1+eHp+CRInoXmwcYog/qeg5tzesOmNTLF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRFX7CRA9TVsSAnZWagAAf4oP/0JMwbf3mzbujXsAIiXK\nH4RW0W1q4OR08MsMUSrjP6YSaJZIlDLd8iNH8QuFvEDcIBqo89jqm0gUWRND\nsYwuUCTAFbKSBVrIswEu4LslP4XnK9yKAFf1pUogKbBji0FzvJEfp5nDM22A\nbZfSm12vTyJXkcGKpgCTjLVtAkdFnMq+8BcEMw9med6Sb2sS9M9TQWo8sR3J\nwIe4CqHAAYA5mB2gsRy2uF0HbJf798SY5uBGpKoUKtHdfV0rkF0JXAaiJRFP\nPDsEbTznsY8xwaMbOqYotIFtUspmAYRrJlG70Xe9W6P6gKkFmbv/F6jQjHLz\n3fDV2FeNahuyOQeNq2v/nxacWB2+XZ5J5lhXGeK8Rx1dl0gkIfK+iEfymdcI\n4wXVG2+2havEwXmANlKFK1e7FZMF5f+EwLprYmpKpDd/kuJhQz128b63WOxi\nl77UGs8aZGvx2fZTjHAxzMQ+/RJvTB9s+5bi/JjMVpPByaWaL5SgarHNbJqA\nj0HO530HnHfEyNPk5HNQXqmV/JeZwhIxg9JjHvPSdStWHmzLLXjPftB68rb9\nIqogHgmSGQze0hLkb33iFO5APUPszp1APSXv5w8nhpkrSaURAvNa098MhYFI\nzhEuTZ8gMTglr4Lw2Fgk/lHxnsbsSXa4Smsh2lur3AKFUD/jg3k8AslJk2mm\nPOiG\r\n=b/xw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"cfe34ef01268e3b1607c34da04efd3ed290f381c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.17","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.17","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.17","@storybook/channels":"6.0.17","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.17","@storybook/components":"6.0.17","@storybook/core-events":"6.0.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.17_1598313979005_0.11601253441804715","host":"s3://npm-registry-packages"}},"6.0.18":{"name":"@storybook/addon-knobs","version":"6.0.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.18","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8e973d933cf5cb81d1bb715f4661ac07ab2a38ef","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.18.tgz","fileCount":93,"integrity":"sha512-z9qc8C82JZaS+cEUaDRR3LfwLnrOb48MPikDdlSR5lWDjRg4CtbD3flq7rgT+EaDeDepi0l78+fFwfFnI6cKkA==","signatures":[{"sig":"MEYCIQDspE3DJmTl4y3EYvSKGcjnBt1sZSRqQCVEPX+5hg8qWwIhAIrYRpZdl1lmn1R6D8MtQ9X/dNhwiLbqQYoP6WfeJFd/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRT8SCRA9TVsSAnZWagAABrYP+QEKtn/Ln8SjIF/PzSmc\ntu56AMJ7FcQbMXKGeE6HeASkpoT9BwxKGk4XMDlgn0gV8y/bWhXkoUhvefBQ\nq1iMloapIAmK1pl81THSuB5xIhqvtpNxgXjcv1kMucAEU1bz7VjhzfWBJyUT\n7AaLBKYX3i+9JfZz88+SZofSr4eBntN4+SuZYUHMtopjmmRDeTE0YmCc4on4\nkmoRH5t2fkiW5ISEgqwTLY8enPTixxBmgo4R0WRJTbqEe0CKhhFNfAPEOhVZ\nRhuEAVyC7x3qB7GqV2VGmQSC/DMw5zOWTUVwaIOIII6cHxDW2g0kYIoigUGB\nZq9C5gru7lnAJnc+dStS0InBN7dlv26fAEHys5dvoy0z23bdgY/r7+dxrvsG\nkhzlDOXoRM98wnTAZhoEB0+SeqMW1+X/m1t7Tolg1z0CT2tqJBE+RrcZVC+a\nY6iNJ9vOYnsAJjLPMdrKJybCEXR6omY89lV+9JgH1U0ivhfSuPXhW69hQJPw\nB29+v8uNAhUsRhFTUl9gElHWynLm2Kto/fm1Zw5OlsCSUmEk1E1RxmmLaMG0\ngpYOrC76Y6GdvUUMgIOgQBO+oksDJqntiUearrCXcz16FGQCZloD66cKrzcj\nfz5VfYiv5R3zuF6qW+Mex5Wo6URMpXhS1dYnhuwFXLEM1AxCHJ9FrXecj6BD\n6y61\r\n=Ju0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"7d93439c4715f8b306b6cf2086358cee60d8e5c6","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.18","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.18","@storybook/channels":"6.0.18","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.18","@storybook/components":"6.0.18","@storybook/core-events":"6.0.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.18_1598373649640_0.5491386983166682","host":"s3://npm-registry-packages"}},"5.3.20":{"name":"@storybook/addon-knobs","version":"5.3.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.20","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"011f4fe4d8d08284a857894f1ecd2b79c4d81635","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.20.tgz","fileCount":98,"integrity":"sha512-odfGwPudI46hjdJK4gCNure+1EvUf6Gbs3TAaFdLzbt2mQ931hfLJ3m9PyYduy60Q5Ffswr9HYJQvIl5kYMWNA==","signatures":[{"sig":"MEUCIQDWbncH7e5aa7TMQ7Ac4JoX3pD0+/15ie7FuR29c4Ac9gIgL+X4EN98qKcKzmT4PyseLox4zY/rUU+DPKxhA4XOdho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRpVUCRA9TVsSAnZWagAAa3IQAIjm3bEEqL8QAJJ++c41\nlbNc+7KZEhp289s0M5BzEg8K88yQiXXuCE/Wh4oFGUWH4qoMQZMWBSsXsEC0\n9f3yvE5/L6XthG5PpTl3Okaidaft3B2K2l5fPyODMRiVd3KG2Fc0NbUOYiFj\nXjmSxTtQojQI0MYsOFxu66qVW4sh28eyp3MHl4NGKKn0T4Vdrl/S4seDz8+D\ndkp7O54rt8q9y/VJn7P1TJloL5DNZMpjsvr7+YTe+CZQYbU4rE+2Wh0Bu1S8\nbOurcVty5YVzOdn6P2wLCfM7Kgv1x+PraTRqi4oFZnYF5LuqwVb4TOZypnTZ\nrznEgrQtvIchRp9EMZS5OrwyQRtiQTsggBuYFMSsNXNbljVsUTCUXXAPbMn7\nw+ptiz0rAF8Ja6nVtvEu7JEcCK02INZkMnFOwz+G8XDTfluKniSIAOj69raS\nU9CX9PxXrZme2SBjmR4JyjJJA0ESTm/XE1jTgM/2tUeyDQkw4hW18mj9ZAJC\nhUZpQ3old8dHhmusHIpdj/p5IXhlTqcu8qY6qd/qEMylRkspxWVybdyLvyIj\nM83H6ish9CgsI+rDKpYs3dIEjISCOZHjcbshGO8r5SigvlnmgKCYPidcEc1z\ntsdQcejWpwNS7sCS782Pqxm6wSbbLB39Z4hasYcmVSCdymFMVmgk5q0eW4l1\nd+6o\r\n=PG1L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"966a826ccaed39fd9d9e9ab629cd745cbdd56d98","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.20","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.20","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.20","@storybook/components":"5.3.20","@storybook/core-events":"5.3.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.20_1598461268435_0.40405627684650103","host":"s3://npm-registry-packages"}},"6.0.19":{"name":"@storybook/addon-knobs","version":"6.0.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.19","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"da1845de8ad080278cdfa8fee5c8bf63485fdf27","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.19.tgz","fileCount":93,"integrity":"sha512-6x+fCa9IPJ2zCPK7JznARnj+m3kDr2FmZe2otSo3a/hytSQyD+EhqMZSGqhXthCA/W1zUwNE+o1SQs2yLoiO9Q==","signatures":[{"sig":"MEQCIGuIGxWRA8luuzfhD3VZ4uxuwGgIG1WyYeOrVXEOqFnHAiAGOM9KqQ73JoYho7R4OC2r/TCOyHKtLemwS+CofYAaGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRpqSCRA9TVsSAnZWagAA0jUQAIfsfEE2SztCVy4XuzU+\n7iFZyS0zHUb6AhC09hyiW6RURfzkiFfpEb2Pu65+98bO0dc1YqqGVFmutZci\n3mwOlLwslKtZEGe0d1U6wgIhETB7EckhkhwXlZtfZjolJ/GM2TAIB+A0FFui\ntDpjy20RGsflYtxG8Wsr/3GVX+azHj3d4+zQUW0IvkYsuuHjfJj7IfSPTopi\nX0F/ZKyy2FBTu647YWDE+D0BTLfASTBHircqIAS7tJEcEbg+7MDkCD/1HNcO\nHMWrAZ9radNvAe4C1HSoS+Eil2FfJOlLFdXLUHHrTRTaqP75LHf8hpl5mKWM\nz6dyATHfGC38Z33VhKIPl2Gz06QnkuC4OZ843OC9wTnDx1TTMKPWvfIKVgrj\nfYZ4wvMirxW82oE3yyvzBMskojjXBoJRJL3wZcMVwSGtGNPpAqGxYbS4tCMO\nQZ65Pvou1H/ZLcalTmcJ7hiAYr9ACLsyRv3dHWUjbG+yywtAGn1vxj5TigdH\nqx+66wv0VQIgknt9OLm9zmVb9AXovCq73UnzEkmSZEPdNrOt0m9Uv1hXmWbT\nS38C935mPATOFGhMeiOJA+DgKCWKmJqlKBe5U8Un6lxHYDP0uK+qic9B78PO\np2kQbHh57Bq9kX/fran+N/XtHl9gelUWxpeLilI0QM67j7VrbLgXxP072l8m\nBWyB\r\n=LQMF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"8cedc0f8a369ecf1f4af9d0a675dba934d685870","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.19","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.19","@storybook/channels":"6.0.19","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.19","@storybook/components":"6.0.19","@storybook/core-events":"6.0.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.19_1598462609550_0.7398881956203891","host":"s3://npm-registry-packages"}},"5.3.21":{"name":"@storybook/addon-knobs","version":"5.3.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@5.3.21","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"dd721700e5eab2969b3854dc73c855a03fb7aba8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.3.21.tgz","fileCount":98,"integrity":"sha512-w1g61n2j87i3bzBltNl64u2hH06xQHKitfWWKBfRCiy1plC1hjZQ31GiUrA7uLUrD4NUx3GNO9dw0cDTnIIHRw==","signatures":[{"sig":"MEYCIQDqxED+AEFZVgq6XywrxOytqIYttHjnu3oHiiPPazFmkwIhAI7jAp8Xr15FDYW+3mldtxcd40ifHhwLucWQc0cBPMzk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":209345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSEw5CRA9TVsSAnZWagAAmDYP/18jYSCw/4O3pzld1uU7\nHf64l0ylOLlIgy7CJAi511v6Gt0OrJ2t88nTK/E1oA+xv9XoWuXCX0MjfHiQ\n+4b1BdEL9VOp10G7peHP5uIYBOlXSa21Q6qO+/+A+7iRIW9EF940ueEj1Vke\nnIbOqD3ODgXYkUwBoAEuvT3KbvP+i+rTYZVz3FShXc0V7K4STPKA1xqC+l+Z\n51LXZm/q4Z//+mISYj9ahTz4YllMV0ZM9pB2yfuCLau1/eozPWA18mf6UZNX\nq4+oc3fAmv27gguwL/bxxdfUH6bcg+ybiNAh1+UVSPMV8fi9fCkzK7Mz9WVK\nLbjHetzePAhK7evdiDczOPXjgvbfEbXK0BhLiY0UUCWpeBJnFubVk3NKnB7B\n3mIZe4xf5uHjK+C4yz1zMKXJb1m/VcNuLOor9+XpB1pT0hd3O0un0s30gwh1\nMBEJ8z2tSkhYLoy8bWAIOXPxGdDmNXsE8s8fUZUDhGMIMjbEC3jIEfjZraHd\nkVKXPTpMNBWYpwxz5s3KLP8fAKZHqT0z7CmmCSCZ8K48maC3I0fyAPmFVaNF\n1qd+51QtZK+CR6RzKRREXWK9LlQn6m281J6dQnt3aj06K0kXoIfJGD4hzwfl\n7Cb3i/Pm/K6/nofqIHMi5cu+27pA1abTv3UvaWMXKQ65QO8RkPR9hfzVw0lu\nzdAm\r\n=n9R1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"a939e7204a448e9d24e5431f1c9dba8dd7ec05e9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"5.3.21","fast-deep-equal":"^2.0.1","@storybook/addons":"5.3.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"5.3.21","@types/react-color":"^3.0.1","@storybook/client-api":"5.3.21","@storybook/components":"5.3.21","@storybook/core-events":"5.3.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"@types/escape-html":"0.0.20","@types/webpack-env":"^1.15.0","@types/react-select":"^2.0.19","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_5.3.21_1598573625152_0.9348087545602983","host":"s3://npm-registry-packages"}},"6.0.20":{"name":"@storybook/addon-knobs","version":"6.0.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.20","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"2287eab2bd54aba72afeccfc40c932e767f3bc85","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.20.tgz","fileCount":93,"integrity":"sha512-th0Zji//hNw6NZiQvhngl4HFseqh8biT7YKO7dj1h24oVFxOor6eB/0elepoBUapHmOx2XBqdT9wtmWH+7DOIw==","signatures":[{"sig":"MEYCIQDBiFS7stpQEpdJ5Ib2TL+oSIoJCjEAI4bquNcMqHoArgIhANQ95mV3/4Jxzr0Bn4kPdeezrdIxI63oECjRoKX7n7mv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSFOeCRA9TVsSAnZWagAA4DAQAJHSbwAWXHdM3qeGxKl5\nZg6NURWnzJQOQr/ZbjxIwVsoJtfyWRGerr0LGLoRzTNGBfHtSrb9+Lj2guVg\nz1d+qBjoSFqkL/jpu58wN8gBRi+qXe0tq4vRO+1YXA6Tgs/433IwEtAqsYY9\noERwKGnlnU6cpXqIGD0mrVbzpRY8e3cjvAjPw08NC2/ry22lQs0nVKPc1X/0\nNDuJBsB7I8cfvBp1YBOytZmiLd/ZtehjmQWPmJ0Ew+PLi2+8grtsk7mKWHFE\nJudWcqpSsQjaG4ze9QscP2sA/ArBg85qPvx5n4yaMXRsuchvn8oCxuubQfRF\nkeYe4UTZIfqyp0hNOiGE+xI9hrBlfUEwIHQYkRSl/enhtpGSG8uCP4pkUEVF\nYI3ceJa/ACA7dHri2wdXfGfQxHqpkUS5/QvpXOFj5ktaDx9LekwbKMx8uCRA\nlc0E83pig+az/MpNwg0AkFW4EGUmBQGeG82jPcNl7360nJ/kEPqYTtYa5bRp\n6nxWmHBIoCRaC0RsExccPeBS99XhPcqMofEb1U2LqgS4kpPyojJh98LaFwfg\nJ93nJl+2HWXaxo8J+xyqqlOYbKqdjH1uBbWwZ6JyAJRyfgGgAIoUgrl0bFNj\n0LIJdIeFH963gpWhtN0+6HKC4J1etH4Nk46tQC0bfjiz22tK92cokJCfL6YI\ny5zN\r\n=bHbw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"d8b9d25b69b8bee488265829beddbd0ebd38fe8f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.20","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.20","@storybook/channels":"6.0.20","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.20","@storybook/components":"6.0.20","@storybook/core-events":"6.0.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.20_1598575517412_0.5562190935086553","host":"s3://npm-registry-packages"}},"6.0.21":{"name":"@storybook/addon-knobs","version":"6.0.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.21","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"421076f7880ce1b4804266766122aebcee9b023c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.21.tgz","fileCount":93,"integrity":"sha512-QHcdL08wGzw67Igpow3wCHWq0WfG5E/q7EFwOwTvr4X3s8VBjuauVdWolcX1/N+z2U7m31rcD6tcMBMPjUibmw==","signatures":[{"sig":"MEQCIAGJvm/Wut6TDevcAAExPxjNhEUbkvdDmp0bUaZtNxY1AiBpXTFCWI1HkNW2A6+q2mfbDiL/VrYppdNxeQY39uVxlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTOmjCRA9TVsSAnZWagAAMXoP/3aavGg/fBDqd1puo8aF\nFsPtBKcoZDJw8RBeKMQTUcBJycxOkTqvIfmXFQeNLV7LQmfU1+LlLxfeyaY0\nTbq7+Xaz3G7X0RHUvEwNofC+OFkY4piwGxtHAgYz8H2tSQ0sUqdDpIfj4omm\nC0ryApGSuvxTSqH70DpPIOGKCHNPV8fSpvAlk/b7GzV+nxr9PenLgrNJztVn\nd+MXZb2dM3oqp4ex+jmh3pK/38tYUo8Tjwlz8IGkZCul2yK8mIMXTimJVn6U\n097kvWABQ/0Qy6yL+mLjaW63w93zw6/+q8fcOM6prI1Tsvdy9B9qRE27oj8c\n14411Oe0fZ+ki47mT5PWKLhDJjkb2YfS4Qgf+izJjc0t/Pee4BLANnxJY2I+\nFFlX6mniiDCLrXn7dk8W855R0xZZ3cNUoZ4X8Yh9NGm9DP5aHLfAU3mXW8yZ\nc5RrU4bzamqQ7k5wHE/a7/UxZ6phSXKM7DMKpF/P0VNCFlj0GPnNa6UCRbyX\n9w7Wn4UYtNnG+cSz44Vv1QQX9wUD1kBxsltxVcVx0HIbflVdaAKG0YqW4I8m\nbUbFa/K71xcKfJYPqa3BbRizKXt2TPH10Os1pOnogtFMSHOYyjpVSJIhPYdO\nMDlRZV8Z5T69R/tvojy4HYDeEzyElLkF1L18hxqZs5Y5lg4BfQaVs+wmn0BO\n/RW4\r\n=e7w2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"fb14a86c1cbf5eb21023bf2021eecdea9c6df83d","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.21","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.21","@storybook/channels":"6.0.21","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.21","@storybook/components":"6.0.21","@storybook/core-events":"6.0.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.21_1598876066889_0.9041208970458825","host":"s3://npm-registry-packages"}},"6.1.0-alpha.0":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.0","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"18884ea256e3f807fca348deb19e7dba39c5fb3b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.0.tgz","fileCount":93,"integrity":"sha512-HMw9uYDIymRZoREt9aPFY6v68G/oYhbYFBRxlnZmSMbvvWMPUodcK8qxU8Dp75Z9uI25UTjLOU7y08m45NCXsA==","signatures":[{"sig":"MEUCIBIfecjxdcG7dhNpgAzNjgInjyVZ1/INSr7+ORmC/ck/AiEAiJH4GKjcu9KGU4qlWnlJEuHjhsoau1dsplRn33UV0zA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTPOaCRA9TVsSAnZWagAAIMQP/11SB3RkEMMXOQ0TNg8R\n/GAR4zUv0mPnhHuAerHwxPndXhieCTanG9IkCPpYzY1cGzonAOHWE5ZY61XH\nnraoWLifW1wx2r9xYhvRvT/Ve1qdHND2w45bI6N26LpwBkQjmhfzAqVqV0DU\nUgoPMWEJ/z2nh3O1La7YUEoVvIkJLOp/JXUf+Qc9mXRWw5xsrnoDGNqfeksu\ngvhNhTkBJOz++6FEsy2M/Pcp7xPXyV8jJF0Mwu2d8FMjQmCBt8bsMEKM3pwu\nSSJyQIi1Atoa4VfNaivbH9fWQawjXig2BfHtqB8xOIy54EsK3OcbfypYo/v9\njNNGMmtYrKdNw22b4KYB1MGjj9IbRgN4yNzen4ju9FRsejkI4tneMQp//uQT\nYckN1ZRIxMJ1oy5HrWJ7vyUnCEsIpitd9I8uvffn68f+IheetsL2kDzPmLUn\n7X1bXlwQi5kO0xUIzVzUfuxhAk8oZ4b1Qxqse9eaHlq0J8OhxQJFVbhJ5HvA\nR+ePd5f2V/b9UPlBPCW+V84Izj33w4RCDU4kuX/87DPP65gHdB7D4+rGYqRb\nkp82eJZ1bvtHVPDWSqjXNfRkHrwmPk66xomqajHS44baOhExxvRu3xcc+zlJ\nmYPpHgYiPUkm8Wp6QO5lgLf0SS0wKi0+rKwxA75BZdim2yQ/gKlRUGepE3Ws\ntt2L\r\n=1WgN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"9049027832d9c84267cd720f2df8cda33192ebf8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.0","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.0","@storybook/channels":"6.1.0-alpha.0","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.0","@storybook/components":"6.1.0-alpha.0","@storybook/core-events":"6.1.0-alpha.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.0_1598878618476_0.748783166596851","host":"s3://npm-registry-packages"}},"6.1.0-alpha.1":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.1","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"81f706f2177e324d157d21d98bf732f3d0c9bd83","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.1.tgz","fileCount":93,"integrity":"sha512-LujXX040Bjjf33NC09ZKFMbMOKfxcWx27W4Y+XbRzpey5tKpXVhWlWfVPfmgH7HLH18lpkMg1rSRYJU4wABp8A==","signatures":[{"sig":"MEUCIQD1Y7/+2bD8U3ZSsWghNgsaLpGwLkNGewzDoNVLppqDzQIgeutiK5eAYtjhaHHoCj66eFfk+kS+//CporH5hYE/pM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTQkCCRA9TVsSAnZWagAAqKsP/A0O1tbT6oqTScF7ezrN\nG0Wfz5y65xQGguf61nYXs9eLN/WCDBdQgQ2u5gEGpvDSX27ekC/BLcV/P1OT\nWbo2vHJq5c13UBE13bH4Q4GCYcg3fKJ+LCvWTdYT15aKbKYLEJ9ci90Q8xqn\nzybTkZbUD9W+EeUwHMi+3/FLPAkYtQIEg80DiAlhaPiICHP2shZ2b3P10PIU\nn68/dWXjrl6ETcV01w7Vme36s4UxSm/7l71gYfLNMw0zFE5wa4lNXEBECois\nW/yTBL3VjXk3h+n909pgSAzY7AfyV6lcEaU2aOWTXQJna2CEW/hoiAu1awdu\ndyzF4VVxEPUKkUt9hgs1XlFL6oDBkFH18KauA5imEch2gNUWJydFJ9yON5fw\nP3iLm19kr2FL5qAwgwGORD6ZI2qFjov2r0cpayqJpp9nkWZK1RssiSaXlpXn\nNrw1PqFDiEmQqVrGknwf/CVlzPBovr3KtWpH/rAU32SaUFMkiRs5lvVyEE1a\nUooKJu0EmToCB8ig99aUfdjt43RAI4XNoWBirE9aOaeWAZA1ZbWB2FAHcPP1\ntXwOipNRHOsvRZoPXZDyVJPaTzHj5DZM/hr29+S7kr2tZgV7pNbmilMSprMb\nVe1N3O76v0QPCnn2cPkaE59jh/MvFwO9waxziBFLUEkYADYeeJRUX2iOmbK6\nvWjM\r\n=ACrj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"238a06299305d9b52e868ec7791ea76675310ddd","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.1","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.1","@storybook/channels":"6.1.0-alpha.1","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.1","@storybook/components":"6.1.0-alpha.1","@storybook/core-events":"6.1.0-alpha.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.1_1598884097862_0.14319964232781524","host":"s3://npm-registry-packages"}},"6.1.0-alpha.3":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.3","maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"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":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"pago","email":"patrick.gotthardt@trivago.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"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f2cc8328316d4d3bedc7db25e5629e4ce25a6e8b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.3.tgz","fileCount":93,"integrity":"sha512-y65vIOptxNhevPYluahs0aq+vAcfkWU5uaQLPNx8GE7lmEAwYNtZErHasyPt1tD6RlMiyq9qUGWdYvdNtnirfQ==","signatures":[{"sig":"MEUCIGClMEqlLbbv1e0XxpjoFi+jaSAm37e6kQoJmvf6dR+SAiEAzT5BSMjrZeieerTEKAHeXf9qkFlYDzQboWQxa8r3irs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPgHCRA9TVsSAnZWagAA/QEP/07HjB+byA2UP61LbpPf\n2pGe6cXfUBc/Bo9NKeAHcLaOJHQeGx1awJhbUAzIy8/Wq94ZogxyrW619J9Q\n14Gh2oxiyWZkze0i8wiJxlRV6pukG3VKp9nSmvD0k8bBSuK8ZfxrCv9Q1d+a\nGUpBymlIpqa4LWWv/vTs4ZlnB12Dt8l0ShHOB7EQ9G+L0rFYttiqPL2vmJ0i\nDekk07jByhIZpzuHFnkDmL6uPPlQFgmTudnWiYGOGBIDNZuQN/Ps1TULIuoh\n/3+RXKf80kb9yjvCP+syJ2gh+UHDO6/0QnTT+sPzi//QUlS6JocQubBPnfOl\nhYhq2bZG8J1CruiRLxZBDoqYTRVAgZ9VN6Db1QKo/u1N4+z64sjbnCeC5Cyk\nG/NmymO0GwjO2WA3HcIlVI890nq2quzWLrezleDvOM9MOzZUbIgzZ1h8qZ+U\nnypxqUfY4+ewmzubKYzacoespa3niHBly2e41sJjXRARCiP387Ltm3KwktxT\nd5cY9JpdZrUph16dKIYohB9H7XOnLtaH1gpXeyckqvnrY29QrOZ1BWFxYS31\n4EELpPKQw+ejg9U6WnFOCRUDT5HqkIelxCQazVF8uTWQVix+EL6VgIiJ0cxs\nAezLg8SGOO3S09Mli46GLQpZbXL9cVv2yYNnabw+6q1UmrqUh2ufQPUZveRY\n+W3y\r\n=J+Sr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"677dc96dfcd7922bf1a6518882d4dc165d57501f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.3","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.3","@storybook/channels":"6.1.0-alpha.3","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.3","@storybook/components":"6.1.0-alpha.3","@storybook/core-events":"6.1.0-alpha.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.3_1599141895425_0.6971457472119011","host":"s3://npm-registry-packages"}},"6.1.0-alpha.4":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.4","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"49d0c3ed593e098dd82f9eded07d0e5252541ea9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.4.tgz","fileCount":93,"integrity":"sha512-M35lAsp8hSU2GycPoHOJyn8LxH6+2wSkz1oPcRRnl5Am0B+srXS1qFM17YS71/mpfhG5KifveIla4xT2g+votA==","signatures":[{"sig":"MEYCIQDnWdWAjRxL/K91AjhlPLiE/5czN5eGyZlvXE/VjRE8gwIhAOrUSbBxKbxqq8ZlnEolSk4JT9CgtnC+Y8tAlvEF4Q3/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV2KJCRA9TVsSAnZWagAAJBYP/3ZJkCl6+xbETfwvy0mJ\n/gcrTynfF/ITqQXMB/5tu4ARpI/fbWBnGPE2oJRAu+d6HQ99D3sa9RDNCti7\nZpYoj3/AVF6utLyBd+jhZhSqbDHsSbsp8LXfHYwSbVpyuGR1zAyMU+IL8cZK\nw3YizUPi77M6x+wu4KPL5AkhMsaC2MFFiiRn/snOcbR1w4rv8mrjVO5mmz2u\n6PCM44E1bJzk9wXFyM+EnmajOcqtZ/rcb9HWRIBMzrRQtXylxWlWPsiN9BCe\nXKa4CdsAsecCZx3hz6JxJPiUAetBWvqkZE/HQdPqCxdb0cWXbJtYs/b1dxET\naF+5ZtnYAPnE6m4PML7L6o4vPoLR327QFT11RoMO0LLw2hdaibGBIv/NzcvH\nznIfBfjo6b8iGiUpBv2WeuKwRuiy2AUCH+Nr81LccsMhmVfWkJ1kFClDzAEg\nePAkA5Jbq3WGACT0aJfKSEyL+U1vlOopHPOBhvBnQhfrg6qDwizH+VKuZ4xF\nEE0xVvg/B06aD7x1tyQv7wHWVJU8Lf/XDFla/qOVd64lOt2SseYpNPfUzEtS\n3WeIWi9NWBmJkWD7FDRaQ9Q7eaz7meAzL6JBUS6EbElqz0o9tevJonJvDVMy\nHai37ztVZ4NUHyShFRO1Nk4n+44/DMiK2qbNbUOu53rFoil34nOotZgVbVcX\nF2R6\r\n=Oxp5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"d053c5c0c37db26f06fbec7f3ae3afd698fdac54","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.4","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.4","@storybook/channels":"6.1.0-alpha.4","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.4","@storybook/components":"6.1.0-alpha.4","@storybook/core-events":"6.1.0-alpha.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.4_1599562377186_0.3991110908920965","host":"s3://npm-registry-packages"}},"6.1.0-alpha.6":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.6","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0068b0499a1244fbcc10f447f63eb2581937c5ef","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.6.tgz","fileCount":93,"integrity":"sha512-SOn9oZcrLGBEkXKtdHsoLWCzfvR7zMLQPpXTdWNG+9Bhxnxd0sNJqBHO8ZVFFS9pDRJCYr7CALikq4dg0JN0pA==","signatures":[{"sig":"MEUCIQC5tRi5raqYAfV8+9h/J/SFjgfPSMu5oGgnkC236uo7pAIgXxYH4siFMkREwDCXceqkZ6WaRHWXMbldLIH1AloF8Vw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWXRlCRA9TVsSAnZWagAAQisP/0hS4TLnqEqZTurAWkhY\n5ixyk3q+HruUU6uTIy2gvUID/vq6BRArb8x4g9HO5CvRLPvbi12Pkg6L0ZQG\nIXPxmougwIhxljGmq0SHc5B28RfmBw5njqImykHo3fNNja8BLHa3V9MEldzs\nm69mENcKPv27zLzwQGe7tJyE1PfeBKZTPT6VE7eAxb4qa6CitiXRMCONERVz\nmZnttbr7j4/cvxCYKTpVsMNliE2XhfRLs+kwGibPFesnAS+wqUnnwmJQvAgF\nwF4zTNnlfvYODa1e2lkHwMSJK/rJUuzXjgzP6hP8UDQtb8+Nr/RaMIl8qzwc\ntgypPvffZB7W71R8T50I2wyODqA2Y0T4h7agU6pPuEdM6YVVca0T5d25QB7p\nawSNEha3dApFI1IxEgUNik1aohuua2mL21nh4TN5usnmLcqQm8//S6Am5uFH\n1w8LZhqX6L+AOmEsdTMIiLqJtGgiVFxK/hxIlSf+A2VfYkIgLXv3BddghjTa\newC13taaGAyDJ2rtxyNhqP+atrpOKaNxl1QOFXowEeEMgSXOof++DX9ds7/q\n0N2FoA20sI/TyFUUj7KJ/cHhUmx1ImKow3fiNC/s76UOQdo+8twDLJunFeat\na1dme9LIJf5EuPKdi9an9CviacY68BsUMhFTAQm7YOUfYLt+FHs4jOYVJsx4\ng6YM\r\n=8YzJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"f488dd4c7e6f52965db0e54c7f072042765c6477","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.6","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.6","@storybook/channels":"6.1.0-alpha.6","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.6","@storybook/components":"6.1.0-alpha.6","@storybook/core-events":"6.1.0-alpha.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.6_1599698020697_0.21007860570168324","host":"s3://npm-registry-packages"}},"6.1.0-alpha.7":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.7","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8fc3f0d76f5b13e79592f81b12a30ac7f05a4b72","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.7.tgz","fileCount":93,"integrity":"sha512-hA4hE1RPmwV88gecptyGeWF1OTsjTBo3jg80MCtwSWGFoFOE1eM6sOZG14g9MKxmtXBnh0mMh91zDK0qCCaqdw==","signatures":[{"sig":"MEYCIQDw5tsLAx3Xf1owUCy/wxhK7TEZaDy1+aAu2Su188meeQIhAIUrY7XgW2WbeIA/6NHWDK6TC5glckKNUxRDeDWRoqKF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWklJCRA9TVsSAnZWagAAouUP/RXhdqEQVOQDCYbw6G4d\nk5Pp5T+ItsriR1i7p7Lc18fa5Np53Pgsx8TrE1ywsSDkBgI7GNsrsl1T9Ntd\nzkEfKNbzzIk5QDwNi+tgm11sYuqyha1QbqnCmxI6FjCqGdv80155wPYLb6V7\njBehW9xFHXrEFySRy757D1XFO2GgTRH+8QvhIbNijW3FwhqvPHkYP+FHzBfF\n73RfzJkpi6vstGkhlDuqL/7xlmZMRI/t/jEdLW2jirMFm29vlF/zNzgxLMjr\nrOwsr6R8mOW0AWip2RjPrA0wlLY9grEtAGyrtZDtpazTC9/VKTzN4bLXk4nQ\nYeM36g7xMPHQoE8YoNbOwRQMsyTu2X/qpEgG89DB7ak2RPTUAHe91EFtPCZM\nAkEu3x/VLnjbqgJZKY0tJfkbJnAXBdwSfKDfgNq+cRGq1g5bQOxftjwyYNPM\nqrP8CQgQzWlLiLJ/zR1PlWuA9AM77aNLvH7ofd8vA9jCR4vXKZ7m+zY7PYJg\nnTEf6Fo2N87Wuw6o1kwVGCaMuzefXvUSUWXo9HWqqYnm44BDIUeOJ0vNSTHw\nSjfzbKtb2A1LSdV2HkWuVbxTNFtRsLK4N6A23/s6ojmFCX8HNbVfcKSfRuC7\ncSYfMzLwl4Ic8y2tTwIW6sOI2ks355m4htLJ3V8t6XgncJNjgGlgp8dTPF0I\nfmrb\r\n=SjL2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"c63131f0325d039ec30fe244bfc43ee17ad4fe9e","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.7","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.7","@storybook/channels":"6.1.0-alpha.7","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.7","@storybook/components":"6.1.0-alpha.7","@storybook/core-events":"6.1.0-alpha.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.7_1599752521282_0.27070180143112244","host":"s3://npm-registry-packages"}},"6.1.0-alpha.8":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.8","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8950c1d0f69f6b49e06d6ff2c3cb16da245ac6d9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.8.tgz","fileCount":93,"integrity":"sha512-Sp0thjCR5OVXHw9KkARv/lCCJ11lh/muXS5MgDuGY8a5mVz7p74VKugWFLI6T3rsmCRQSgs1u+Lmi8g5xGHUTw==","signatures":[{"sig":"MEQCIFWEcMiB+NT7MSGQ9h1ESEjf7JVT8hONJzLhUmz3UNJBAiAlnlGKKcHnmPBB6FDF74kp/t7ZAcTa/QV48AaER305gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW6oUCRA9TVsSAnZWagAAXGYQAJbC9qboaEpZxp2Bywke\n12dWwS5G4ciN8h3eEWG9Xn/rpdYl7da68XRcSnkQi3mXPuEt9wxGzy/OOh2K\nlg4+QdAPjmsWB6rtlHxpnvjrF9yt9KeQAAWrm8Bhv6q7sjDhAOHsYqcZBq/d\nexDy+jFc+jZWXR4u5jLiB4vz0DxrpvncCQnKIjWnK/pxjP4no4JvYBrpYEYa\n9T2kzHTRgr53teRDpY0E85dYwo3K9cO/BB76ETWZW/B24eVSawf/cr+huDEM\n8oke1PELgI3Fy08lnyzUtppSGM+ZGNoKTXTUd0ot5t7TySG/NtxRAlgSy1FT\nfYb/mm/1Jt15GqwOXVnpA5UhoiM52Ebng+CgTbqXQX+WCfps4lIn1tkUBt8j\nnzFqQ405v7tZG1qGD+owlFtutJFyhACALxuf701xFIy+m+w97OqwoUUDcU9X\n/a78MXsCLcemGQevzAfB34XYZ9RwskZsfYidP0qNzn/kqZFBNU3F28A1Zw4O\nCYuD4ezAaZ1imEPa35vjYVDEE6zC5sbF5BKiBtyL0V8Af+dYCbPHVFvbNs5Z\nmYhui5IKfEeDNOeH8e5AMG7HyJW0CiUQIwA9hcHJKQRHfgFHJtnZorS4EYxW\nyRFK3uBMksO35Wcl7KSUXRpEYBhNxEFpmar8aSb7NDSBMF9sTA4iSyoGYbVo\naqgd\r\n=0EtB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"3a636538b7a15e4dcc07058d36b1dceb9b43335b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.8","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.8","@storybook/channels":"6.1.0-alpha.8","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.8","@storybook/components":"6.1.0-alpha.8","@storybook/core-events":"6.1.0-alpha.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.8_1599842836311_0.2441646657965395","host":"s3://npm-registry-packages"}},"6.1.0-alpha.9":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.9","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"dcecc34d5de904c8e5294fe6c415b609bd58d025","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.9.tgz","fileCount":93,"integrity":"sha512-Dtrbj+8QFapgZTXHlOhdVajXVrowX2m++2DtlxS6QGTyoGgRi3YTCtFtZwV0ZhBmLr8HC3OLHUqcnZ/zggunVQ==","signatures":[{"sig":"MEQCIH9FmSqRhWAL7oAeP3ytzJ1LSzawTX3txd7BD7MNA4c4AiBZR3oUCgpZ0Kq1bJ0LPq0Sumai2GDUSybMhLgSnGQm/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXQkUCRA9TVsSAnZWagAAZvUP/jVOePR8RETo6D0gYfXr\ng32T94CVQR1rjBsC0L9koxdpYALtjWoqe0UpcrnfQcs1vs8KBijkaX1HsSnp\nGQZWgcJxo+CATtj06FOBvLAa5YZA/2q+7ggWZbmFT5sLVU4GF486F3XV5afs\nyTT+JXhbrjfnGZPuNTBmA0xA1cPntMD9DnBFKhfXZ8oL+22QPn1AdfnH8Zsx\n00eEW3zNRX2MXY+9NUtbCtwdOJ80bqXWuoci41A+DGPj3bFiutWQ7vSCuQrS\nd25BzMgw5Q6iZXSg0f+QezNzMRvJ8GgUXqU1ij9f89nH8X69sil3Z0OL1RrT\npNm/rjPgUL9LtikT4baGYTZr6fLTdZj2NrqYb7Eg5AQ/7gA4x6uJv24GEa1j\nzaZLCx7uxfCXeIaXA8gwBgKZFohqgr8l3sOcxIPsxUIqKeRcdfFzQ/SfjtSj\n62tc+696eJK6q/EQLYRBZkc6C85cWEOsZ0hjEWZhYA3aeukNumu7sNTpbZUK\n7ay8H6Ncf/sMQ6mqfahyFx+qLOO4UTQDpU85m/+UDZK9cPKaLAMURV7jdD48\nh3VOf1BtodEs1KIjwQPmvKcmfghHimxt4V4jUzZhGtY33HViibrvWHv4+Wxh\nK0LEANG//kYH2hIw4v0MU2fSWuFL6tpIXlFOE4yxukJ6vDeBtFf+rfu+6/wf\nguVW\r\n=OJd3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"91446c812d677e4aa2ff714d4c49015a7c8c9629","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.9","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.9","@storybook/channels":"6.1.0-alpha.9","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.9","@storybook/components":"6.1.0-alpha.9","@storybook/core-events":"6.1.0-alpha.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.9_1599932691666_0.9074137147254164","host":"s3://npm-registry-packages"}},"6.1.0-alpha.10":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.10","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8aa7f8e8df407ee0f4006f8c3b76327ca80a0c21","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.10.tgz","fileCount":93,"integrity":"sha512-iLjh/tONERxQqSXGfxuNVC4e+5j4DkNnsYM1VVrq2YC1OitTU2UlgIvsn0yvTCJD2qKbbqS8KXPxkUD9JSEZIA==","signatures":[{"sig":"MEQCIBuX69jsVyfVkElxpO4XWc1si8stwKzmLJv3klmiXJfbAiApHZWwnYS1FaXAEeuc5XvjUkUTiTKBbEPMCBwRy+Skjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYZslCRA9TVsSAnZWagAAtPMP/0YlKOuhhVr1b9UeOYq4\n92OV8ZyvpMJy9K3+hGCQ1bXINGx4m9Fiv/qIJImJy3EMRAb67+UkXhyCVzbO\no5FFrDiYeBs42PP9qV1B1u+48TvQrn22vrB8xaqQo4BOB20AlY0//5QCXGlw\ny2oGLxZ6JnRMSCzV6YT9Cm3/JXvcYwDNJmKIOSsC9jffYhn3E5wcd5K6pK3c\nnMQvuhirju1pd/heclIgOAdHCGxtbyk1uFnYMSv3v6VsOaNZx2O1Sx4XDCVD\nk1COoT5uI7YdJpzhyqQb1vrbE0BmpAKzUGnuwmGOIjVFDBcjXSG0qftezP5u\nW4urh7x1A7jaFKJlTk5N+872L5JSkIHr3NwjExMBWfj09tD4+uam7tI8Okfq\nVx5Q1dJvDDVE2K5pBFflhBqFiLIO8zB7b2xjgL6qvHrkY0eBUcJHKbtP8uak\nFpW4MZXOk0ZpjBWOLrjukBRBJOz4q/LuPoQRmtzv7hcqCU8Id5WT7Wz783hg\n3A7p0h49hQr3aFMCb1b786N700ux0EKXCCDXYfGX4I2DaA5MCZKViF6mQ+Tz\nhhJgU9EYj8iYciVql3Aaex+2FDf70p812PgjW9bONV+RUmHMOLEbxCevoaMg\nhusOq/ohfoSx7R1PHhEaWrStFlXwqdhB0agpAmMeF8qbvO/FvlP7PtMAH6gd\nPNLj\r\n=3Rz/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"57798a108e183d97f94fd4cc396e45e1d4b04d23","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.10","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.10","@storybook/channels":"6.1.0-alpha.10","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.10","@storybook/components":"6.1.0-alpha.10","@storybook/core-events":"6.1.0-alpha.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.10_1600232229389_0.16439668311873268","host":"s3://npm-registry-packages"}},"6.1.0-alpha.11":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.11","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e98467b58430e12ded421c0e7ef009da12ecbcc5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.11.tgz","fileCount":93,"integrity":"sha512-sFSfCPdS5nUSFIyhkzmAz4hVk1xrxObQiRB6zVnnQ5nTRHnCGPJlvBpzX/ZWWpf+uQ8gvAIXNEU28bi0bQNeqg==","signatures":[{"sig":"MEQCIEflQInPwH8eaBNDBI1Myc0INWdcOlm8IF/+7lCAjkCrAiBDYmlYc+6G8aIf54odFaTh12fBfGPblt70Aa+2Y/+wDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZiR/CRA9TVsSAnZWagAAV4AP/RMhWNuMkDlxIP0TdZM1\nEnehQFaLcLnnwqsWpFJj4AMx4Rq+CWMUQ4EP3CAxxOFnswtUYhbgUTcj1DTY\njgLztSOJ3uUp25uPa7pyM7KKzVFk16EZetO5bDaP1Xow5DxARiJoZ2YknsJ1\nagOSMTaHR0HkWxu3DizPmCWu2PGD4/gMxJ2lukGIf0hQn1hpz6247PmsXvUZ\nDKziazuWddd/9VCjftxEYpRP4EtbjmBoU+9AAgpByxEkvHkbKog5ztIQ5hRx\nTOZBDIHTj/Ib8rvA6AiRXmZAGTz1cuaILF8QuikV6cTgHXJi8ES8W7HAM2iD\nZdKtMzAp0nNQ7EeY9Np/TbgE1+4+G4CvdT9QK4zAgreGxWLyJ19cvLkrS2LI\ndkX6ErNhxZIcF3OHfr3Qgbk0/zKjh89JDiwNX38jOKQWgJHHEguL0EMMQKWS\n0oWIHuICLCW2CfRNohSVS9/Ap226E7y1VLr2e7Qn+rfk6WQuZgy5mlAT8GdE\nqyxGfpgyKseEV2KZF01q/2WdNHEr6o0GzJ2nUIW6ZN8WwDh3eEStlROgTgI0\nMA74mDGL4oXnOiBeRRydFUAETQncTj5lGf+NnTj19+OGA5MO7g5lGWwmgLF9\nWeGbejTmwhD6B52NAk8Lfj3Xk6Il2Pj1/qd9DaG/+67rZvYlPA7mV1Lb19qk\nKGqS\r\n=p/Vf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"38fc33bac608f870dea9215f5ac0657f90bc62ff","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.11","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.11","@storybook/channels":"6.1.0-alpha.11","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.11","@storybook/components":"6.1.0-alpha.11","@storybook/core-events":"6.1.0-alpha.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.11_1600529535597_0.2451678595979785","host":"s3://npm-registry-packages"}},"6.1.0-alpha.12":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.12","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0d2c2a1e268905404fe51de09ede24356a6602eb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.12.tgz","fileCount":93,"integrity":"sha512-BcRBOWYKfUTXpMScR7QlqSROzk9KI7MymPLu92MTZVcSFwzZFQr0lyirHOyGwaFMxMf/1dZXRz/t7Y//RpwxpA==","signatures":[{"sig":"MEUCIQDbLMtWAbTCrRMDy6kdkUETlpEjCPLIBQJVVgZ2TC2JjAIgatGk124NQXb2BFXw+4q8lc5ptNbBq7oqlCcV3yDWSr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZ4KrCRA9TVsSAnZWagAA61QP/jcIKBkXZF+y5ys6B1rq\nkuVapK8vsaLF3mMzP5pzGyfh31PjWzkBSzW1VLWI8NSxpgYBkwAd6J28J9PB\nOa2Uo6N9+I0Lh082/VCIXhQgUx6H9c0EkcRUOL0RD2+8oT1kS+EI8QJ4Ns4d\nlI7Gks+HPJhrwDm3mDJ2FpSUM1MnkXSQ1s9LWw0d6SLNBYNxK4akRQvbVHSc\nOE2M1WV2K9XpyUWIOxjHMzh6T9nt71oj5OgNnoidl7zXaXSVLZXbw9tv77a4\nBEfsWUcsACdtqYbtCzVM1pec5EEFSggUw0WdRbSx2b9vy3gFG5qEpsUdbAy3\nkaY1Qij/GhO5YxED8Res0785Hd3lHtJjXGfMX9KQfgv1P2IhvaOi//YZIZRe\n5IbxJi1YC0XSrMg/iDoKko5a2zuUii8pHxbu61Gs+OXSFvS/OWv25I72+nLz\nAC5BdfqcQbWaZblyiYLBk+z++VQUxJttb006zXZZLwnp7sAzuo8HYU5ByxcO\nKbpT/UYm0XPwCnc1i8Nrdrh+L/Py3V7AczcWjIjdyTUy5Jg4m0r5CPtZEdlC\nRw6DqMqpOvbMMGJTcIsoQE8CLq4mAYabOST35qjGY2YefZx9j4qUyb3+D7Ks\nmlK1ymaFihcMF4woiDLPOIOY2V3xhKK+NQ9U3LZDe/nS5g4LzOb7ek5buuTw\niG1m\r\n=T34U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"76ebd96c33a5c55a51e26273c4e78368e86f4e82","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.12","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.12","@storybook/channels":"6.1.0-alpha.12","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.12","@storybook/components":"6.1.0-alpha.12","@storybook/core-events":"6.1.0-alpha.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.12_1600619179197_0.8770487695413585","host":"s3://npm-registry-packages"}},"6.1.0-alpha.14":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.14","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c26e4c838a5079953b529b73fa7e2beef25422e4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.14.tgz","fileCount":93,"integrity":"sha512-OlISuZVkCU2aPW2wJSWFO5mL68vy+mi83bKAQNwq+DtrIi4cWybetnsK37zSjGloNRy+nxWTEQUFYTSJarI7dg==","signatures":[{"sig":"MEUCIB8/XVJ3NRyKKoakGOhk5vhxfAwnFEWpsDJB+zUoc1wkAiEA6ckPVaYonH4poHBso6vF3Gf6GfMvOIQCcMAsh+RYaaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaNzuCRA9TVsSAnZWagAAtxUQAJYHkUfGcOaV/DRBUS81\nA9GCcznBhvi3mPFnIQTNPeULWms6O+VLs11IrPNrwBNNUH2YFl9KLp10nNKG\nQYthrX996sGvCjTN0zk15hE/JaHg10bQXL8PhSVDOeuvDLnM3fZDtYONXmuO\n8i5g5vWIL+sAxyfGLF3i1iM5Qwunofq/k9o9Tib0ZCIjaWN2eMkrjQZMaB/+\nFbb0PYoshGcyvse+eJK/CMk5E0N4ccbTEDnEeRC364FHPbLW6jZOinXKwGim\nBlXYteK3RabkKX6E+AG62N8L17tc8y35s8TTQNO+gADp/VKzih372SXk0WTy\n7UugewGz20m/Z9mg/p9VCReVHC9wKjfdVR/gtHPVK/IdbQ1U7Oa74pSNpWy7\n75oV9ttYQOnyzv1+cCLJ1MntCJ6MkphkMYnk82+3WMgLaaMa7/g4+YTX4fyR\nbKR7kfXG7M763FtrulaSnJ7jOb7AcGhcb9DCtsR3SAWIMyJK2RF+5/NqRMOb\neQQyc32VJMZJ8JEZ/M+FX7yRqi0IS4MT4kT84WiylsBEOLrqFk45ruk4Lour\nxOuTNfLM0Ip//aQ7EEMWhyG1CWrqt+W0l1Zd1KtQu4L8V+2QgSolMJ4rxfjW\nQGR+fA2X3H921Ac+XCKLtIq5WpNO+4+DaRZgWQLvGEImbDInh1FJR1pLt+QR\nFpQT\r\n=hZp0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"4571582a90b646e361cb37df525f62312486307a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.14","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.14","@storybook/channels":"6.1.0-alpha.14","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.14","@storybook/components":"6.1.0-alpha.14","@storybook/core-events":"6.1.0-alpha.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.14_1600707822389_0.9491218165131994","host":"s3://npm-registry-packages"}},"6.1.0-alpha.15":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.15","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6c389dc4c520683834f681c4c2c929a1427215d0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.15.tgz","fileCount":93,"integrity":"sha512-Qs0OMmzvSnHbHGt5rKjNsToUVuiHSGYGCqyuKcfRMLI5y0UFIQMBk+2EKU7UoWN4Gp1q4fRbFzY6NTY0m1RktQ==","signatures":[{"sig":"MEYCIQDwgeiVm/B38bV+VnwePtr6lrCUXIe9PLeb86uaIxM9egIhAMIxfTKymcaadtBEc2YhX+ZkgJqFG0KeTA7snahqeG/f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbJcxCRA9TVsSAnZWagAAYVUQAKQsOgAoH1z2+o33nKpK\nVPrbQW4GgIjlN23MBFwuqrM1d7cP4f9s2kA5UDwC3X7bUanLglFCBdQUmPyZ\nJegei7L+Nu+d2CV9TE6QivuCr+zrV0kQL5GovOwAUXCnIXdGby+S+JgeBZ8C\nJlB1yi/M80Das+vUMn/QbxBHRvBJAOCAYz8WnnDI5wRsRm1aKweIxTZW1XLZ\nkS2nTHgUt7hMEPOrmJh2DJGonzurbxQn4CPITUDMTUcFDJEx9t1/WWcSqY9P\nrPnhqfqBJ6AQNL67F827omfFgY5vNrdsjrJXZM9gaxuTv/7zPNk6CIB+W/Oo\nco5/y5WbDh5ZSGUGYX5iXgtt5WvHxAGfyjggSU/jO7yGHJtVCthGv+yi2Mq7\nAoy/+oVLWQy8xQ1qYvilQScGtixP0kxF0wdjhcgDONFlz62en1Ti0hNWyBEv\nBMML23YbtC8XpbK68bfpBJrRWv8itWPwXaRdmaR84wYWQhgJ0PGoAFS6RS9/\nfJnW/IUWrR9L5L6MJM5gaCVBCb1BFcFDoMn8VCxZQFTsBzPdxoP7/axxDT75\n8SKX9qky6/V9lermxl30662HhcZL/cNU52Io9ZGkJBNCNeRaKSTUJ3796EXQ\nLPdYRUXPA1/07VBCS0aBDNvMsdobyRyJS/YQWQBN7KCq9IWH6tmYMWlmYsRY\nF0Vr\r\n=uIoY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"0d994a5ce628fc9e1b1b1ec39e22ec35e4c72e9a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.15","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.15","@storybook/channels":"6.1.0-alpha.15","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.15","@storybook/components":"6.1.0-alpha.15","@storybook/core-events":"6.1.0-alpha.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.15_1600952112805_0.5289649857216743","host":"s3://npm-registry-packages"}},"6.1.0-alpha.16":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.16","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.16","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ef11501b5f54f0ad1b0082b4c71c486a0f4f95b7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.16.tgz","fileCount":93,"integrity":"sha512-vv4tDb8tFK/6YyMXgtZw7o9IrJfRLefFIyFSAvNMu/Llgtd6RHfSBAwNNWbrUdQ0pu4x9X2nSeXAxwHJ7EHVxQ==","signatures":[{"sig":"MEQCIFCVZtGp0lCsJjE3KYSMnxEOmbDgZfgEhWtY0EV8wNFGAiAHZhvobaChwoeUmlZesf3hLgD322iuvPNg9xwas+W+8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbbopCRA9TVsSAnZWagAAVw4P/0f5jHuuBJuGBUBSFaYV\nkOC2RRmaT5Pk8rVEF+IwNgP8E6Wmmf6iZrvBPHfGG1rwtZ44lP6uVLxiyI6F\nbynxtj/hDCIVjQlRFo5L6hJNwBkDYnYLwthJn60odXfVRjycv4I8z33jfMb3\nSRVyvtsbNXiI2EBx7kqRnBgu8CsPHucFzbI2b2XiZLl8KKPYzBN2o5Lpj3FM\nfW9BsA2yvOVHmspkwRmH0M7NXqDC/j5/lLh9D8P3Kal4qujkx0f7cikYe0U+\naor6oy7pUnVfD59f5Q5OB+cez9vSfHV+/1H8x32gEDR9HYxsUW7Ee7fPMVyh\nG9e2up4WbuHf3CFoUgLcSfT1o9mF/xElzPg0v6K1gX7B2Hd3Aq61NWq969E9\nUy2PyziGyHASG//I04/gNibQDinncO4kSdUlx0mz6gQsbc5e8+EceMfKAdvO\nvGrxqmyJYDojcVpPjXGz1jv5GaylYA58ZpHhQkvSr3ziMWCjwDivvrH8KrSX\nMvkYQXAz1hT1V3AIz6194/JbbPmfkno0oqeMQvrFBKdDH9nLiNjr2+bmKmjL\ndnvHjdyPBo6BddW4jSiFB6BkH4YGmMX+/aUb3hJz1Ao1IiNEX7ogtyZRsBtV\nA0ZPlVDsLTpY15vPyjM8P/tMnfyEzD5SF6aKn1sYZ1F5K0iTg+rCJWNmPw5p\ndA+W\r\n=BsZD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"fe75aa718584338581793a032021a1850e1aed3f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.16","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.16","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.16","@storybook/channels":"6.1.0-alpha.16","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.16","@storybook/components":"6.1.0-alpha.16","@storybook/core-events":"6.1.0-alpha.16","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.16_1601026601239_0.4732102248617882","host":"s3://npm-registry-packages"}},"6.0.22":{"name":"@storybook/addon-knobs","version":"6.0.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.22","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c14f0c46317d417774446f77b1de57bb01e45031","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.22.tgz","fileCount":93,"integrity":"sha512-y5p92f7IVOxQ/5rJnMB/BuzwNXbdtfJhV7hvBjW8OS4E95EW+HXe7+gNOE2uEbALZZbBHX43H8lYlB+QoyZXcA==","signatures":[{"sig":"MEUCIEGdUHqqgc5sfez6ChueH9o4ZnWlXJIp3hct8aQAfnSIAiEA2SN5VCdeDCMPOUzkglYFjtXl5sJUlyE6gRy9hUmC7Ts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbs40CRA9TVsSAnZWagAAfBUP/2XqvBGOhiSY74/zWh3i\noQgLsqyEMhZV/5fK4j9ABYyOBNtJRNyhZ9/de0fA+iZX3+zPGclc9XAwspjl\nFt7hhvku30Il3LYxAA+bGe+O5vcxoI7XH6YvOlO7DEvIcrCs1h3uqejUMC8A\n4+6zFUytZlCXu7MbZ+lnQl81gw6xAVFX/H1FWjbfcvxAmUoDgtNilNokc3+J\nPmpVHF0QvvkHHDD37FEH4yT1UMiKHMkXyVwqLDOntMCp8RQdEesKNf4Wsj8t\npLGWJ5G8HDODG+qZEme6eXzPS+3Rn8/ScVWSf0GbuznuTx7gcJC8qiwqErdp\nL+Fp3i2YaoYoHoUUfiwRgRLakU9tGrJIwcjzE38JiLZbQk84OAzGcbhfWNs9\ncAfymnmWxjdDvMvCIvv0bpChJQcLfTY4f/yeTPgjPzwfRGkuPgzaEWgg7vJx\ne09U2LZN/Z6wfC3Vu8fGj+OzBZJPPpyuXUDZI3ObgJ0yJ0SGxOUnSyCkwwk5\nrZBy13/207ZlAAaqbs1r3Oy3/1NaNYMHh49AfXc+mBKgudk1Lu+OUoszh4O+\n8/BqNnZMtW7Ai+8NX8/Bgf086xNGRQqPD3qrgEFCdw0fSI7F+AoDvEAcTCri\nb8nq1gcBHJOkLajyXM+GCgcugtNCRZdCp+uCvnOFtT+tAtVzoTvcy4j5EVB7\nSaKo\r\n=SPiM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"f5fadd7970172906eb37ce48925822513638099d","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.22","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.22","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.22","@storybook/channels":"6.0.22","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.22","@storybook/components":"6.0.22","@storybook/core-events":"6.0.22","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.22_1601097267416_0.11651058330104003","host":"s3://npm-registry-packages"}},"6.1.0-alpha.17":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.17","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6e5c37c9995f5fde79750d8e8dfd0441ad933c83","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.17.tgz","fileCount":93,"integrity":"sha512-3WV157iy1JR2vquYFCb9WRxed2LfNecE1CqT6qBswj3HMOf2St/4RZxTp4N5nFLoPP23/MbDBvWHexclqalOJg==","signatures":[{"sig":"MEQCIDg4H+QB08Wjb+hlHgJAP7uMuYqOHs7+hG5TFFceiQqTAiBUHyktkTX2LnM0QicATT0FcIYGDzhsTzqpWuknMKmm4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfby6YCRA9TVsSAnZWagAAY7sP/An5jmv+IQl5NH8AmUCs\nRLz+7CUFl97yEClz8EdQb+hr7PYfHF45o6pwbN+kEdmpru7m6FHR8oPp4At5\nkgzFRIvkpiyNY1PhHZfe7LsolzZY4M5Wx+CN8nzKo7qs1CVXQnjyFeee94wL\n5DydD03xw3owuSAKjQuMy3ucuoglhN7iC245QXtXMl7gHL31qW8wRj8ND/6k\nBn5+V/Xz5LC5n8AO38mJvkZ47c9RLzW7PXaSq+fLRzOPL/jK6BHquuLAEWPB\nlY9+GiMxUlxyATHDMl8Xt+eLuAp1GGkOJ76KfIggiR3cGAxrbzq5n2W5BtnP\nGoSNR6SIQ2IOSji2IGHIC7nCGsF13b2dhFf/w/3drhjfRThZMrM75Ghrsl1K\nK0kNY79ebAo+Rh9VaivS9SzV0bM+A4hNbBhrM5yX59ICnf5/+TIMzfT23HCp\n52KsyblDmkDQkiUiknmr4nEIwcA+gL4zSy6G/MusrDDPj7Twl/AwhbzljGX+\nS8M/HdggEKFKV+/JwnUuSGW3vMsXtJXD+xmL37Xwl3lVXRcLtmVXZpdwQC5Z\nAgwdzUh4G0ZZc9It3SF12QGDs1wZJDFKFW2V2lMrsHMke+c8ALfNjiEsRjZh\nzoqck4XIEATAST3pmGFDogBJOX7TQJroolmezhXc7k9rDNH21zilsm2CzlY3\nCsi0\r\n=ys6t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"328283b5ccfa01c38eb2ca0b82ab60485b5eb903","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.17","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.17","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.17","@storybook/channels":"6.1.0-alpha.17","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.17","@storybook/components":"6.1.0-alpha.17","@storybook/core-events":"6.1.0-alpha.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.17_1601121944106_0.24741750489761882","host":"s3://npm-registry-packages"}},"6.1.0-alpha.18":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.18","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9d47ef7adba78a648e1409fe7647f4768b6368b2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.18.tgz","fileCount":93,"integrity":"sha512-8wYDPOY5bn0ml47Oold+jbIMs51541k/5iueMSVUeQyv7IZUG6vzC5Y/REJlx2yv9S8axkyTt742EI0z5AHtog==","signatures":[{"sig":"MEUCIQCH6qn8SixpRQpD6nLe3b+TK1Yc/VJwvcpEHpxqa2bGiQIgQaHXRTak3s1onnITUhvJBZc1kdRcMp1+Br76akUy+V4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdGXUCRA9TVsSAnZWagAAYFsP+QCQktDH5Cfz5t/7zYpV\nYXXIZGlO5vna3RsTtiuDCJ0+1Vu+8hwBrmuNgOMOBDZMqWElp2vC38D+hh4F\ndh4FL1eSg0T8OM88Bsu9SqvKHD6BupMCN3+WlSaV4zxuBhuNQN6iwL57Zgmy\nevYehoqmqLZBIYuV2oDOHA5dDpFyrfXMpoBQgHhEN0JqRKDMUCFLDlxns0m8\nbZToDas0O8Scr5JlpruITs/Jfp2YMGP29zCQaYVRz2UblYKA6rMqjYZiFZRH\nYz5IkEmdVivkuQ2jvnUmVGpjMKXtio7okSZX4osdnIC+GeyIMPMUrrfgK6zE\noJWEWdp4xtlJBZ/I5GQTLvFpZ9RfHiU+2ebXraqZjZwG1U6VWLj5sjW86QnJ\nfFJskABxov0FCnRgNmvnwdZwTqNBImsg+Tdr/IQ8zgHxNp3V3bHer3FxFovz\ns6bQ5LKM0IMsw0FHuebR9DT8agOKksSMJLVTmxcz4LyzL/WRsqjAqHiP3jI2\nJIcVoIW/X3aOxSzKXCm7rTwAk7TjTyje2dmgGx8k9poI2Plc5CXMgrBvaRWx\nXb+cjxs7NAijwgNX2j0Llhm6c00hKmxaKaN0O7ITAYt4J+8kGbO2FuIwmJ4f\nrerZVQu7yPWV/c3ItqPQfx8M3OZ57av4dTsgWpRV8EpFTnyR3lePkZlWCA8L\njVyZ\r\n=5Vp/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"7bd08008b5a105726ddab6abc4478f46b5fda95b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.18","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.18","@storybook/channels":"6.1.0-alpha.18","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.18","@storybook/components":"6.1.0-alpha.18","@storybook/core-events":"6.1.0-alpha.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.18_1601463763515_0.5887474859353747","host":"s3://npm-registry-packages"}},"6.1.0-alpha.19":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.19","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"907994d1d76994a0fc765be4b46137991d9f2895","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.19.tgz","fileCount":93,"integrity":"sha512-dbjU6u28N2y6JWXeS3Wh7mhZrGluww28ixZhkvNgsbaLPMymN/qfK3K2YaBpcg3i0TMcgrVRWjhiODrvvdpAHQ==","signatures":[{"sig":"MEYCIQDMvlUHB1M9bSi5zxV/fH5YXF6bZRc8SLwyIWUjWTJDGgIhAJvwfvtI6rM02/za1/dENHKHixdnPR/b3mre6p3w8HZl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeIHiCRA9TVsSAnZWagAA3WMP/28ct4Sf4vdovoblQUXm\nXXfCZ94rvTrzHGPyAT3IZOSnBoXmHPTbP9zQB9JeOVa340h8Dmt30+vMhnMY\n2N6k6A+Xf5XtDJPA520ruDRsyNctrfFJUGXOr9YoFy1ZQ3kuz6WN1MJ5Tfoa\nsF5Mgsj41RseOn4qY7mc2U9uPtcp1/XTdKgg2Vapu19746aD9AVgxCMzisiI\nVDpZUeBQKLOqcqRAZk4qufKZjESuSDAEWlTua3k+sjaE6AAnEaM5XdgwTHPX\ndOXOZht88e7GNwXLn+RsVcOs2pYTj/LMUB/lNeXVsGSBHlsPCeOqoKc2iUHi\n9ck36ZShJW4eBiboDHjpp+YqSaSFtyEexSpnsCQIvsVWshACVTF93obLQSLF\neEgz8LBQhhFvL+S0RBExv+sibXSn5GXIBUnDGj1Qe8WxIIjQigGN6brS8N80\nQDBcHqlfrO1WXRETI1TUA/lOPGvq8BUlxkYLWT0VBK4aJ14ko31jJ5ETnSe8\neXwkZ1Su+kINUu0uPRtLmaMFvKwk3WNFDTrAKK9Y8Qp8ccYiAZFx27C8AlNV\nqxmjzPkiOQZHhy3c4vOln6RB8TuxuTndOGWRST1skpiX4/2UdSNoRGcFxW4f\nyy3th3JnVdsL7VZli9mrocKdLzyPUqdi3nJSJpDZf7Ck9NHwHFS8lO2NIYDW\nyICa\r\n=8rtv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"6a3203004afecbcf8fa027d38a6088fd927714b1","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.19","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.19","@storybook/channels":"6.1.0-alpha.19","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.19","@storybook/components":"6.1.0-alpha.19","@storybook/core-events":"6.1.0-alpha.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.19_1601733089966_0.357373457175588","host":"s3://npm-registry-packages"}},"6.0.23":{"name":"@storybook/addon-knobs","version":"6.0.23","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.23","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4132d78a79ef4ede73ce7436318f445b9078b809","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.23.tgz","fileCount":93,"integrity":"sha512-/1pKn+Hg0i8svkexeiaEMyR42PMu7h8VOzJHacQ/vrt/41kDwsBCM9yIBJkarMD/tztnPVGkZBDAGMChh5oCxw==","signatures":[{"sig":"MEUCIDTLbN91bqOv1hMAYrR4fblWuRyYsLu0d8Ga38d571+7AiEA9ZX0BxSwE/AViP30OT0XpfiykBV/069WIuS59I1Lwh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeL1qCRA9TVsSAnZWagAAUOIP+QBs4hRXiC6pdQ+hL0zw\nn1XG1UcwsW2F7DLIDVT9L+t22uipiTjttkYDTa7rRmajVeGGgvPzqjmPr3OJ\nEFref7UQPYTkQplyvJEYnfdfrnschjOuaH7EygOQEnzvUJYcGp+Pw7XS7dim\nCsQBDRq65cvuAittSJ8SgYMfHQ3V3MB290bTU03erHQEt5+l9usVis5M4CSG\nXNdZh2tLhZjf0JeRJxoTkSuz2QBfEi+quT5TIuND2djM+rfTF/QdCUS+TwQ2\nYlwtEhUzYA7/6TCpUOnhhfL+6EQV2F+4qDX7VD4W4nercAXooMrjlTt3xT/m\nlx3KTBCuUTxViCsQHk6cl3I0FbmQubI9upsHKZgpXIay5VK/SveH3m2/f+CL\nxh4VU8gZGD37MVpcanq7J+ttgaHUGXs/qq+Fd41mYqyguwBSh2T6VwazgFPw\nbm3cMGL/nj8KZtMT/rw40T1Cp8Agxq75ZKobSVXTyDz4D5HR9onFiWTCd6f1\nkfJbV2Ai9HjCSdtAZtq6eN14N2/BzZSxqCCVXzEMxi45sbV3qcnhXRX2Djk2\nry0e+shkjWlKmJySm4gAizKMv5MZqMuaMP19v27CEJbP+NenPesDy8iS9E//\nhYcl8PWqRu7CXjXKOHK0QWXv6zBh+PS6/sZlhiv/38zITBdyXmyS+/G54iH+\nIwp0\r\n=Wi8g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"7299b834c6ba4f3a8f6ab5a53d3f34ba982ca7f6","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.23","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.23","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.23","@storybook/channels":"6.0.23","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.23","@storybook/components":"6.0.23","@storybook/core-events":"6.0.23","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.23_1601748329692_0.8528749169828305","host":"s3://npm-registry-packages"}},"6.0.24":{"name":"@storybook/addon-knobs","version":"6.0.24","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.24","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0a0d98ff4821d828ddd853f30a5042f4a90c4614","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.24.tgz","fileCount":93,"integrity":"sha512-EBXEhEJID2wDo2qYSGgTRciphykKEn1ZrEXhjWWwMjM56SR4KgMdGcYa3S1y6qzRPlCdKEh2x0/AFX8ZqkWRXA==","signatures":[{"sig":"MEQCIEuQv/lRxHYLn0YugXfQaEnVya19qDZHcG0ouG7nfkMFAiBFe9Ll7Rw69Eon81mOpgCxYbDQbYSslGt1xCZviEZgyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeMA4CRA9TVsSAnZWagAA8MoP/1RJ9Tp2CWmG6rT2zJI9\nbWF1B9klSrK2H2wL7k6TK0w1/TFmP5/zGDPiPMMDbL0ohLRG0vwcCJcACP/Z\nQtpg4NQi4z0ApTytLJTlt6uuZLFIhNEEhgIez8gaqxkTCv0WZrxoD0DO3ndE\n9o1bxXgSYR9moqo+IO1J5klT3MChEmKkhrJCJOwDn56nhFuZ2f/KSc88UQwP\nsa3fgRNvBJ/4+2wAHL1xicIPBr+vNwPK0YP73JHowqnITHL+Fsg7ft9aMJdQ\nsAnMnSoxvGilvOuKxfmI/eeNXBr54ctMNYpuT/2PlQk83+lx/mt4ANBaMhjm\nD5n3C4kw+lPFLbdk+HGZNPN7jDB5xieTP3a+S5klWyNLgtET48xlmhmb9qGK\nb7yQI4VgquJZzrGJ9O9wgPq66Bq/juzwYGEgVMPe1ytRAlLQiPKtiZjxe3tG\nmwZqGN7gQW24WTdR1rBSzgUMBQNotn95Rn3SoL8YmBMpdVEdOE2ucuV4lhiN\nHhblCCmvFWzMW+dfcGn09MCz3GrLoJKrtk7b9LLULIneFQ9t9cy5MlJxhX41\njilaAk6ImEfAx0DpKsGpf076WWYdmNZCarYlQ1Q9FRMSKq6X3jxSoigCLV1h\n9UqiN4N/Os7KettsQnTC9xvyhECnCAofys2KjqJJNu+V2ajZsww6BLFCM8ly\nqgof\r\n=supK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"d474fa57602a50e2b072c9300ce8fb36cc4d8a9c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.24","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.24","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.24","@storybook/channels":"6.0.24","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.24","@storybook/components":"6.0.24","@storybook/core-events":"6.0.24","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.24_1601749048339_0.7686479183378743","host":"s3://npm-registry-packages"}},"6.0.25":{"name":"@storybook/addon-knobs","version":"6.0.25","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.25","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c4c0a244107ac9e6565cc4e7a88a00c525c023f9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.25.tgz","fileCount":93,"integrity":"sha512-URTORbYS79bS95ujjt9vte9M6jPC/lju6mxB1fTkiLNzyCHEWko7cm9mGFXSrbD8L2t+0SFSwibdwL6jCizu6g==","signatures":[{"sig":"MEUCIQD9jLqmg0GzEdqJTcy7ZWENCVFcXN2AJogbkshqNnUDZQIgWywHQBR1vAu/kKFnsrx5Y35zBdlQyS34aSQ5h4Be6yw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeMItCRA9TVsSAnZWagAAsMoP/3m58aUkaTe/mKDl3w6N\nRV5R7OxoKbBh3iTBWuXAUnTPSwkBUeR6I716u3hD8DRdzgDgDcgiSrHNqlka\nVG/QQmZMrvwt9RCyo5DekEPjisBC0mPe/7zjbk4dwWOxawdzkSr1oxAbu0Vz\nkmsQwafQw5oqT+tHrfads4g3MqMPsQ1cHwmajWbtRSzFgOxdndG7HdtljgHe\n+Ejj77/8LE6b3lHMKfpxjfaX/st8im1crFZtDNM1yj9uKbSNf9CwhRKELRDV\n4DMZNQa3P1fSMTdBGoM7nVPUU1InWjhLIgERbbLbVDckRhv66TWn/iv89F4p\nznxARdYoBLgzLpRr2GqdCV4vIxOxi3xKag4qqup/R+nBnpUpG5mMZZqYE8Dh\nigOu7Z0XhVco6IkFEb1MO/BMo51Llv4RzmexIQnS8hJmQfIlzzsQgMvOfTX+\nA3HiXiZAhTrTQOC6aZJH74tMEgz6LcCbMK3iez8JzMLLRkxxkUSCOWYWjhrk\nkZgvYoB65dxI//W3ILx9RbZI81SzEKyiKBiD0PrcgovyC1e5rrNYvbUuTA0b\nGKuqmZskQ2PlWPRXAfc8HRAkLXENid1SkNmy/NM4gDQxBKuAge0L9VxrGSLL\n9WSsFZLVvGzLSdEc//wn8srmqj04yVKTPmWD/9L4ZB7DocOXDw1gg9m+4PNl\npAQ/\r\n=kpym\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"89c936fa79fd0a26d5a92485fc95c8f147556700","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.25","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.25","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.25","@storybook/channels":"6.0.25","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.25","@storybook/components":"6.0.25","@storybook/core-events":"6.0.25","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.25_1601749548977_0.2975589921263231","host":"s3://npm-registry-packages"}},"6.1.0-alpha.20":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.20","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c9fad04de4908689b4b4c8ed44609c104089c325","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.20.tgz","fileCount":93,"integrity":"sha512-/eWNrmNwUb6wuzTXUKMbDpjypCsqr7UK6mv1nwfQpKn0NL6lRnN5ZoBxFgcjQDq55eP3t0LSkqtY6mw4dru2EQ==","signatures":[{"sig":"MEYCIQC3vfTCIDDaIqIqbvLRl2XQVMp24upL90ei8xtmKOeHTgIhAN5v1HBTnnt0CbKSw5jgaUi/s6JCQtkD1iaD5Gy2gnzH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeqyjCRA9TVsSAnZWagAAQ+cP/1TfYaSQyNEPARHa6soR\nCNCljLyL4YbjMQB8lOPE4aMGjPkirmREqQyjzSU5+EZqG8VgpInruh38q1mg\nlXVwOWhYwGYI2cFJp3UbS2vc6XLF2OP+8b0A8QYOQ0+iEX/1bKkkRbZ6Kv7h\nJULuBoqwBF0ydYx1QZ1hY6qq8bjBKjSOSXZ/e3Sr8ZF33CCX/v5hc1G/4yCT\nS+9EqWonpYX8HJeROlCv5AM7sJSjh4NdSbJMqzfTrpW3R389/zY7F2h1QgsI\n69upj/WTen6thQabIXPCIrOlpIZceRMYc68cqgyu1qQ66LevoL8XUwcPU/Ed\nZ4aEBMeXynCZta5HaafS5UITm2dQ2pZvQ7CzW1NCvibude+qCKabBkbm9lfj\nxOtK+pSbsMgEHmMu+MydEqe+M1U2OVSoRUdjd9AKpman0qphvAoWeBgcJOl/\nGiGfyPWCAzHdOZXkgmZ0VD+p8R3Iv0abTbPD+gotJyRVyS8jKssETzyfTPAa\nihfpEqtQJYuh1HMVaxUjpdmKJkdvAF259oN9nZbKFA/Zfb6T3SINxECIEXxl\n1/uR2/EvgiR4QYj5IEJ6FAWDEgRrRoCN0X36OJ6VNfoth+N4xyJWsRrO5r7c\n2f5zvDk19Tl+b1B1jj3Sy4VoAldOYjDkSxIHLmUiiFarP8dfC8tkg4ZqG7v4\n1Hzk\r\n=shPW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"cc1c152e5452d28eabb24330f4ed693cd6782bc1","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.20","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.20","@storybook/channels":"6.1.0-alpha.20","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.20","@storybook/components":"6.1.0-alpha.20","@storybook/core-events":"6.1.0-alpha.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.20_1601875107020_0.24295163410968623","host":"s3://npm-registry-packages"}},"6.0.26":{"name":"@storybook/addon-knobs","version":"6.0.26","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.26","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c574a817c8d791aced89a272eb0c6baaee9a0bdf","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.26.tgz","fileCount":93,"integrity":"sha512-a25hOepctnsqX1nym80HLKrn8fvXFqsbcL3ZkAZWAIXZhf+zPYTJFrw25FxvbyhktmjQv6l89jteAfGfC0g8DA==","signatures":[{"sig":"MEUCIQChbRnplldUygVXaGtOEoEqLI6ZjOrXnjTynDAzqyairgIgJ4QbUirX1zHTn2z1w6cl8sUIJ19NCRI6AGAFzhNDTsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeswuCRA9TVsSAnZWagAAlekQAIWtRb3rvQQSSZYJXg6b\nWV36sJEFjfHP2CsBo/Kadu9IESZbXu1hGUCoZ7QLYOW49nUzHhDcfI0fED15\nHGKTqPGnwx1iFWd67LUue4KAZ6HkoIt8DsxFwLEhJ+k5NB8UGIYnBXK5kxjY\n3qnioIwdgcPGcFt6U1q+MXrQBTyqk7ThhfWAngRXTJ99dZA19n6clvchZyAK\n6UPdMRaqv1OQafK+DFXqbXjqiLdffSkitGIhHAh9YDiMu2XafofR4N241oB1\nC0wUN91MFGQJHFbK5if3q8Rci4VpvV9RAnfzfgWfVC9t/0EIuYlZzrGH0+dP\nyDjD5ysgjoMRCdqTYloCQEb+FHyildeiYzpoc8+k0tNVBgD2zk4K+9Sc9XZG\noQeGK7BvWcoAa1LCD+UuWeRhBdNSG77My+EnB/+nGAG3PONkr2HgWwSne58T\nGx7DbHsRWwrr8kMre8T8+9FENwEPl8N5sexEDLaqccM0fRPGagtHHmzB2Cdv\niccuZaDzZiuBee5yPSIYyZB76rPAnvMv2bg1JzdtwuqlN87fO99EhIkOnhD6\nT97SHUQ55bxX6WyxE2w7d+itRm1qOFxqKX46rAGHLVuMN4QH8vUz5oH6xwuO\nDjNmlMHhEWMIGSTq0CUv1BRMWChtw85xh2OGl4GrChj0uEF2jivuMa0SCSKp\nhzM5\r\n=aSyg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"748710ce10a4f16d599f183f215455e450e25d32","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.26","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.26","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.26","@storybook/channels":"6.0.26","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.26","@storybook/components":"6.0.26","@storybook/core-events":"6.0.26","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.26_1601883182181_0.35961510235557137","host":"s3://npm-registry-packages"}},"6.1.0-alpha.21":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.21","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"53bc18a5c0c4c17d84946ffd2aaee751db2bb675","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.21.tgz","fileCount":93,"integrity":"sha512-qKn7x3X2+BC4aSv+W4J0RjMNFJM3SX7TlN59wfigcUd2AaHP+YgRv0T44Zfb3LxRRdIpIIRNnYvQsORkJft+7Q==","signatures":[{"sig":"MEYCIQDMyK7vgsn3q+LmxRGcf48pXDT8vMd19LrocfQTAyBrngIhAMFFaEfyAiPnj+9Sa1PJFO6VzIhwPC6vFGA6b1MocBF/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffy9cCRA9TVsSAnZWagAAay8P/1qV1s84+mZA2jrxtnru\nIbKnCOxysy46PLcteXqKApf8rHlncX+AqkEAAszw8gcjS2rgPs4rRW1MgGGI\n2/0FngiV7rJ3gyljVHC2ysLQt2y1RdScUm8euBR8fyK8pbADCIV7RSlBLGYT\nktK9ypj8xsCR3/BVsosiz3h69WGgigLWhLzVGn9v7bMyKdZ3DDWaJ9+VfWvf\nE3hSQ9P2QkzzzpVLKxx3PeiuxHX3RBQQCvDSzMry5A0nrPto0UfJ4Ct2A7qs\nYAz8CMU0pqgzTGJakrHGFbhmZMpYFA6bIRz/KDrKVnv0sAwH3nm8luyhSLyc\nrnH+Y3W2EjzItFoTUZ33j80WdElAs89LsxKkcAFicsGQkYe3xmmuahevdAJz\n+XMORqBQYglbpLHt8HvTGKMCEMPLyyQBz6rc3YJ/vZNXt8+43BhWgt2u7E3S\ndtF5teD4AHOJJGTz/WQiVnUilfE3Ik/jAlvZc9Q1v+vgLnbW/q+vu16kXB1F\nUT56zfBteuhpihHEhjSe4ubAkZAMfnkB7qqpjlv0PfvEYLfYiR+b8od95I0O\n2qCb75uEPEt2Zj5wHZQ62/OT4gwgEZNBiv6upWXPnqqozA2irsm993IKkQWe\n/mgGRmF+RY4sh08UZUgYF9o2asTksdPsQ5RQIPwXLuLTMsPbhURLEUwbsxDW\ngHiw\r\n=Jeid\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"0ab71655be7c8fd199c9953ffb0b4509e9bf4ec8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.16.2+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.16.2","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.21","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.21","@storybook/channels":"6.1.0-alpha.21","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.21","@storybook/components":"6.1.0-alpha.21","@storybook/core-events":"6.1.0-alpha.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.21_1602170715944_0.3045412434165584","host":"s3://npm-registry-packages"}},"6.1.0-alpha.22":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.22","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"2f4a5a995d231bd315a487bfa2704db30c3bf248","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.22.tgz","fileCount":93,"integrity":"sha512-/pTNwa17W8pjUd6JbnZeUM9TFCIghQ3LABOo+ZP+H8UWyCnibYbIROAuyxRbrYwSDXgY3D1jP7XSwdYPvIDzWQ==","signatures":[{"sig":"MEUCIEh2XQHOz2oMIpWdt77syXYo6JWLDDVhBVskUmw4k5tZAiEA+yW40AJ6Aou3nmItZr+ypkuS57Yj8Pm+81YHyLHMSAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgRxRCRA9TVsSAnZWagAAPTkP/0BPscuV54+VRgUjH7Mu\n0U0zUIypgFy0sRzEthZuZ99A016sejhcnh9UMdSUcx290QyRlHBs3hJ7of0D\npvVd6fqR9ZocINA7mVCy2M1gECNkYK9/8vz62FDYzujeodHarj24b+TgAAKL\neLpOTzIeZbesjDxFBvaUXRL7S3ma/ML+Zd6WpqKaeDYYrU7r3XCrJJsTfx5+\nMtZLkvXd7ahYiV65VswRES+df0UCV88jsnQ1FrAS08W2P7UX5tl5bJwpN5f9\nbqmuWJdpHduytIXONmlSUmxYjXwWlm0Fvvk5Rp46RA75fVw6PoTKZ4nAmMO/\n2uG6TSHDX5SnJRKFhLEZcjfFwoBaj1cfC6ApZRf2mSlyuJWeiLqxWOWWisqx\neXJny1pAEJrlPG6Tq1Ked6sBANSNneRzbxedb9c6txXJ9UfRFOcaaD0UQk0E\nQr60SSN4MuktvnjER4JIpWai66IP8Pjo6zhZTpf9N0rt8SCFX1fpAVnzyz65\nYgPAWEi5DuU5jJ1OlSHYZdUf/oNDVQv9q9YbFCdSPTgrhyL5Qjc5MzVk1p7B\n0UgdtAHCWlN9hSIfTNFmxn8YsdQgkegJv1WGHCviwgIIq+05QuK7q2uy7mg6\nIgQAWlQxt7SVHxfScOJA1ToP0wkK2NK06bNV30ZtAvXpj3M9r4eIqbZXyyr0\nTMmU\r\n=Hr1y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"062478198c765be53467ac3fee581e9f8a7f851f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.22","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.22","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.22","@storybook/channels":"6.1.0-alpha.22","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.22","@storybook/components":"6.1.0-alpha.22","@storybook/core-events":"6.1.0-alpha.22","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.22_1602296912950_0.7733776774676764","host":"s3://npm-registry-packages"}},"6.1.0-alpha.23":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.23","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.23","maintainers":[{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ba97a0431aa2b9e015c95a088c8234cc1bdc8551","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.23.tgz","fileCount":93,"integrity":"sha512-pdRD86as9JcJ0rRE65noRAavqFyABAr4YW7ZE/rfUPJadeR8FE15uM92T/UfIFWZC62bhyw39e6R46xGEdE+/w==","signatures":[{"sig":"MEYCIQDU+Y7Xv8iDwtYEuWv8zG5ShJgCz+38UAGJGFYZU3q3bgIhAPH/G7kNL3HLDjRXDkI+IY1KyNDsdTnMZhgyhGETrTZo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhEHICRA9TVsSAnZWagAAfy4P/2wgI42WLJDR5D/aBij8\nwr741GUJA1IXvagOmNk4GUzeadd0yrjuu32fXqrI7H/ih5MiswN33cZZby6z\n/SfoEXmUujMEN0GY9JBw5yQCmN+NOKdfqN7iCdBeXxndA/Wr8tyOpT6vTPGs\njBqDx7apVUuC660xHak57YH3C5MEazJSTmOjd8i7nTB6j4ppP67J9U4h5YLu\nzkvlK7bd0izHi+tJLnAbl5CMCo/x6pFr4vrZ5YeHr1kGN9HJKQMZEIXatNCy\noi/aHxGE9xcOzAcZX/pVmMpokSN/g7E/J528skOsqR1gcq+C+tzk2sM0EZUE\niFA8O1KeB3ow5E7OEedYrFErV1P1GMH3qJfU5wuqYGl6bywLJqWnTba7MxEv\nycjsnVvnJq5BjAeTNxAWYMFG4oMjAVuFkbw/enIfs4tk5nWzV3aNKvZ3k6K8\nSvdyNUkYn33iPW7mUObjmFFzdlguV8jujkl16xUjqYM8ryqhjmc7i2DGXeeH\n68D/IODlsuKZ7E1wnB32rVMyQEOgB0pd9AuFDKC01RdNQqd98sYVS7kxeier\n1wJAsb0EW5KCbe9IoBNyZIqyvlb4OzVP8XK424yrNQQqsofeS1aejTEEyWCo\nXtg2HluYGyu5PQBnmU29pmzy4hHB/OQ93LYcQGa4phyAxVrFEdozi7P4gkVh\nigXo\r\n=qnyW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"1ec9d957eefc851a8353ff46d16612ed98261abf","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.23","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.23","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.23","@storybook/channels":"6.1.0-alpha.23","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.23","@storybook/components":"6.1.0-alpha.23","@storybook/core-events":"6.1.0-alpha.23","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.23_1602503111655_0.7691815553272094","host":"s3://npm-registry-packages"}},"6.1.0-alpha.24":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.24","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.24","maintainers":[{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"dc1660aa19a765997c8728018306adc5aeccd827","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.24.tgz","fileCount":93,"integrity":"sha512-/kT/Uuq1i1SXtkyKR0kUCVCrlz72HWA4HhWmdbCs9N5+iM5NiHw1dWtm/sqCfjgskwf/d1J6K0x01CpwIlBk2A==","signatures":[{"sig":"MEQCIHflHzSSXdy4Yeeragi/ak55ChJi9O78ni4D64vGK4DFAiB4zLcH0DDkhdI2kmSbw8AN5zXFHG1C8mXABDLn0631Ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiGH6CRA9TVsSAnZWagAAKXkP/jg+8t2PcIJ38JyHy+dm\n4YTYmso+XD1POvo0j3RILVk4VhnWB/fCUFFDeJnyxfXDED/OHUPPAFwj9eXR\nErv2T0C4g2ad/imcqK4OgrvnRwE/QicpGUt7hXuVPt7q3V27+DywsalI4xvn\n3ZonQWCc0ZF9wZ6jiktSDAHg+gFjO+O/mAPWbMxeK/Qepmmm2+o1ryyJ+AlO\nLC1+O68e7y4aCyx4XTtmuNDdiLSob1aZw1LZqo3uEuiKQZpfhI6aggLaJRVM\n1k4XyAoDXQfp+0pVrJYJjf+3PPKpQSqZGKhY8q2MZIWhjciyjR78zkJMZ/Kk\n324JYc18oBABtThIm/HS85K028gUN3rCNTi9xlr+kLc+88/Hqfea7C6WwFm4\nzN1xV1LdpB9xXK0YbgzTLhFSHRTbbuYxrhiN05iUBI6x1SdwdVkKVsZyf0/h\ns+7FbvCuq95LjQW8YRkF5WR4tJ7bGYWXuuIm7Q+ozNxJXs9jhTQ+jLn5YQtM\nT3Nl9oxJsJh2GcfDcuFOQxryYMjnBo9X6haQCb+lObjMh1LBt9QIaUsALyTS\nqLMh6hHrtxuq/7Q22WkvopCt1BvVyD2VhrADgpT0GJgsA7+JNE7zQ43r3gdp\nQZYl/RfsI41Sc71yBRyRq8tgXLI3ZWBPByDMT7IuxBDC14qvNvkLIbdXg1nW\n0hob\r\n=uV6H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"da8ff0573a5923d1aa9f861309d0969973cd92b9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.24","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.24","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.24","@storybook/channels":"6.1.0-alpha.24","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.24","@storybook/components":"6.1.0-alpha.24","@storybook/core-events":"6.1.0-alpha.24","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.24_1602773498363_0.1295844933537671","host":"s3://npm-registry-packages"}},"6.1.0-alpha.25":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.25","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.25","maintainers":[{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c79806e63ead971dafc10ce8b27cb4428acc3cfe","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.25.tgz","fileCount":93,"integrity":"sha512-9oE1U77s5UBaGJ9kblGYmiOp3Ba+u+CstGKmLXwPyhmduIDSzdpX7EogjJHgn1xdb6dQh96O/ohg1gxL6WfAvg==","signatures":[{"sig":"MEYCIQC4w9YP6D9wlcTTKQu3aHennwFdZB5N7ACRSM+XUQ31fgIhAP4OwNvWvm9H3TrxvssgeaHJu7sk38axlgIRoHCsnxX3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiZwJCRA9TVsSAnZWagAAtp4P/RpCKTXcCUOZCwzPIaLz\nJvo/PZDR0ZwS5XsMiBJcsX6fSc711w4j867HpERSI1kOFztwit1kM2N/8W3w\nrZ0tG+rmhKcKy20uy6V9wwA/+TUNjTffQfET96B9c4+sgZmw8rg8ChOQGW1j\n46Tthh2B3FyHpsI2XEjuzTLTJhYwCmSlHel1smKdV8fJpavzbT4KORP4AbSw\nsQTIC/pMOrYN8JH9SDzzgM/KqQ/d6ONGMG/gBly4SsYKm09JayCt9Qz59gun\nE+9nF2/j1Et24t0N+ZozYbwcynKVneFtgPf1iEbtsWYYricaFXPAPJ7JB2Zy\nde7uKsDowqxOyQTs+JzClGVwHsUQ26/i/mDGzzn0/Ea9Hp4YXCeqPSClyomC\nfvWCOlAw8ptfFWFhKE0cnz4UYmufz+PXvYYVc0aWjoAzasrXl7mLfjZ383xv\nn+lHzAHDw47jaLWR4sGTZclTOeLLZ6OrrDPhWdV9kRw8N5PHc9XlxQG8Masl\nVCncKikm/1qBnle6Tzg+PSbw0mrqugezsonOb1+tunNy+mtr+aBl9rVtuKmP\nrE0vGTttx5Jb4FKlPKlB60uLa4n4lVR79tULL46PenHuS0Z1nqvvsC7YNVVk\nqwAfvHIx+xCOs2q2w8KT7bYQJKDiMcvYnHH+u5gedEpAIuNg8csUWaTHAADb\nEv8X\r\n=tdQ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"b061cc62a34e2ef348e5f23c71bee02ffdb132e8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.25","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.25","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.25","@storybook/channels":"6.1.0-alpha.25","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.25","@storybook/components":"6.1.0-alpha.25","@storybook/core-events":"6.1.0-alpha.25","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.25_1602853896546_0.6499291288932021","host":"s3://npm-registry-packages"}},"6.1.0-alpha.26":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.26","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.26","maintainers":[{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"7f66c9723f37eba5467a8be82f1678f0b07a6c2d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.26.tgz","fileCount":93,"integrity":"sha512-489XBaVT64Edl9UtYPVuNhu19Be2t8dHCLAEw8uIjY0a4U0n+JJO7ugSwFlRG6GWAxUwd5K+xSd/upoM+pOHFw==","signatures":[{"sig":"MEUCIQCfpmo7cwCdUwPVA3nYuToynQcuwBZvEEBeohx0uFCrtAIgeuSaRkkM0WOhn0KdUt0mHuDYeq8zfb1kEsoEe4xh88o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjBuwCRA9TVsSAnZWagAAdZ8P/0o/HCTrD6/vcAxiJzEQ\nJrCiSpm8usHdEWovzFvHr86S8ZSeTQoUSDwHiJQHVRQpanwtQcExECkn1feX\nHnLzgmHz5CB0GemF/bGnwcrpliJ3mftzsO/vk5UoOlMlto9SISLtgMZbrDjM\nbo/vP8S1COMM7htPpb9sg0vADN/q45/j8/8S1Qy4WLA+q2je+XO5DAKouKYS\nQcGYOTPk7Sd/QrqMkogkF8SZYIxKhB8q73abMjbK+qtw+jWyIJ6f80f0bJx+\nPd3MOGMoiSaivmL33FT1dElDR1YWaVc12PbUxscHSg0fdjoJi5LaaIMQjYPE\nTjQMPjri+rtYszDJAEWpJc8VuBpEwIoFJ2+pKwcd//8a8OQcOMSzp3MltU2A\n7Ndu/QsY25SF4LDbBkXiW/STVd+IF386SQfTAQDEYvhnkp6SICdU08ygMYtz\nF4lIU9K6rlZehntcHV+Tk05OVi52V8cEzUG4pe2umsyQjrcqTD6bmC6bMrlC\nU8vJS6IIc3/uRjc+NEs6TzdpSdyDxAM0EQS9qQrrio9/8zoPyPOsxbf4pU1a\ndhl5kdjUGJDYfz3d7sNoIa7yzRXA8+m6wS8zQVNolP+k4t78OUIjlVyMz4tf\nWCJOwsQnjTV78QNL3syN/2gknvQRd8WhMXf3im/hHWmKwcbYPljwPEQX6juR\na3gE\r\n=wIgZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"4a32476204e68ccba740d584230caaaac51e7762","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.26","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.26","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.26","@storybook/channels":"6.1.0-alpha.26","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.26","@storybook/components":"6.1.0-alpha.26","@storybook/core-events":"6.1.0-alpha.26","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.26_1603017648402_0.9278476796067292","host":"s3://npm-registry-packages"}},"6.1.0-alpha.27":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.27","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.27","maintainers":[{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"298bc6740b940b64df93c040db41a8a06fba4698","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.27.tgz","fileCount":93,"integrity":"sha512-rySG9naD1WM6FsQNztSJrxmmCFGV2RHHrQap5rgPUUGQBTIeXSYE/zYPxlpPK7F5VZN+2jfSUTKZugkyASINBw==","signatures":[{"sig":"MEQCICQHmo0pwpn8J68rkF1NMlaXx7vel1gWqR9HD+qlqPMwAiB/vcHOjSujT3lxJ9t4/DN1FF/mlZ77fkEbwm2Qc5kKAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjW87CRA9TVsSAnZWagAAThIQAJdI9Krbi/dFpiiSfX97\npceSPXU9a2wjzyHy1n90n7xmbHqGJNImIKl6hkmLYhuDSGCqhZNINdwRRe2X\nb9qaZyfezGJZY8YCdwlBtZ67j89wboTTQogdmB2LQWi8SC4w1fu5pMV0OQtF\nHYu1MLvs+5kp5eiyBmlTNdfp2lvuPDYVb8jmJs5az4QXXi6SZ8i10CXVZtF+\n/296MDSnXd+MKY2DZ287msX2Hxo3eZ9gyfvJw3EFpwujtWB/9oa17K9tBdi5\nlrRNh8RUMkWy4MxdpdodbxcWxPMqUv51izNcfz1xduOX3goDtuTOGRsnMvw3\nranNmP2rF8a+oB6t6Qzt6yFaWy615Bu8SVIfh9LILkdBP4JeVZ5OoZL2uh5n\nTD6zTQzObdkJK+gMkCuyzBDU4zJGBPn/0c6J2RQediTZyhkxqqHOdD93vVxO\nNshtaADJui5eLrf/wDAVVtT8MDeFr75eL/GFz/m2KNBhZdjKf+qCL2UlT/Xu\nPEKDRGU3EwHXZYvRqDw7cKlrUkKsSg6uIXAZ1p1rDPF++9Dna2d7poYGw18X\ndHj02EcNm+AR9Ct9LYaEZaMSjFNOUBx3ZoNyUj1nAzpslEUWzlOhG/80VXrp\nRIetTtbVMnvMhQHaN8V9URx9TQf2GVD8e/iIoniaklZ/a5rxO1Io8q+rjv+V\nuUnW\r\n=gcAF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"0bbd3237844572f749beb5ed845be83ccbbea85a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.27","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.27","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.27","@storybook/channels":"6.1.0-alpha.27","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.27","@storybook/components":"6.1.0-alpha.27","@storybook/core-events":"6.1.0-alpha.27","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.27_1603104571222_0.21288447494174645","host":"s3://npm-registry-packages"}},"6.1.0-alpha.28":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.28","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.28","maintainers":[{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"00536299bce3d5ee95ebc5d3e2100b99e3d45c57","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.28.tgz","fileCount":93,"integrity":"sha512-ZY99N+c4PSEFXcrL6gXVFOs/2VaHSNMsrQyzxvikMDniUKhhByeVSkG0xlHCW08yuQGrWwltjAzX6AREw3QW+Q==","signatures":[{"sig":"MEQCIF5OHs44AVTK/1R11MQJxQAapGOPakLiJAMM/sHbU5kBAiAfhakHGiElM2A4S9YdiLNmCFupx3X32D6tkP9OzZBdQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkoduCRA9TVsSAnZWagAAEuAP/jUx1X7SEBEU9yZPMHcc\nAasXGq5onCAP9rl/yvCeuO7HB9LJq5dlImJkcdyesglxAsWXaYx7ZP3joL9l\n4nu2Il3nRi1ZxSDMakIaEJL2WZvufhTCau4cNkfGwx97822B16rWSBkPDm1j\nofZRXMNiQo1ptVS7OmvzMlPxaIE1RSo+pJ8FJVP+7eDP0KXjJwsuzmQ3viwg\n7hZnIwDbMjA5Lgd1nDWVZmJh4v0/z4gSpfC7StvbKiQuQmt7F5LPpTGTu8Ip\n3ZKCT3c5WqvIOSjIvG/xnGa3ZSMuVrgVLS5wcqFFkU/fFdNuvsJW3jFyG1LI\nnSIuBi9juJJT4UI6X228mUinF26k5e4Uby/a2Zue6EpLyIN544dRm1dBlB+v\nzbWUIJ0mUcDwTMnDh/j/McO5omZMDISvADeIuLlhTA+ZRsCpXMP0zxGDyeg8\nJPHq6DSQEeEGk//MAst2Isjod3RrB++1i1gPxBIEl5cSIx9Z77qPr4cvpLHw\nPz2VGJqgrjAJowEj1gzixVyS+Zq1JWpkreF+A0MNnndBoyS5ntFGdt6QsEGF\nfmpK7lyf/KQCJFTWicEibg8BWCkijgJYaSFx7CkuL8CI/WED8bKy/PSYQABA\nj93S830qLTs07CGmC3JH9gkblXll2fx8WRAp3ts+Qcn6K2MltYZ6qHh4T3fK\nUabT\r\n=G32K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"9f44d66ee89c9d9b1ec33afd42866673344078be","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.28","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.28","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.28","@storybook/channels":"6.1.0-alpha.28","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.28","@storybook/components":"6.1.0-alpha.28","@storybook/core-events":"6.1.0-alpha.28","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.28_1603438445975_0.0069463011076844605","host":"s3://npm-registry-packages"}},"6.0.27":{"name":"@storybook/addon-knobs","version":"6.0.27","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.27","maintainers":[{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"20160e37583120c04cbc0d53f93172c5c78c3ca9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.27.tgz","fileCount":93,"integrity":"sha512-92vAznRPWJHRt2SP408S/UVTk7/wfPmgWLvdAP7fZ0JO/ysrDHYxqgCly3fuDA6YBCdhBk4aL8ICXfrmy7bE4w==","signatures":[{"sig":"MEQCIEjGCfCn1aNmhsNUIrKUguCqpx/x8U51S1E8Bf5c8AfMAiBnsL0GCCgIwxf/zbT043+9Jt+mBx3yYO1e7GKHC0PI5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkq7NCRA9TVsSAnZWagAABKsP/0FhadM8Zvh21aeAq3e0\nk7rZozYweu2WRWw4YsvPDQNRPqndFKw2Htx8zM13vuSzdp9gFVf9Wm0blE3K\n7jk5uJz9QHLJ0KD0huqkwTs4NptLnSt/YFq8PpSaFeUXl1nKppOG3Veu8eVZ\ngy+OWNu2BKni9r/urXcVt2Eq6OLMQdTz1UjGb7AtvfuyX0kLqjRNh0g6U+k0\n943z3UI1gb+qwg/9vhuB3/78WrbxrZffGPB2ZZVfoKQ0C/TQVJCqAWwaGQdd\nznT0gC1iQpHIb8Aqk/Zfk7g2CZOsomVqC8fe+Q7qsyenYzcX9S4bYIG2AqAg\nM48QPnctGN7LYb+ie4umam1zEg/MMfQyslksUv2ZD+KlZr+ypugNfpJgdQTX\nG8Sel8t0DrkHeRLyMbPrAucV0xWgo6HaShxNrtvcD5MbInLyB4nKZA1Q3I0X\n57IcoFIR4+UwYsG+Hj/Z4m2/b6eaqgWdWEuCZQFj2kLDJmNyBcoH7IiwEIpb\nLPIOSU3DqF+LSRyNB0xgdiM6rgNX1/oYimENqIcbGhZ1O/qEKuEZLjBhTem2\nA+lrWdnDuEUxz9HBvwMbJ+lFDURUjZrPlCNgucCfO2NiAfYv8errYin4xf8O\nTvyIhZvPVsn9T5zgHRvFR4586iuF5N1tMbQJ9yPUc8XNAwITcj45mU4UXs8i\nzkoj\r\n=KcyM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"1aa25de4b1a9eb5570f3e4814780378810b6ca04","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.27","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.27","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.27","@storybook/channels":"6.0.27","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.27","@storybook/components":"6.0.27","@storybook/core-events":"6.0.27","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.27_1603448524573_0.02442595278251991","host":"s3://npm-registry-packages"}},"6.1.0-alpha.29":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.29","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.29","maintainers":[{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"af604319a2c08323de1d45fb2839ff04a781a855","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.29.tgz","fileCount":93,"integrity":"sha512-/5NlKdzK2jqaw2zwbaTfF/wTCt/kbwW0kU9IGx9H/K+sa1osxxqvDKtTGJEuXuTJbBJxq7rnIk6FTdOpIqArxw==","signatures":[{"sig":"MEUCIQD7WSz2mKWVwoqA+fqMPWJDwZr5EqM/zUiGOZsJmPzlJwIgLB7+0OaI6sKlVf3ESqa5gweIrbvrXcGInV4pMWfsvdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkrQ6CRA9TVsSAnZWagAA9YQP/ic9Q+fhhZD0PiIME/mt\n4vUymyiFuZIMuL4KGVLhpyNk+zMO1gKNT5mAM5L5qn9w+u+62UA7miK/K53w\nlJS35CmYyFSZ0DxQkq9YUXKf7Wl/h7cBfsXJp33KJFToEAXYjm1FiusGkbAH\noO+tV5Kd2QvMAQMwz139iyoSZcYFIEGCWlVkwHP7p90L4Ph7PPRugtv7eiOU\nYJ3XF7EFEOV4Qu8Qn1hXOEw6k2TV7DXMOeJltx5BdWjuxT4f3G8G10Ms7SZK\n9JemIkzKmP3aBz4PmGi+YYpqSNmoJPO4fTsGwWmbICySlPN0hLuFvF0N9lq1\nClewfx6qc/0Gd5KrOfTZHY56ouwYk+lxZmbsuBu87k89duOzX9ysmBerRHjH\npVv45XvNENFbqAHp661UZVPucgCkuFu6BENjiNwy2w8vgpFavvHpKAniXfpB\nyXimqp6dFc+BmCnObYg7wvx9ONz7PYnQuISpZgfT7XRP7/Rz9kkiww7cwoqe\nk415W36+bhvL1ttoWDg6Rw4ttfC6lU/Ag31GZjOcYclBt3UMgVjZGVwViWgJ\nLu4mC4DX8IvlsGS0N7Zsbt8HwjiL4y73YjTyAloMVUfxqfZPRQCzx8i0pAr9\nVuQwAO4b4RX42tsz6hcA4UUvLLBKOjaIjUq933uoMbwQBbhSPsYzLA3krLJZ\ngnar\r\n=aLqr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"c4c9f9bf50f9280bcaba9825156a43372350cdb9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.29","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.29","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.29","@storybook/channels":"6.1.0-alpha.29","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.29","@storybook/components":"6.1.0-alpha.29","@storybook/core-events":"6.1.0-alpha.29","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.29_1603449914528_0.4989613862867157","host":"s3://npm-registry-packages"}},"6.1.0-alpha.30":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.30","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.30","maintainers":[{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"76f8cf3fddd31026fbe85d6aa9bce5537a1cbbc9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.30.tgz","fileCount":93,"integrity":"sha512-PQS12jZxIi/IMa6vRW2hNnEhZlaUkluw05pB3+lCN30EhULz35rrFjbQ8YIQcjA6/NI3ArJZNbtpS7Hn7EQKLg==","signatures":[{"sig":"MEYCIQDvXJsmY5yXxqumRcMWHRPzWQIQgLk3ZwjDxMGCZsxEpgIhAOSLDqdpscdLRMGtZK+uGS1l70wbtstGhFPP06c3WMIZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflu53CRA9TVsSAnZWagAAs0AQAJFE0lav70j5BD+sAhqA\nw0NXdjza5RyUVGB8UaIy+Sweog1RjpLuFYy8TtB9X5AFXCe3P/YY0h+dsNmS\nN1T7duW8saMP3XxbhH8hGV7S5GI4HKr/f7+xZTEmOvZdiCwONRob8NPORpks\n3xxRjC5V96773ES0fiV+WOIZ8ARofWO/4tZOEpmzuAvwqZJyRDxNXJPq8p+G\nyQUXBefyBSMI+BeLusNJt6jBmq4/EEslfvM9Xm4z0J34pih6IjLfi4ZcDLYK\nkarGo7u0E/WDjgX+0TsLslesCHgiuyGt8UNb0Pddja+pfwCAW8f8PNYzRVGd\nAHlzTaWgv3GetpEujQnkUrGW3PLzrACSXdG1X0V75t4kKYuCG/creni3vrlp\nufeJeNjyNLYwk1vyY/ly95Njz4KUzpS70ZQc0/tOFp7PlOPHQ7qdkFm7xHVY\n5Hj+TzdHtveEpoEFIVs5Xc9PgDVuTwX4xhjW1XnHm0mEyKDd3afMUT9JDVua\n1IaoZ/n57I1FeXvmufFUeLLU2yWSs5DMjZjdxXLqzEEr9sMH/3nz2ZTyhL6E\nol4lx277/yFBG07C4iyp9W+J0tgAm57REU/gE4qysjVYjnDb2mew0qFgyMBi\nqbUONmzzqKq1R0VyEcv2SgPmSvm7jU9rTXkowXEWkjdQlFDuUrZy89UFsbJG\nDLud\r\n=3AV1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"f883f080f23e6cd3900bc3de7950180ee5e8b226","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3 || ^17.0.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.30","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.30","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.30","@storybook/channels":"6.1.0-alpha.30","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.1.0-alpha.30","@storybook/components":"6.1.0-alpha.30","@storybook/core-events":"6.1.0-alpha.30","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.30_1603726966499_0.9520399667000159","host":"s3://npm-registry-packages"}},"6.1.0-alpha.31":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.31","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.31","maintainers":[{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"22061bf5c90eaf57c59cca78c6d2480c6874477d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.31.tgz","fileCount":93,"integrity":"sha512-Mxz378TQo05pF/g5p9t/yRWdeLPedC+CMvn75WhZE3Y9lCBA45Y9RoTLmA4UDwlF8OKC8BuQoaC8nlfKF9Qa3A==","signatures":[{"sig":"MEUCIDZeISLkV1SpUYSL/rgxBv/ldnRTxIAJWELROXOIaUyKAiEAhWtuSVcx1gxb5ZDbtjm/BOXBxbkdcxy7BWyrxONI3QU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmAJOCRA9TVsSAnZWagAAwrEP/2SxbxE/3RKoBvqGoK2k\nvioCgRc1LAsPtbwcet3zXsIVvMEFyt9RUJbobq6ee05qVIevQ4DyerL3JUiT\nzWSL2ZpJ+GR6/EWK3Gui2KWxUFGaGe1eVsuN+2i5eq14DJomHjnl6AZ2GiL+\nx1IMKcOSW7McH/Pb5Ao4MU7w7jJmXS8zHtsMa9htDvgjxi86wXVxV6rn3L2P\ngSlZoJ6IC++gm0ds84yGa9b4mBd1liMUHl4mUaSVb1oUTOhemgEk6quvAQjN\nnpOYIoIGw5Gsm/32y5GX33wGLMt+o4mGKWgvyj+h03GRTnNT02RNE4Sbbfy8\nMsxT1N4bl4TlxwEgKzRkew01f7bPQDxo+06e0rCpnJ1mtOYSUz7EiUpL+9Ah\nx0fn09vH+oUZPYzaoB6zIZITTM5nElhYFrAqOWcIliNSYaF2jiS4sEKQhLQp\nO+l7c+W7u14zMJIj5qQ4uI6/KLGEXB3zypo5i4UXgswFjOIGagGcw+pZbDnI\n2WqUMzL08BiPVWRxSTp0V5epo61ZdpUjwxGUyYpWJVXf398Vsh6+jfTc+Cic\naxfJR1dbGpzJmQJVBLd/4vdJ/3kFJVVZZ94/i8gjeq9v+JhddSw/rdFMH8Ud\n/1n4mnBkvRdK1TW09YUDgO4yzDUCWGjfcqEnsJE6Sm4bwT4cA3FP013DV+jB\nIyFT\r\n=tRbT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"f45b4c6fedf0994f7950ee1661592060894d7272","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3 || ^17.0.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.31","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.31","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.31","@storybook/channels":"6.1.0-alpha.31","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-alpha.31","@storybook/components":"6.1.0-alpha.31","@storybook/core-events":"6.1.0-alpha.31","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.31_1603797582072_0.5586739069365312","host":"s3://npm-registry-packages"}},"6.0.28-alpha.0":{"name":"@storybook/addon-knobs","version":"6.0.28-alpha.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.28-alpha.0","maintainers":[{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"017d0ba4ed29cba32a221db594e9887a3a792f7f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.28-alpha.0.tgz","fileCount":93,"integrity":"sha512-BkiuGfYN0Qm21gm6giRy/c+gkvxAS5oWrxW6IW3FQU6a5TAt4vpE+SshZpv+yzRh6gU9aiTnfI36LZmyJZztGw==","signatures":[{"sig":"MEUCIQDUkEG3tubjRJpituvhryca4NaNxro8MwhwzS4jfOHP1gIgaJB5fbnQPbYKeZPLg8JXlU6GbugIc5SYOlnb5wuBPvU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmMVtCRA9TVsSAnZWagAAPfMP/3AVjX5cLeI64g7n1c/U\nrw20BVYzoKpZo1MuIdz3gQLp2npLQK5tak6xGQjerzlBVwkcfe28kXVaAR7G\nMXw2RdJ3CgqLC6wqRaWUtVv1laTG5SuPo7L4xTqfvu/Z/wQCLhvL48o7fzPW\nuj3OmZtY7VhPAS3Ix0AkDa5YiwlZiPtpSU4OaApTqXS0rG7LXxKRv5PsXV/W\ntwj+cnmYxUP+sSgArjcw0WF/Vkzr/YnlXk4+J4IV9xQK1/Ee1NzeP2qEgmd+\nO/NWEvl6vmFksFsyZvqpZdty4UrCm+L1v3hpiKW2BrhswjzFkANWD398THcN\n0XWyCW/SSdvfG7LYOGIWQph4eS50ZasL/6uGJVAm0qD3KuFDkpIwFAokv/3u\nlFAaHCgiD5J3Z9NvIyq8R9dgofmIZ9t9a1/fvUmIPFiQ7c1QPqm7x7qjcwMb\nyROmsx7ArdZdR1Al9tydpUzaNUtZoT2Grdi4O9NbzHLWH+oz4y/X/dpL98yC\n3RQDSAjCtGCFRQACqHQTrq+9zd/Jbb0cOA4GYNvDjTsym7TZ0d9DW+KQEgc8\nhStVD5U2HUmpkXwpY4NAoAyb/2PpCZDD7A3yuvC1Ps+3V5Js5CXXiOkBkEsy\nkxu4SkEXL+152Qe2J5rMi3wcSUK2OkVC4AjO3sikYOv9qb67DBt/C5Pt5gS+\npAXN\r\n=RNGG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"3a6f8edce0f774ec5030eb006aa4f70af71a557a","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.28-alpha.0","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.28-alpha.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.28-alpha.0","@storybook/channels":"6.0.28-alpha.0","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.28-alpha.0","@storybook/components":"6.0.28-alpha.0","@storybook/core-events":"6.0.28-alpha.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.28-alpha.0_1603847533514_0.10650100369785287","host":"s3://npm-registry-packages"}},"6.0.28-alpha.1":{"name":"@storybook/addon-knobs","version":"6.0.28-alpha.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.28-alpha.1","maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9a9c38f4477ff8c78f36bb23c2513024a8f366f4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.28-alpha.1.tgz","fileCount":93,"integrity":"sha512-IZmDbqrJ3EcCRET8WxTW4aRj1J6iHWvX2TeG2HXIxAlSdTsrEoLswg11GXOXvhxywXdAiovtGGqugIN1Mlf+CQ==","signatures":[{"sig":"MEQCIGp22gXxaN3xNnoN2mC/HK/ewnxEFQKiqo5E1JWAPPgaAiBQHcc+nH41iVZntS0kQDu+1Q0r5SArbbyKdYnqnEGclg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmhy2CRA9TVsSAnZWagAAUpAP/1bT7lk0gGiaOVIoU8/q\nXPnZzp2sBeNbvUxuorGS/KDEk4+ZItC5NEi68AKll+CH4KjpmFJaXQCP6Vxt\nf76+4WXgqBhcOO9JvUhX8e8vooMzWvNhO89xGMSWMq6Tfp1+d6hD21Oq5KSY\nGj4MaqWks8qepT9I8CGSYnv6GXHOea6uSiKc60mf3ThGXsvucmaw+IPuDdXL\nEJa7B1yjLOPsU+6mxtkLEAFrq+efV6eZumBE/j5/CB7kHN7ZpyTvJpcQotbh\n4V7QhjJa3aS2gO+k/0RVurq9cp7gFLEctzNuSZ5TYbhc3piVLvv2ABwepAWC\n+xSA0pJXEErHHbMxSTZyU8UNPTATzFOD2b5zWQZT6wAkBN5ukxAw7DAtUzsU\nMxjKmLItHqcT4OF8JSOxRiZC1ZCmsQ2JtAQOuR/i35msvwS7mj4j1zTkhELb\nAmsyDTvedhcHIMqkFdfz/l3In0rHFvN4G0+CQsqEJshor/4dMNHY3FKcErqp\n6pia5P9ym4Ok/zF/XMyznkv1ai8amFN/qV7MGT42AQS38/R8+ChISK81LKyh\n0XXFVGt034/uCCavWY3DVtEoxjbRWH4V80ypK8hOp9g0+Dis50FG6i38XgAG\nN2p9PRO/fG65lJOcyCn7tDh51DqJvk1HeO795pcDwow2kSnYm5X9V6kbY64y\ny+Ts\r\n=WXWU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"d20615d3537287949de70c847c63510e91f5263c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.28-alpha.1","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.28-alpha.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.28-alpha.1","@storybook/channels":"6.0.28-alpha.1","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.28-alpha.1","@storybook/components":"6.0.28-alpha.1","@storybook/core-events":"6.0.28-alpha.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.28-alpha.1_1603935413465_0.5211355817439534","host":"s3://npm-registry-packages"}},"6.0.28-alpha.2":{"name":"@storybook/addon-knobs","version":"6.0.28-alpha.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.28-alpha.2","maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"2b9fe8451606fdab907df466d3f2e148d4d70f56","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.28-alpha.2.tgz","fileCount":93,"integrity":"sha512-PVyomFIocYNKZ4tzr5qyUVbbUaGCZKB3saWN9Gqwj83xsysZCTlQ0k0w4CtN3eJosnAu3UEcMs/w0SshpHwMog==","signatures":[{"sig":"MEQCIF8giIXoKClcoZyRb0bYL5UBN5u9mEfwLG6Ea1uI7t/OAiA1xrRAqwTHiMpJ2Us65m4CPMJJg9m6Px3J0ajhwZM63Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmiHRCRA9TVsSAnZWagAA7mQP/AqkwrFDvivVrEajZYli\nsbHGeNH5mfhKEl7p0WQEK247waTGi0CoR4MteB99lCDLstNh9aa1JGgw92GD\nibli5V+BHfWgZHBIu8KOYNn93r9G97tAyOLt3U2oPPhjtqT9uCfyA7lDOL0F\nA2YZadSuvEPnpvG/uyruUxMKa/NeDiwvf8/QZmNQ5KUO93rKRRx+iBCdaAcz\nPtE4CwQK5ZRDcM9MG8CxIi9fjOs+WcAOW0em5YAF1qi1edgHlp2zOYKKWlGJ\nA+WxNI0uydiyxCpwQbGnOwCCE/Wg22Uhr888f4vm82EnBCmOG41W5pbnKSIY\noW+jqz0438VgMGJh4FuuB6z2YojvnOUqV40Xb8YScyfsqb2W5hmRNkWwk3s8\nCX504/OtmYEJa7cm7TGOIPkmg1ByGYbDjxRW5p1GRffby7+43QCmk2NZXxS6\nN+MQHKsW8xRW8gZOa+YJ7WK4+N8iUyImoyTzYe2JoVloohazzSVC/HNrYshd\nWDPuqFo+0OXiQOPK2hI2PjjOmUtFvkPNbjWG+vNqFWlS+1nCuQcFg3f40mUu\nhKsot1sD6DEY+O7C4Q9fdhaxIgL6Sf+4rqfgw5LgZr99JFZ+LBPORxaMQAvB\nejbY0g5FbdM9J7mCQlyKsLBu7bMQdHL3CKbCg4CF69DtqG5CKOhOx93Mra/8\nz/mu\r\n=JkSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"8fff3dcec793b8b6b998416d48bd3b075ad44527","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.28-alpha.2","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.28-alpha.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.28-alpha.2","@storybook/channels":"6.0.28-alpha.2","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.28-alpha.2","@storybook/components":"6.0.28-alpha.2","@storybook/core-events":"6.0.28-alpha.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.28-alpha.2_1603936720734_0.9687221920030384","host":"s3://npm-registry-packages"}},"6.0.28-alpha.3":{"name":"@storybook/addon-knobs","version":"6.0.28-alpha.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.28-alpha.3","maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"cb0a74f22391d0d6b8aa89a1c908057beff93402","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.28-alpha.3.tgz","fileCount":93,"integrity":"sha512-/1VDrmeogkWxJZAKTU9DlGYCvnKa6TpGnChi92mfW9+mH8H2+yGRjuOoNJqxXxjPQxaG1uokb4tVWnkwct17hg==","signatures":[{"sig":"MEYCIQDO0FRo5AWqfYa0U5cWHOMH7Nb2dnLTbVxm/G3cK4lQuQIhAOTQRbpeToxwbQJm8RxhmGQAw4KqCLnJsuD/dm1/rMsi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmikxCRA9TVsSAnZWagAAzVAP/Aj+O2IgvX41dFAYmryV\nkx7lx2Z85OiZfOMU9Aa6+JhB6GLspPXmTWTmOsY5KrimrcGq2oPzJ8bZhy87\nHCkFeLzsS/Le6qQknyacyzb2uX/NKCShZXyO73nAknRfqP3UKuQjCwydO/dt\nxHDp3uNGoY5/sgh9P6I4ltJhrdzR1DIb1h+SV2uQUjyzJD+J1xXT7eUqxw7P\n0SbcL0nF36LnB9w9gpjaPOogIS7LHSpcnY53ZCFEjMKbUYcrgsRfAuWL6HUa\n3n9b/Usg+1m45zcEtgLIRjTAa/DImhMrDatdeXZcjHv9gROpUgmDA/IoPoVu\nL3bbH285Va/WGhBt94zg6JAocPtRFfBzWGg08FqeMxcyARO6xtNAYmQ9sFbc\nh8gRGMVtl6HxnTEYFpwmrL8NWlfUQHOYQXCve0AuX8jIyu7Uzxka8zIh1yjz\n+0JiAmtZOmcFDYTFtIZVFnjFjecRx/+/FsMno5Dm30orZQvVPxw9LVCyW7fN\nVRff31TmmPz+6hb5UQtLURwIq0KE7rsWNAMS4xzpWhRHnzts57mVfX0Zql1M\nysiX4mmBR9EgDZerG79f3CCLjiBfv7ObHtaRYl7Ny6FPwn4/Ebpq326dt2xR\n4fW22Icl5QN8xD7qAu9Sw3EDMrNg73vynD04lxjObhghUopiPOxwye5FX4Hj\nCl+B\r\n=Ra+s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"b0d900146b8146ecb446d29083f95cf2a37a445b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.28-alpha.3","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.28-alpha.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.28-alpha.3","@storybook/channels":"6.0.28-alpha.3","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.28-alpha.3","@storybook/components":"6.0.28-alpha.3","@storybook/core-events":"6.0.28-alpha.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.28-alpha.3_1603938609035_0.8693676901002392","host":"s3://npm-registry-packages"}},"6.1.0-alpha.32":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.32","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.32","maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1bbe5aa35437d7807ec92445312896ed20466ad5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.32.tgz","fileCount":93,"integrity":"sha512-rwAfEnGMjl/NhcwCj54Dyg1ktlw99q/yBU3zpqMainkH2YZYXVR7pb9/7MsjxZZnkcgDt7KXnP1OBLYsdv8xYA==","signatures":[{"sig":"MEUCIDc6Lix/+aEbWUcynoiOVmNr+zGIWE8zym1x3S3iF/juAiEAhWPV9e0ANo0yfXXrZ4U21GmMGE8HGgv4GquFIzhyeTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfm5QPCRA9TVsSAnZWagAAkbMP/is1IVDorW5R/XhWjGOG\nX6hlc2oRFDS0xl1OTBtPCvuuPnCItv6HxJiFSO/zfcxRgAUavTbbudtXtJC/\nHSPzhgOMPrNVzsO7zzYP2NwTpEnFP5E3vxd8lx6ryF+nWmDFJyqdkJkSAG6r\n6Q7yielg7uG9wwnWT1+3eZ6ooO1Qa5iw1FFnIf/agB22os9uT7xCaTDg038b\n5JzfDaH+tI+E5YXR8IHvKC8P3uHge77WOszazArQQ9N2hQfD93PRG/5h137D\nLPnwcCkEaeDV/lpWBaNiqpFLQzQhqCwW7AWNzDH2YPlNJ50UiGxM2S2eEZLg\niUpb8DKg1/nCXdhwQwBBmFkFj3xecEqllvHd4n/84NNrQ9IFMzM2vQZMXvWJ\nQKsj5gUR45PSOD8wzI9ZZYXFP8YMr1vo2jkm7Q0A1DUHDnMTmgO1hsvHF8B4\nIg52LiXySjHSXPkfKdAh3O9sWV66VsRKF5/OECUAzfkO0xaxJoWKHWlxB0xT\nN8MpZQgmsmlmAGeykggEAYjk/uiHC0zUG9JWXgcHQmvF1RJ1O+pA2kqVXugJ\nnCcTm0P0W65XhB2ZgPz265z30GTKd7LIahW2jaaeVH4399EpN/3WwoRZsK3/\nsMVXOxvJnUDihAWHhopnviiZvKeA0bN/ylibk9lJiX11fYnpkgkPZsc1Sio4\nNaho\r\n=vNoJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"1ee337594e1da7751c34fce9131c357f4b4e4aa8","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3 || ^17.0.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.32","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.32","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.32","@storybook/channels":"6.1.0-alpha.32","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-alpha.32","@storybook/components":"6.1.0-alpha.32","@storybook/core-events":"6.1.0-alpha.32","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.32_1604031503109_0.720161167896769","host":"s3://npm-registry-packages"}},"6.0.28":{"name":"@storybook/addon-knobs","version":"6.0.28","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.0.28","maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1956cc5d9200467ef271fb95d34656fddf149009","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.0.28.tgz","fileCount":93,"integrity":"sha512-5vmr/kiOSO6Uvpx9DHQqAPDWbc6SXbLid7XYBMKBBZVHiu76iPgsLjx4KV3GFLSHaJZ4DPhwEN0hlIyf5Qlvvw==","signatures":[{"sig":"MEQCH2vfECiym9XZS67THEUsECmiL5h40aMQ2BoSvHcfAJsCIQDBWtvMfzAiuqmL6LUPxZ2jkOSsZE6EkdzMvYbPbhjfeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfm/WECRA9TVsSAnZWagAAQs8QAIgsENcuawh61hGdkXD1\njpJlKSW3y6P/1g5mNmGhir8ym73zANrt+GPj7fTlct5/iJMEmrc0fLwMtCAZ\nTWi0Qp4wiURDjH3VLCNiouWy32y3ra9Gx8oszNMlr78T3rKU8pevu8wU+9Qq\neA+tb03xPBYeXvZfJMo3w0v4o2SrXszpvl11YwF7GpymxTBkpd8Gkb5rGT+P\nhBDQccyvAHAi7NKcd9CrTTvjuNfssdK4znf+ssK2upS8iWDzob8gQpEBReX/\nq7FekDgUO8PLvh8X8aYopeHCfMtPyN7bGur6HTf1mD6N8zEp0AxSKLDWLgJK\nYwkNC/pcMNVyS4fQicdggbYu/ZNUbbWkyXCTx2wnowInZ758nsulE0YTL/Ao\nyVBvS6RUBxrs1RqD1IBVaSFe22y3+djcu8UPywkbK3vMGUeKHws/1+UDcPXC\nudOn+IGiBU5zPa33fhUbgA4oFXLJIicRgtGQe94FsGCfuhtqeYpC6eMHDUDy\nWtbp9vlwmaUAqn4r5DiGUqRIOSGVSqadRJJFZ9OjNkhAkt03FxWsUdzfQtZM\nibwnWzHZw1VIzQEUnHZVdqI6NU9Qaa78XIoWcQtUedZvEo1jS66I0TCmQNsO\nW9ji4RC7zmDpMTQHN7lGdgRhQtdhOuwWtOKkNqcPaTUCfTMKvtwhsDLLu+c+\nafmp\r\n=Ikhv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"8c2fb30856de06a7076960cd1421a859923d92d3","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.0.28","fast-deep-equal":"^3.1.1","@storybook/addons":"6.0.28","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.0.28","@storybook/channels":"6.0.28","regenerator-runtime":"^0.13.3","@storybook/client-api":"6.0.28","@storybook/components":"6.0.28","@storybook/core-events":"6.0.28","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<=3.5":{"*":["ts3.5/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.0.28_1604056451631_0.8402033732546959","host":"s3://npm-registry-packages"}},"6.1.0-alpha.33":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.33","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.33","maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d1d8c5b5cb412361aad706ca7fafb0a1df4ff70e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.33.tgz","fileCount":93,"integrity":"sha512-c/H0c2npwiUJTDZarGfOLtkouArHaguWtoY1dOpaTeiTUuWr7TBqYPzQgaqH1kW/JirjT9GdSMTGdcGeH+Ks3g==","signatures":[{"sig":"MEUCIG5sGrweKCvAx7c+PAbmg7HEwwKwvXt0qgU5g4JE7yB6AiEA2FQtZbn35+ircn1+vQefVE6wikz0+agsyv8LnxODwPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnDbPCRA9TVsSAnZWagAAlmMP/0vbywSzaNdhy7o4CX2S\n93ft+RGP/I4+GQVscslm8aTaEFiyn7De8vp/H8YKQfOreq3Z4iZgs1kRCzlV\n28qBOeylLYCr5NC9fMhEeewN6PmvlA51Dp546gPkOhC0rB+tJjSEB3y7q+XG\nTsbpcTyfjpSHPneVAGoTHAumsKy584xUjOZ02Mq3yERBdXf4YATHpRCrQLKs\ndVgd7vnzlKW+REOb+jbifrIixJfPe8zLv+SYHQN5pBacElaqTaAJFFMe+xKN\ncXJJqceCPLRu0lYP6jN6Gr1uelgpxOVCuaoi032W8QD0e4WjkehwaqIPGWxi\n3iYvTkyV7ic/jB+fkrP3VdlGs/IEEr0fzDv3f4pJIOc7uxFV8ZlEzMF7QgoM\nZ92hdOzSTdqEPj3nHHXxIhxLN3zGhzUMR5wLjMtZTuSR1ZZS4Aqy5XAO57XV\n8VhL8+k3dh8N2wy2YItFnIoSCPoxmtMewnGe9fFtcREH34c0WZgfJUg9REgz\nDqiO0hnwV5NVE67JAHjrWf0vbc8vDmocfIqa4cdBb2F0V4R+FhBNsucLuSEZ\ncRwfYMiHwAxI7KRBusLHQw6nt6bVfx7LOnphon0qOLyhKtLnVW7gljZsRAeg\nt9iO/V50VdMJtshqVER1tVwCVwxn+SaZnEx4UrRYrTAq31miUjKVki/jD5XI\npJca\r\n=jWv0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"a5ee924e01e4e5c9d0170e2a70f8fc8a5825cfbb","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3 || ^17.0.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3 || ^17.0.0","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.33","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.33","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.33","@storybook/channels":"6.1.0-alpha.33","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-alpha.33","@storybook/components":"6.1.0-alpha.33","@storybook/core-events":"6.1.0-alpha.33","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.33_1604073167209_0.18444255206109816","host":"s3://npm-registry-packages"}},"6.1.0-alpha.34":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.34","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.34","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f18e15c90af93f501cc0fe01f137144bb0b11a84","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.34.tgz","fileCount":93,"integrity":"sha512-CUWg1UeKrPqXXOlKUIjy5rEXserptk2dS81W6cO/trJVOiJ10CqZRjqEGULv78EhctdUJwHXoM1qdLytqRoRIg==","signatures":[{"sig":"MEYCIQDlckpCZ1o9ui9YgmeRfnBmp+f2bwGoK8d6Gs2wURTUFQIhAMo5jRUa3F8rL8/nLGro27IihgmOCG4Jm0y43zRLhKeZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnmCTCRA9TVsSAnZWagAAvfAP/0a15/foN2/YTqSKkoUq\nsZeqZ7OjNC4htKJgrCKSG0quQXdM4bgNciMQvzsWrlitIlrk08bUW/ZHnpFw\nW+olqYWiLjmxGG2EuCeHwjt4GxDoW6GdSz+1q8zKeafTtFcgggMzJEwWEcI7\nAlzzJbgQywklqEERH83MPssUnWmlM6+MFo+9Tn3DLM7rADDD/4y7OayyKCvn\njYyolstw/mMNcEIHaXEb0nLsPjKdIbkToscT0qK2EBK4gdwMfvFl38r4dpDp\nj1uaEMFPcKrFrmDu2jIa188LXI1KB5tjk1yGif0Z+PQm705AXXaeC/lq1/TF\nyswEc2rVOCj9i0p5CvrKIOxCxaTyWR66usFsA62zjnYNRjy/yRNZU16ikSmS\nGCyBGAkkOStSskDDpsXhKI7pCDYGsmt6tbCp24YeQdn8LEVZlZFbQjCunUbP\nJyuVTdxYVEUV/se/tT13vHu53Gx1WooGl3a/22TsQgkfI1DqRD7YeYj8b6BF\n3XxVurTYeRnFy1ydU3NIcSpHh89+CieH5M0GlAGF3+jtKVaUkhDs2U2IueMe\nvH85CI71eG8X865RAUyKb+p2MwiN5UsE4xUEP2rOjwN3sA7kG4ADvjEpnsk1\nepOVGGkT0YtZIOBOKSjjXOzfC97dAeBFIJwQISytboQp9DKw9WY9JmS0YSGf\nWWUG\r\n=0UTR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"4a4c98997fe9b0f791f30fd168d867423ffcf730","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3 || ^17.0.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3 || ^17.0.0","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.34","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.34","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.34","@storybook/channels":"6.1.0-alpha.34","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-alpha.34","@storybook/components":"6.1.0-alpha.34","@storybook/core-events":"6.1.0-alpha.34","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.34_1604214930888_0.9040845834331774","host":"s3://npm-registry-packages"}},"6.1.0-alpha.35":{"name":"@storybook/addon-knobs","version":"6.1.0-alpha.35","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-alpha.35","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f32986deae15cc92351ec1c70a6a8967bbf86f89","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-alpha.35.tgz","fileCount":93,"integrity":"sha512-05a8O0BMcPu4lXCRrWo6eOtQ7AGV5KL33a7QG6SpB1TcGL9J6PMV2CUsiza5jw9dPnRF6P4wZzTe1g09fqLpRQ==","signatures":[{"sig":"MEQCIGhezX27bDb7AUUa5GTMjAZEzdAC6NYPzuPKRWeWWCEyAiBiSeIBVP3pgaNhY0mCdiWnXvIHPvlEhWtKGta4SZOGqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfn6thCRA9TVsSAnZWagAATuAP/3CFbiHAaikCSpUUgABg\n+dMHxvy5o0oc/TORKs0hl6EK+7/zqQzyEq0QSGuWmh8Q/TAOJ5eEhFJOIwoL\niBCA3t4QfL0od3lHB0wRnpE2/mDbn/fC5WkUlVprxenvIG5xfR/oJesHdOO6\neXdVCOMnESALNnZDA9FTLF99naB4DXiVGjDJ1sZZHC5m2k74KT9YP+oEs8vv\nbQxYxEcNc+DRnZ729VZnsDIQqbrG+m8mpRKJUC9DgpbojkhAgMzZPuQ6HbTS\nL4lKRGC9sj65xqKCeV3vfyOfOBCqqVU+9J34SLLPXCdgQ+g3MBJkWpYPjjbr\ngaxio73qEHuxssN7IfoH5s748ZBk5C5l3Q/vt7xQYbyXAfYpgw3zYw0yFfCZ\nafoVA9/9CMpiBeYVe5yEOwh7AZVSSMMnaCgje471meUj4fozlgbOq+b57MP/\nfJ2JF9e9TiUdh5fCDFf9QbCtMv8SghskByI8MrXgZhWrSYzlzxV6UxjIfMTZ\nWCariCVJ9XV11HbsvBrd9l/FqyJEk2TVo5sXWOJYeZBTDYwmWN1E+2xAkkMc\nm0z30gshSpwvixV6J9NHmiPI8kO2YZm4OEi8NmP6oSce55+2WXUIqY4rwG38\nEH9l8zqgJdd6BWKwAbijt9Ut7/IaLGnOINn41BL+P9E4eF7QcY8x5tJuPrSM\nWDxg\r\n=+YWt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"76bb5211363a4259b9962590a3a5e62a00921b91","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3 || ^17.0.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3 || ^17.0.0","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-alpha.35","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-alpha.35","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-alpha.35","@storybook/channels":"6.1.0-alpha.35","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-alpha.35","@storybook/components":"6.1.0-alpha.35","@storybook/core-events":"6.1.0-alpha.35","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-alpha.35_1604299616916_0.19938639363980415","host":"s3://npm-registry-packages"}},"6.1.0-beta.0":{"name":"@storybook/addon-knobs","version":"6.1.0-beta.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-beta.0","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d8c3318d985880b0dc223eb9eec9a716d3e5c3bb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-beta.0.tgz","fileCount":93,"integrity":"sha512-8MMYMpYmXGYb6kxQF3G3VhUWv8lsvm2FWsRiLx2fZS2H3x8cxjxBngNZwPrsT3DWGvriYdFzpkoCLoP+fiuL8w==","signatures":[{"sig":"MEUCIGxim0pElMan0u+6dkR+Ki20wyDmH7FFW2aEACWcA2E3AiEAkmub56RAYUccjBdgvouOAiTawSLtFVFXHgZBrSkWBCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoFClCRA9TVsSAnZWagAAnwcP/1jERgegVfaxz7YqGKSK\nnCvVG063AbItzhs/gBGR8ZIR330gjJF1ekpMQtqogc+5nrlPMz6q1+Ni6g+k\n6z7aqaRVk3jldBaJDCvvuudLdexGXuk8puw0e/BmHeFbrRHldM1y0vXapiMG\nlKPVBZ+GSsqO9CF2vhCriIszmDnXkhxbXwqu3B8FM8FylnLcgkz5p59CXHBj\nOo0NrLrLoqBsXoiFU8cs2zqiGg8Eo8w8nNDChKMMY0tYGHGKSlD6Nl/o8iwG\nfdPl0qLtnGLJKMTFkRHKdmCe/NQwOEdWiwTo2peLJtSusmlGtdpQrSgyEQbj\nFLaNs8zlj54KX2v1AYVC5bM4Q88BN19REQoV5GmeH+ApLLAi6pzMlzVYNqAe\nEAv4mR4NuIzsyWMlquO/me0Uzm1C6k/lPSRKAaB/QcT/QlNQiAWsovtqX1fy\nD8MQGjAgbPb3OLeK1Lee+H9x/R91mocLcmHLVco7c9uDjvJglSorj71LIWCH\nQ+38d8EjGghbItfuXqrK7gvPy4asVWts3JYi160pkaqHXwIPn8ta7FYrr2qN\nUFjJmGSf+CNqX5Cz3Urjv93Bv+bOH5vPRyz6FxYXpKOwnuvOXQX86nwpMALL\n3k4EAXhLJaBv+0cSxuzGxipA0EpudXhsOHYQR8egjVJNZ5sbuBKjk7mi1EhL\nJT2J\r\n=+05/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"807eccd6055990db31a8c80c64e502d4f3990be9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","react":"^16.8.3 || ^17.0.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","react-dom":"^16.8.3 || ^17.0.0","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-beta.0","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-beta.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-beta.0","@storybook/channels":"6.1.0-beta.0","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-beta.0","@storybook/components":"6.1.0-beta.0","@storybook/core-events":"6.1.0-beta.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-beta.0_1604341924779_0.9296795087861989","host":"s3://npm-registry-packages"}},"6.1.0-beta.1":{"name":"@storybook/addon-knobs","version":"6.1.0-beta.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-beta.1","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1e598393a0d166168197c708b1806519a78bcc38","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-beta.1.tgz","fileCount":93,"integrity":"sha512-f7lfawHNTzungePRqjtkR2IbRlYzatxhmXSnbEOA2GHEGo0IwTGCznF9yfP7K1nXdrys3dPR4uBARZWRCqbvxA==","signatures":[{"sig":"MEQCIAdmdNqni5pONs6nTr/0IpQlXfbrfdCB5swwaNkqAqXFAiAG7HKDWdkv8qMPTStOMMGm1iKenT67Cd7wSEia+/LKoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoQcxCRA9TVsSAnZWagAAvEcP/1EIhiqdVJjAEGq5M+3A\nhuXgM9CbLzty2vxlozLtu9mlk0/xCZRZRShJJTil1bgZKETa7p25yh+m25Gi\nTTCLQ33xLENdfc/rGaWiw6X6sG2wV1w8aOFVNaIltLIQwm+4EpXKvZ04xwrA\nf2rJayjY1zK92De3nBzOgrBQwZXL5hRWKt/IH/j0+mYd9YbSa/90mmPubSot\nUtG0mmlIyTOKGYIDjO9mpI2BTlP6utfaI/b0Ut70Fp3wna9h1bjWshQk9fNk\nQZfc5KgCnRCnfOJ6axphoWSdNnAdd2uHaeKfd9A+7KWwqHajWmuZfMNZYBiX\nXLL8tXkXaMMGt4It0IJJ7JeRuEzSPtQm/nQSCoMlQm1Eot+Y000+9wEMEqjl\nvzvR362sQdSyivfnYFHCO7AgqZcypb+4Lvqar4rFhgsnmMtCuDXZS24RmXl9\nKnQKhmS3k2mHxWefNBawDivfrK2qxYBdrOZDiAl449aZ1w86L7u+KYLcFsg1\n8VNMmCwMHgs/pF8c/V/vsMiRcpA3R5q5ttSsSe0O6c62+GpPHCIa1XA2iGGP\nnzMN7o0fjBFWvmeqFrHQ3u9ih+Uq9gZBus96mnH9vpw6Gf2ArrtKDWbrKbRI\nBMbATYWZM9hZoqZBXLYL4NWiEAFlwKsLw4wGP6pfmtNqiWMi/4dbwL4jJ0qu\n0zwQ\r\n=ET6q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"763c233efc86849979db1c4c795035bd58f1ced9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-beta.1","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-beta.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-beta.1","@storybook/channels":"6.1.0-beta.1","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-beta.1","@storybook/components":"6.1.0-beta.1","@storybook/core-events":"6.1.0-beta.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-beta.1_1604388656765_0.6277510059548101","host":"s3://npm-registry-packages"}},"6.1.0-beta.2":{"name":"@storybook/addon-knobs","version":"6.1.0-beta.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-beta.2","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d21cda101dc4d98bcb31acc590283da20fb31e04","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-beta.2.tgz","fileCount":93,"integrity":"sha512-k7jH3QPW6LSOJwZQtTgdRaW+mbc6GYDOH+4oKrZ0GkeI4uTL5kXSYH0Kt9LYSypK8uoFeU5rq1KSLTcj0mpWog==","signatures":[{"sig":"MEYCIQCI7m0d8nr1rDK6tNQhPWeeEvfqERUars2fr0cbLWBM+gIhAJQVaPu9vEm4Uv47DuyshxAQ9ZnZXqspJHUu4VheLh9b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfom95CRA9TVsSAnZWagAAacYP/3Eu5Bbl2aUdiP5vrCJQ\nY83lyNQEE0ycwM3qhFx8s42fy8VIbfLioCDzWfpNVf2k/V38uoi1bq0FK6wE\ntnq+T5ECmA4hspNs5kE+lJVYTuAEs8XN7WqaEwDddSfSxD/ORlCrNBiCApue\nflqBdglxDVKQz6yfsZMTL4M2dejoUzCE+cPIJsL7Bhdwrxk/2cnHlpxYKGdR\nfsZ7CmgftIQZbRbtqadb5Rd4Wa0Ka8sT8/IGPbEBjsaIFfpl6UPGvjp4bzRf\njs5GCwHdtd+TkYp2HMWNB0xDm3el3vfDFk9AGKYBiKFFZbmjko734485F60Z\nZFmKLiDcoW9BV91mpNc+WoDB0L2YjTAY2m8IIN/Ip+pAMaJbfN1dsAUvfI6i\n4h1QKnmAOvq4HJhaUuKa9HaqpPmlRhgXypNoRZdNv74bjsyWWVuAeuD0lHd+\n8LG2wOZJ5LwulizTxxcq+UFIB1/5w7nz7KI37+wpgO6tnZOxA73effmP9QTa\nzkgC+I1v1oSITyAu3Vkh4c+ZGS9FKxVVUOTbb4UU4M85eR68TlIMaFee34+G\n1BeU6hGOnGgiVIqOG/Utba3L31nbOZwEqecs1mqiHJHzMCtUvdqbUjuGHabN\nkk0gviiN2TKZSVwaSKAsYpkB66QiM7/wHZfsCKyD/XufD6Vvm+88nwZfiKZv\ndqOP\r\n=jGPm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"c67dac2e088847d96e3cfa427432a1b04d4c4389","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-beta.2","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-beta.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-beta.2","@storybook/channels":"6.1.0-beta.2","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-beta.2","@storybook/components":"6.1.0-beta.2","@storybook/core-events":"6.1.0-beta.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.2","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-beta.2_1604480888632_0.243275203364532","host":"s3://npm-registry-packages"}},"6.1.0-beta.3":{"name":"@storybook/addon-knobs","version":"6.1.0-beta.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-beta.3","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"54b96c15e4af13df3cd128333d28b0740ec52f20","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-beta.3.tgz","fileCount":95,"integrity":"sha512-A40E/+FpIlI0CD3pqYny7IfWs/z43pcD0Pxu0ao9hVJsc3DKsoKEzHtnGAOYSaWak+94fzrKGwwXHpHAoad9XA==","signatures":[{"sig":"MEUCIAZMaTz1ly8mvkIGOKjl+40rpMFu8djpKB1jYfiiHZKDAiEA0rrS2J+0NfmQ0FTKq23wh9v2/m19tgVJCq7RV2tOyVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKIRCRA9TVsSAnZWagAAdScP/3jKQVeF0DF02mMP1E3r\nhs9RPQcnhtXSIXHpdTVgsuhO9PI3jXTO0kTHbILqI5BPRLBDTqLfWG579UvT\nOIUv+qdGBeX5ezRVTfI/xjdt9nXsVkNVEnP0P6D8ykNawYWGtxA5Tag1U93X\n79oraDTtF3U6IUYSWxwiV0cyAubtjkg7Z/SogCQjzHrFPspUGGl5LXxV7xxQ\nSrUeVxh/T9RTEOwNSDfL4eLIqrIc4/5wrNUWqSPeEuLEOSMPK0t7GJHbjVhb\njysw/JvwZ4LwQLbDaCH3TFPxkRZqn95BYW7t9NHhUrmxPcRkNhIHDTGPDVfo\ntTPL0Y60ie/E5Itwga2ccDztI7HmPB8CNSLeEHa2ovgqscL+PSg7cGVnr2Kk\n2Aa63OuiAnHJ3lwGm+LraT7qHaLMkGYCDT7ZEJ2GfBXw0TNO9YqEdiOYjshm\nDSICAY8nmpf5Em7NxOL95n6ZHv7etSXlmeSSj4iN8L8rCK7QgQs5xUj6HDTG\ntyT0f5dpPBHnyeGgEokoaj/LY+UoymRTW1XAF3/IXbkUSOGW26QoIoJuLpeT\nckOjQzrYtsJR3BfSZbvJfBOjjVe2hUM9uZwedY8jQev37Z4DEA2OQBf5UKZQ\nZhs6xIz4/xLd01HiGI0bm0+lZHLm/WlRMWMS9p/eHKZI1sI/RjkaxtYMr7pf\npWH7\r\n=ie5v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"2e11de30450cb6443661568bec770f36b20c42d2","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-beta.3","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-beta.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-beta.3","@storybook/channels":"6.1.0-beta.3","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-beta.3","@storybook/components":"6.1.0-beta.3","@storybook/core-events":"6.1.0-beta.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-beta.3_1604624912889_0.29633017813655593","host":"s3://npm-registry-packages"}},"6.1.0-beta.4":{"name":"@storybook/addon-knobs","version":"6.1.0-beta.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-beta.4","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"54d87ae8608ba1e91dcf46c5347e7c575f4b2204","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-beta.4.tgz","fileCount":95,"integrity":"sha512-aydTbj+ORgCHmcKO4pU+w5lU4JOOnA9yenRFn5t09UXl7ZSo9mGLS3BYBE4DJeEkDcJD7bg99efbRkG6/hw0mA==","signatures":[{"sig":"MEUCIQDVSSc/9xLXnnvsh+3vGr7gWEI4V53SkaGwcW21uaqKGwIgT5BhAauawspkQ1cS/Ftl2hNX6EvJeXh9BonkT4Rm2Tg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpVI5CRA9TVsSAnZWagAAmHUP/1mJFkSTvnIKTW2vS127\n9LtWBHBJPPXs+2qfHpOPaYQTTnBc6bBcgtsw0t2dYE4jjlmQbHRyZiivOxEl\nYc8XlRth/p/tuBD9Q2iDn9HOurASYWU/Q4GaoTjXboU2YdSnwxkthcm0wa+O\ndQZO9on384hZxBneFbHvTC1b21BHXnkqzQO7HViBO4XMUyepjC17kH0dOM0B\nXRpMvbS06Arol02pdlJ3ec2U0n+FhEpE1aylNab8adFkz4KHBguqdNRq4dJf\nrE0V8LoQLhD7A1dO+zvXCxGCdnUZbJWfRiifYt34NTXL/4gMlLEwlflhArmv\nPgipPYMip7xMM7u3uX3pJvqlEew96Ogkir+ec+ewlG1830Kwrcql7qQ2SCAn\n4jdly5SNYzgenahggNLi2TdSsp43awS+zVz84QP/JbOZwFJvc6NKdXKKJaDx\nEa2zz4ALjpuXyV3SLtTcWKPOKB7wY/lK1EShexUvyqhCNoaxy+kKCmzF3oIY\nUZe5uGQrjaRQBUaVCN8aJswUkM8N7dMq0gKg/QUI9jp14jwiXGwnFeSj90KO\n9Qa7TEESovHkwZExd0gR3CwKf9R4IX8lUM0uYBtDa22SRZdXSp3G+2pa8NqJ\nKjEA/caPZ9eafdmzh27x5tHtZ1MtFFiisZ7IgDVniekowqF60Ki2ERm8+bth\nykuN\r\n=IAOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"7caa9a57243c1377d8275682f2f9591df4811b8d","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-beta.4","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-beta.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-beta.4","@storybook/channels":"6.1.0-beta.4","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-beta.4","@storybook/components":"6.1.0-beta.4","@storybook/core-events":"6.1.0-beta.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-beta.4_1604670009404_0.5202393536326226","host":"s3://npm-registry-packages"}},"6.1.0-beta.5":{"name":"@storybook/addon-knobs","version":"6.1.0-beta.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-beta.5","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"49dd4ba883d49c7da4a14ce2bbf0d7941147d398","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-beta.5.tgz","fileCount":95,"integrity":"sha512-wT+h9m/f75YwblkfF+0BeTSFsEYzpIysKfualFdAU64hgo34CDkzttFqONgP6HJpvcJgX1RaS4/HxM0ma/dhiQ==","signatures":[{"sig":"MEYCIQDo0TsD7YDAoyt4L2Kp4ttLymH1xys1uGm17lg3wqsXMAIhALdAiWARSZzqezEmYFcJG3XoBuydxq1S59dFpEMyuann","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpswICRA9TVsSAnZWagAAsG0P/1ggLwjuX6lWo+zvB4fU\nEtk5I5kgoigpAcVthw2IQHQwayyHrnINc6f7veh2VBUmLf52e4Ehor5t6seG\nNo0E1tnwqV8FCm75IoAVsFIqVPG+11tMM4obyJNcK6lP5YjZlIRoZjxxhLHl\n60mEul5PpUN8t3l0Jz4TpAcdtFmIDF5nogQW4ej+RvsRer6o5Ulhw/PCfTHA\nO8difPiSjZzNlba7Cf2wO8wM6OUEkaVPli6gFtcOlqU4JM0jxcRZyg62ETl1\n/jYXnAl1LYYgo2YduRmW9TPbf6xVHnSDyOMWjg0eyGfWzsdC14RD9ImfQ4wx\nddevfhgsw29udp+JKqoiDm6m4VglTO+Lo4mUKUS0Ddp1n1TbfKnNZE9Uc4ra\nUl9soODuBrPF8xRgfgPd2eFEwkAM/M5xiRdGBjVYY0GYWJW02NR+bs+4XmcE\n9LCAHRVYJSeiEfoYVy5LCgstjj/M6KlrSaB3RfIXtBakjpKBrFGQmedNJaEX\nXdzBZu3QSLVigzXT0S7nEJuDsEPLJnBBAlp95e3E7LE7fZ5ndSEFPkdpaIWi\nN6dj5YQXsQ0OZMqDEvOyh4Qf1XoEIyXvpAj8CVeswPXqT3s0Smx9Y286ZEwI\nkQDcRfTbMeEksYK2MmGxKGXpxZUYmao3Ni0Nki+TWSUYAyU5HX2/0pyP4p0f\ntC/n\r\n=ZGmb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"7bd2ae048222c2cc249775a3271b5b7dbe638038","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-beta.5","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-beta.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-beta.5","@storybook/channels":"6.1.0-beta.5","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-beta.5","@storybook/components":"6.1.0-beta.5","@storybook/core-events":"6.1.0-beta.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-beta.5_1604766728131_0.6562602268291677","host":"s3://npm-registry-packages"}},"6.1.0-beta.6":{"name":"@storybook/addon-knobs","version":"6.1.0-beta.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-beta.6","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"01cd762af24d1235013e9b9b23f56d1f768b65e7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-beta.6.tgz","fileCount":95,"integrity":"sha512-mGmYyXmeI0PyV4YNbrAfll/G7N1rmi3bTv47aqy5GriLbtZX/NZ3Rat3ATlprSx8pQB0di1ezDu/pbcI/ZO7Ow==","signatures":[{"sig":"MEUCIQD02Gn0eZZNxivtwXGJ1XVftE4BILYSElIMtzGQrVdWqwIgA4GkmwxFb9Mf2ASDc4fZaGDZD1ZJ0ZP+Jnj/6w3WrJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqVu5CRA9TVsSAnZWagAAPYgP/0DrefQIev+WLCHtEI9C\naeUdDn/aMpMHGCjS8bgy6mp9bMGFTCnDLFSn6VY+Hw2qwDOIvfcTrSDKJum/\nShJA+n2jtFHTIriw/VtKfeYClpNhGoL3ihr/IHGHudOUBHCdFM5VSr2EijDv\nMBpB0idINyFeLbqeGHaoziwHrnV1JaQ2MV/96Gw4N+6dR0PkO28QhwLKkzYa\nYaR6gJzmfyz6WRz7QoaWV6v1UQxtFH3dFjILUkpSa+NDoKf+8TQdl32dajR7\nMf8diq42jk5+snTzr3kkO/lOXv4n3LIJWBNasKEF94iouTISwPacrzoH0vxP\nEdNIbu5o/1KyWZE42fAbJAhyCVTcIJyKpyourJetea0lmQx5PmScUiv5AwjW\nPqC7PqeaQEEuM2vMcOZ88AZKXN+ZhNxR6WUXEa2lgaxKGMV9VTy4p+961/bn\nMj9rL91+Vi5VkyPoPYo1+MWdKH1i5a0YUta8xnbUucmdhFTDTpB4PhZe0zCN\nS+tPtPqHUh0QspONtp4M/SNxWZXOBXtpAX0swX+C/k3i/izzIub5uw3l6GeP\nyGfZHT6N1VMs3Aac6qiOWPqlUqRYb+21LbwoHahTP6j5/S3wiL7mb3MDJAIp\nlIm57meKO4wQk+gr7MK2Rkb1eTMKHoDgv/qLVcRCKWZcNGUxv4Jx2HIUktxW\nQ7Fg\r\n=RaQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"08dbe0ffd978f79e72824b04c1c037efecc3d779","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-beta.6","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-beta.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-beta.6","@storybook/channels":"6.1.0-beta.6","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-beta.6","@storybook/components":"6.1.0-beta.6","@storybook/core-events":"6.1.0-beta.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-beta.6_1604934584853_0.5426882163170059","host":"s3://npm-registry-packages"}},"6.1.0-beta.7":{"name":"@storybook/addon-knobs","version":"6.1.0-beta.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-beta.7","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"aa576a371e6cffa9fac40aa4f499945a5847c84a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-beta.7.tgz","fileCount":95,"integrity":"sha512-epx2Vu3taAh8d/jFxvozcf52/0NXni141zk//r9BDtlF492qj/NWpunpL5/5bvRZzSZDd9/gfLYFCB35WOBZZg==","signatures":[{"sig":"MEQCIHmKZFz4Ig/KJhejDnDkVmxWxJ/SNPLyjj8+SO4m4EA4AiAa+NHR40ftB4Sbzc90MNVyv9p8BvrTZYkdTdH5LPsLsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqyW0CRA9TVsSAnZWagAAz1MP/16Y599roFwSl7URydX+\nJhkaFyTVfkpZGvaabio7N6ShnGDznrv1tYiKA8Zr47QOfrL7YCQmBPasp+M1\nkh3Mxa+hY0k3gCnJF9FEc5o6EMqyOszbofcWFG26X+rSE3/kh3NmBO5C4JLZ\nGbctqSNgB3nKU1KimSNGl9DoFxptaCXvPjmWnDJEThPZslymbxK8l9tB5elQ\nTRvwuhd2vFom4wQp8iuR+0/UfBMbZSiNaKezDp9idE0r3iZiLM1r0eioaT46\n4weOmjUtiNSF0hGXe7o45p52dn3XVWC8+3fzmzZBFgH6VOOPanZ7z3nV8A0M\ngJUKtOvBGRDmPxo39uY7n0lTQHLJNjrjT50kRtP/4IbKUaIRBwhMVAwi7taJ\nO2zXCE4dA+z99heZs6uwdlKjMZ05HYxgoRbt/OpxkmLaVUxnHi2l4E3bGOe3\nyMz9cSlweTANV7DpSGV8FqZFIdvt2CLf+4oFlrNT179CfguRX4M6DFKED6BY\nCOfdrz4v8VJSlE6hfpGZD00GOoJYfzHhVLKpVTfZicfMyfDgi1UtwH1enUuk\n8mMLM/wc3qfOHXXLg/CMpWzl2w2xxPQcbw3QZu/iev23PA7voYS0ckK3uAut\ny0+RHBgCi0NpffQROrL9RDzBRmCHz3EmUDhpMOnmgNXCvrMlnehb+6A6EOck\nhPcE\r\n=aUR4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"640fdeed830ccf70b8f68597e7bdd43e991d9969","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-beta.7","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-beta.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-beta.7","@storybook/channels":"6.1.0-beta.7","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-beta.7","@storybook/components":"6.1.0-beta.7","@storybook/core-events":"6.1.0-beta.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-beta.7_1605051827896_0.8773397958411917","host":"s3://npm-registry-packages"}},"6.1.0-rc.0":{"name":"@storybook/addon-knobs","version":"6.1.0-rc.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-rc.0","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"de07c36c91ab03234bbe9b01268484cd3baf0ee7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-rc.0.tgz","fileCount":95,"integrity":"sha512-tHPZzYLF5/G9kFOCpMIIVBCKAtqjYuj0YQgFEYaGVhS7l9THITsskvjAZAf5qouGqsm4ed8OCiRevoYiacnaVg==","signatures":[{"sig":"MEUCIQCGJ2GC9zyblexlpChd/Ezkx5RzOvyOrrdeUZiWdH7begIgeHGfgWupPN2gZSzG+PzFZS/nG08NABbd49nY9Fg+eeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrQ4NCRA9TVsSAnZWagAAQL4P/22Wv9hUtY8dvpezfEMN\nEGYMiElECELwBbS15qdZq+JAy9BdZYH6ZkB05a1EbHYbvcjA4HMWmOl/Ppzc\nWfZ0jpHgEPp4LT1AnSdWe4B1/XWLx0URUdTRbZjrSmMfGbou7862RLORe5jT\nKp2haBMpx0n3aHnkB9QWucdvngGrC8tAzseUmbk74Afa7IN5mOJbmbf2qZZx\n9wEkug6MhaS9jJU2WSapQWVByiEzebkIxxck2xiODrYJD1sb45waJIv9Rkqd\nUKXCqfC5xasHGdJIH1S1dnML2Zbfopq0gwk03XlfNdKJWhHs5gFwr68g7PE3\ndansmzfA7+Y15iboP2xCNdyey3BtKlzcIql9eJMrOObcRaOCW7jNBTJzKg6C\nHy8qzwKqcFfO29Dzbu0vYf3RDysK75Gpjsko3jvRDoXQZ5keilxrtu7yXKF6\ny0Dx69FWdSI2o4/PBKLVz7o0e277Cxn6DZEyBQOWl5fPamcLhnK+IqhOB49O\nF8Y4JBT4IEdNSEoU0rDoi4zvkgScg8Oj5OPuOLXTASh/+LgSZtEw4rFl1R2V\nQChdwYqFfCL91wOcDh1LNubhjQgtucuVzgLhjClfVDynLwWeogJkCPJQ/r2m\ngwnugHyAIpz63Z8TEIpvZWGlINQQ47Em8hiqQ+g9GHqepPuNDtBuEwVA8UzA\nhKei\r\n=lZ44\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"90977d37f4f988766fb5dcbaa309e3d9298c9fd4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-rc.0","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-rc.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-rc.0","@storybook/channels":"6.1.0-rc.0","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-rc.0","@storybook/components":"6.1.0-rc.0","@storybook/core-events":"6.1.0-rc.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-rc.0_1605176845076_0.8351608306825551","host":"s3://npm-registry-packages"}},"6.1.0-rc.1":{"name":"@storybook/addon-knobs","version":"6.1.0-rc.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-rc.1","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0dcaa1d4d8607204451fa904b625b5b5252946dd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-rc.1.tgz","fileCount":95,"integrity":"sha512-YkhXO6bV08lKVEkMl47O/z/pbe2WxRsmilEFFiWLRVSPbksDpuPnmm0RFaUda95sfgFoPUOV9CT5zcdy0p6ncg==","signatures":[{"sig":"MEQCIHuZgPieK23ZUvHSacnwL2E6I6f7BHrSms+AEraO5Yn+AiAD/IdL7BnS13mAjOvy8Z4YiOMK7aY1XDGcyqdHOK7ZMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrdT7CRA9TVsSAnZWagAAbGAP/0L5AVN3EJOa+krLU6bW\nvSKq12fi6/tTUiGV2R7JEiYUHEPp6I+VnBfr8SSqOC2yVI78eMI2QchMAESk\nOwvNoDqG3rzU5pUWgVPuI/sMwzZ3neBbiLd9SWcROartyyXEFfhnrgsXxDq5\nNWUGUDkmuAraRX9egkJxF/ZmFD0QKsvsbkNkDAVHe/w5De8VWwEh7U7Vq6TV\nfXLGxgSL+LvwVQe29aSqTZbNMjJlCpmERg2NUJQAq0a/YuDEN/UPhcOo7ZzW\nXNGaAnqZ8VTbJDP3Qn7LTn9g5wMy1tCoElSs19JewcGoq7Eh5S0ywe3Pr3G0\nh19Zz9nIM08zw08aNwEX7ei2ickIl+OYTguDA0ralF1V94WXCywwbruuu7vV\nAYAWDgVMDqCjEBp1+TosgrdjcBZvJaMfIWnIaUiMNFlWk9PifX4O8Js4a+CM\ngJpHAocHwAyVm3CYLn0zlmTE4zvwqWAEXn+m45eUL+5FDW7AJWro6HqvfzcZ\n+j16pw6vNeu2GxTCe21T7aoOAqortugAcJgoDjEFqVFJmvmdwvcQg7smpNLl\nUz8R4ny4U5I5gtnWioh103IQwGXkMxFoSIgCzaj8DkZWIE/CD+x12bmcscij\nn2pmPHoEfHMoWeXt9vBBGzDS1CFe+wwuTJM1DuHRUffQLG8VYWhj6mxt7M8C\nnJiK\r\n=WcNU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"c717124a7c86f6302a3f8b33d3e391c0f33d71ca","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-rc.1","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-rc.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-rc.1","@storybook/channels":"6.1.0-rc.1","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-rc.1","@storybook/components":"6.1.0-rc.1","@storybook/core-events":"6.1.0-rc.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-rc.1_1605227770655_0.7837249023365491","host":"s3://npm-registry-packages"}},"6.1.0-rc.2":{"name":"@storybook/addon-knobs","version":"6.1.0-rc.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-rc.2","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8e704cf5887c698f7547d8ce204f91254a18c58c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-rc.2.tgz","fileCount":95,"integrity":"sha512-pd0bH0B+UPM5EAab0eG5gkP2YoqO99vUdOTuBc1ukL14AhJvcbXXfpAVss2ufawFm5xpOS/RHeOzW03/Ll8qIQ==","signatures":[{"sig":"MEYCIQCmNrZMlknS5idjvRRxvlAcp/5WCneXWhgSTGjnFfD5fwIhAKjbIKDI9shOApnT4cPZNz20OubsS6SJqAMELapR/txu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrkd0CRA9TVsSAnZWagAAkBIP/R9smyiIBFSu+vs5R6I2\nSr2ZmSnGTgPm+omdlbNfWZatkOz5jersAnwdW0gwiIae6WrUgEquZwkQFN+A\nvxvDUtBoZZzhiSMp5+toFqIh9yo8c/bIb24POZHZIThy6M/TC7+R3ICkVeB9\niU7+YtD5kenyO2ag/JARhIj0czwtKzKVihLrGzSUvNgP80aLBHe+FbgUf5BM\nHrOmdp425o8+NeRR/975LIkaZr1QvANrXonTFFI63sWaTBRYVY1FMnF8u9fZ\nJxXnrCz60VsWwH4LMNv+VkCp93/0w9jMDPgmfTUYdmgdxrXinQ9sdiVrQoRu\nApTprUJMUOEvlTFMmStWjOn6ddKeGxam/v7r9oRDByovzVPo1HD7rKoHEZgV\nWiRgxydyloGxMXRDvbVnvmJ3fpqq/Ol+Tip7ObJjElOP0cpPleQvLyaZpzYX\nUrv4L6uahx9j6gyO1Xcc2XZbbH8+JmwTJAyK8DmkpwcJGC4deN30x2LSO7/X\nER4UejcauF1tiJBHM4BLwWy4JOb6ZXl4rM4Fuvsd4jn7rgKiwIRLmedpixq+\nzcBnBF1tL+8yq6vNVw1rCAYJF08Y5Jpt6sX4HfTVrNON/B1DpvHbEQ+maBJV\n6KeXs1Nj75vWqTpy99YJwNPL/JdldT/hb2YRLvJ3aMlZ6uhE8bxCyuXcRPU1\nTMs2\r\n=XBsx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"38bb07161a72720766a1e9b2c9a1661bd3d819b0","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-rc.2","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-rc.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-rc.2","@storybook/channels":"6.1.0-rc.2","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-rc.2","@storybook/components":"6.1.0-rc.2","@storybook/core-events":"6.1.0-rc.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-rc.2_1605257076499_0.26776699241223256","host":"s3://npm-registry-packages"}},"6.1.0-rc.3":{"name":"@storybook/addon-knobs","version":"6.1.0-rc.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-rc.3","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c0364357f4a9464570479bad1d06d6dc0b7d98c4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-rc.3.tgz","fileCount":95,"integrity":"sha512-7JjyfYuFSb8P82rOmn0tLjBhP+KYGKJxwqCPHQikHj8dPAVqh1WA86KNl2+O3y/L7F6zVu+j1H7xX5VJ6fvT4Q==","signatures":[{"sig":"MEQCIHisvW/twXV19rDYUTIakmILv12oTs3xNodkmC+gOKIlAiAh9y8Am/c8OInbfCNF1cIiNiPdF19SwhEZ/tk11hgY1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfskLcCRA9TVsSAnZWagAA8gAP/2gFyAoRIa2u7EPHrZkI\nMiv+8tpwzIbA1rLEL+x8f/y+6ZQVbkHprMnYO5TIlBYisV+xmnMscOyLuOQI\n2QbtsJKrVkQNeYJVyPJzfqGTRkX/29uMwiTe3e7Cyfc2C9OT/ycWQX3tqK8b\n9tyMJ6KkvSyu/4527JYudlhXKWuwoHrAxU0pttNGr6Fcc6bEUJV8OcCOujNj\nQvOkOdm0h1fjKFzgNV8aq4df6GO/EkRekAphUU1WVh4/HJcJ/gDtHhoHiGZ5\nWV5E1AGHnlGw0ji5X+YAiQP/nzj9ylVNvRYexqr7YeqzWcaghrULGvEPaVDL\nIawv4U+eSGpAkshNeYJNHZsVvllHiwVTaKCaHdg9vhKpUD4lPfRf8qD6gR36\neHrdxpWRMplU8leT3hmy0oYB0yz8sD8SoX3VFrsWaliWcggybNrgvl/vMWlm\n2Jx9TmBURYDiA9qa1Nax9I35VNJ2McGUhbaAO8NkBZI0Inwp4O1xxQMtnXzh\nrxlLoRNHjqn0BYfHPBl7IDjA4Dmn4J0nrdP758O5fFLxYXm2vaGGlGeNoFJh\nOzHpvJcqpEGHE2VULBDdlwfDj76WZAgG+qlMe+yBpwtVvBXOy0b0TtElIs7O\nSlVhrLLpmNsehwtZb3PSsMWB3m3VOhWfQDHDUcZflFg+okWcCcQLlRlnrimr\nNYFU\r\n=nupR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"c8cd3cc9e6b21ca651e4e3d8f39123f38a28be5c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-rc.3","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-rc.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-rc.3","@storybook/channels":"6.1.0-rc.3","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-rc.3","@storybook/components":"6.1.0-rc.3","@storybook/core-events":"6.1.0-rc.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-rc.3_1605518043899_0.6766852913537744","host":"s3://npm-registry-packages"}},"6.1.0-rc.4":{"name":"@storybook/addon-knobs","version":"6.1.0-rc.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-rc.4","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c59e0a347884f4d23c3f791f85627a070acab907","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-rc.4.tgz","fileCount":95,"integrity":"sha512-Ml5gg24b6istCjL9ANdj2rAXZxn3KuEbc16kMgfm510FHEGOR17172ls32hno6hga0jgnQ08b0kabASJs8hVpg==","signatures":[{"sig":"MEUCICdnPOtpjIMPbVc1zxRqVq6ibh3FJBj1kIAOBhwyxZslAiEA1e7DmA5YYaFGF+VnBhCLBOJECY8A9FkzzUNotDIXU88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfswazCRA9TVsSAnZWagAA3F4P/3e7fQ6w14/8wecS+a8n\nG2XArY720Fp0a5s437W2NnnVc+xjfKC+89NbkZ48yx8wYzD6KWf0fauBeyq1\nts9Dgoy07phoRHaAGKWcBrN/Hu1CeujLuRZeG46CkIRYomGiJrPMiM/Yl/k0\npPZYEjVrY6Xgfh6+djiKyJQ0cyeDY1+VY0+Vpcj+g1ZzSZSGqc55QT8tvWxL\njfceSb+L0Gc4K8vGbfziD603kDdHriGDwdTO+MMtqzEiZZ9ZYeBsD8ijrpuc\njPYfavOMbxW9CkPJHgaIhaM2ErVfsr8y4IwbW/W0uctQHb+82hnEx4/yFHFR\nCFJ0d74JBcWa/VklZg6bbY9Gyg3jJVOfnEsEJep2wvATOkPLhy0vlSQbXDm8\nYKNDSHCqyRSBNa7ZOEgnOq2vreXK/LUCQduaOGkOy5g1Iy1qvJFX0LfEXYJa\nVX1cnXa6YWaTv5ayYpOXE/6uDf3eIh05sc2sTJjntRK8xIEcA+EUzzFtXRN2\nZNKtPX6ah/QdvNsuIMrLNQ0Yq7bASPsBdMv0QHajpya5h0ZgxfyEmR512IYJ\nN+xAxGC1DpPaPse9vntKH7Yr8yH7fTgoOzGJHAHNgQ8A6fomOXfqy6ZofslA\nwZLxCUoKCQO067AmjXHpsEplrZ0uTo9exLKsFcV6h6kyDtSyC8+mn1LhKXT2\ns/ih\r\n=FMwH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"c174d7429c2593e051cc2dd1361bb28bff71f75b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-rc.4","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-rc.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-rc.4","@storybook/channels":"6.1.0-rc.4","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-rc.4","@storybook/components":"6.1.0-rc.4","@storybook/core-events":"6.1.0-rc.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-rc.4_1605568178870_0.5231035828435462","host":"s3://npm-registry-packages"}},"6.1.0-rc.5":{"name":"@storybook/addon-knobs","version":"6.1.0-rc.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-rc.5","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6bbeec3e382bfefac137e2ba80e3ce6eb08d071a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-rc.5.tgz","fileCount":95,"integrity":"sha512-wqwfpaTPw/4wvwE04U7wrwlUZrwEqWOP9HZLxLZ86bDG3RQNZUYvoTuDW1glQ+jwFnHCNeP06Kdjw0MDCax90w==","signatures":[{"sig":"MEQCIGddKQfzIN6qPQQcDvBmnHRXVDQPBw4qIVzdrJg64+kTAiBNI+L5YwanH045pPsPUNu9iNAoOtWj7J7YQ9+96L4i8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftXO2CRA9TVsSAnZWagAAKA8QAJ8kgZVMuQhkJckDfqT1\nZEzdMTtDlTxt1K/luMJvpaNRFdOSaGQTdMPp/R2AE0RzHOnoMt5wvaxPfAhx\nMHpANoPH2JgXih/X1BUrz9JbXt75bP3HXq+itfGgJm3zxEnwdq38sK86rD1s\nDJVsGyyATulpASbfhl8I8gg+f5Civ1pHI0ootVzWbnQ61x0UtEDGE0w5Uko6\nsQXnc4PrGF98bRO+DCM9mVWMQPssEEm1aJtwU35b/7WfEyl8kH6D7kat+Nko\nHP1D1NngMc1bzhO+AE0uuhcnPESZ2JPEEQxE7JwyluKAbcvHnt6OW9pVi4w7\nW8ctX+MwAFzaXykRo8aVXRKA5mu/YVNhfRZthfq64TAFtx+hsW5XYO/waqQV\n340MiqGPT57oN0nxnJXG0c4pR0RR937oLFFmjH9KYH2v5kgXzmaNlsSPmpSS\ndqUtCNisQHGvijyG6yoVw0HlWoNMRRaXFv1z8boDPiwuWGXxeJEJ9f2XHlfF\n7sAyLy+kKtd/B7W1vzA+rS0gAPRUyjN2Iwqblv/NEVbFmUlSwQx6g9RYzBwc\n1QRkGTkAKygsImEcaYh6/O/+SnX/N6/x4Df36A3vxEYt+GCzuo2UwJckUbdl\nr1X7MQqVFuA5N9tdh0ZKpxsLKDP6/eJLlAEgQnghb7ausbWkxMycq2VwaNUI\nYQ7t\r\n=SjrU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"a8822ed2a1f513f71bf8efeb9e2874d9f16e5343","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-rc.5","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-rc.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-rc.5","@storybook/channels":"6.1.0-rc.5","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-rc.5","@storybook/components":"6.1.0-rc.5","@storybook/core-events":"6.1.0-rc.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-rc.5_1605727157417_0.20599593063084276","host":"s3://npm-registry-packages"}},"6.1.0-rc.6":{"name":"@storybook/addon-knobs","version":"6.1.0-rc.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0-rc.6","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"30f9fc0dedb929f0e73c80132a441e716403275d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0-rc.6.tgz","fileCount":95,"integrity":"sha512-obct4DOXWgsP2qVcIyJ+HRHW8Q+Pfcum1Pdp/bQUBdqit6IdbDQh6lv2AkuUPTxhnY7DkIssdnWHAooEEFx+cA==","signatures":[{"sig":"MEYCIQCxSDvpWyK+r95iwvh7oGifhvV+2bnDXjPDqhVSsgDKpwIhANbM4HGfehFJyWHlWKyQobHv9R6dU9cNgxIqtzFlmFCP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftdCuCRA9TVsSAnZWagAAJ+oP/3X1LzYe4IzOnrt1HjZL\nQGo5WNdkvrovIvmEttUg+jpQKgqJvGohfnGbsCjKbFKOET6xDPMXa5ZJpANJ\nXQtWjsWrKS4vMSWQFDDCY4LTZ5YQE3CsRYow7ZSXvFl8TwuRot2GogvY/NOF\nnZxDmh0aBefxp7NtXIZJ4Ll2t4XnwUfRBpZVT1hnEZlF2rPTwTNDQSgNbBRy\nMxjPw9XeGTvn8vfHADlwaMXGT1G7HkMn9QXZzJiYrVYIvkZV8kWmZiaNfIjg\n0aUyp8CvwR3jwz5FelXZdcFrcnCrTrVGVUIfxP7m/yrF4PsHcfkK58hPTvEE\nLD7cSJXtYPy0l1POuLdH4JYOp8q3Ebn2eZhWE4UmWigzXWKmJP4RG0/mo2nm\n9I7sROhcmrFt7GCn5AjF/AHK7I+DFUG2Ww9uIE/2qz9Bo4fDm80kpGrQlmZQ\ntmn22O12D1nuyfANW/176XANfefieRdP3KHHmIy4xAFpF7mxQ7a2QXCZcP44\nb2X3EyY8o+JWC7nNEWHPw00P9KcfhQZ4v0xfqRU0xt4TLZ8sLA1MlqeyOzX+\nRpYZOMxm3h5TyXgrpzQ3Txbq+RYfnI9BshLTJUxD0n1ZuPpuuegnqqgxOHix\nyrjULNgBCKcwN7miRkbQQ9eo/NAdcDtm7EHROkpt+Fsshsfgxo8TS+a2452r\ndVlP\r\n=VNl1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"9009e5399d5fa470689e5f2457ea9132ec1c1b34","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0-rc.6","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0-rc.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0-rc.6","@storybook/channels":"6.1.0-rc.6","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0-rc.6","@storybook/components":"6.1.0-rc.6","@storybook/core-events":"6.1.0-rc.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0-rc.6_1605750957881_0.6003195117500035","host":"s3://npm-registry-packages"}},"6.1.0":{"name":"@storybook/addon-knobs","version":"6.1.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.0","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b7d4689344e4d44f8102018e535c9345700b4410","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.0.tgz","fileCount":95,"integrity":"sha512-Dc9mnaVmhNS5VM8tS9pCRBAKTZ8tND9sV6wVrVWSMjNSbioWXNPMHX7+5RdrQRwP9QRYFldkhqO2IlwnxmyaVg==","signatures":[{"sig":"MEUCIQCAj/HhvXGgmwdLERiQGSiLyfvPq2RU8wdDJwsRBrDbugIgfF7bGR2PiTqF9JPIf9beV6VHTtcJRfvrZFx1xWhV2aQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftdeCCRA9TVsSAnZWagAAi/4QAI79XAUmycSzKFYMTMMi\niBQRYdY0EY/onyaBjaJkZvyGUGL/uK/o0QqUmCEw7HwW7gTW89dg2tbFmoCD\nFLFV6YiTQXOU0cRogqat0YwYWT32cKq1YQQOaSDfD0h5gUo5zlAWV1oSxMHl\nKkDX9H3kKZ653a8v5R2OWrlxXmcZSfEAtGNx0gZf5LEER4SsO2sVhpaNbFQ9\n9vDiHygXaj3f3Yl5UIRMx8OcLeFOr2AW0AeW4oN+AWFXtkGcKuoWCVjp4YAw\nx2s3Q5ueIbsM7rE9W0JdIsP5Zhn+o8iPou0mCcwb79YRCUfk4TmO6uiGYScX\nAXiKgLmtcLb1IRND+rvc4idBh9AkinBSDBYWyR8LZtJK707jAkZM/Oiwcnj+\nR/lAkkHjlY6WJ/QVPqw1ioqGQNUW1uLcBAca1y2CKaCZru4brtwD5us0NRw3\nL1Qo/WZBBgSsJemrBx/3+2vKvEQVt1DwH/gw2TAW6s/zj2ip1+8D56d1HdYY\n8V8QBCXSAIjkNgQrD0RVUhODM6zvp77f3Y+22Vik4FZKF4UAr8pqunFe+p8w\ncaLj4mhUBdLZaV/rxh6f/QXLARBC7cpuUpYcPo+fnRR3Lw97zIT50uHOTcnV\nhLXLC4at9ogMku2F841gWT8QGj4xNfe/o+tU8GdejIjJtBl4g0lZAQOWRDUV\nDEIU\r\n=Ogqe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"e89e51ad5d422dbaa83b6e2e5342fa1ad362b2e4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.0","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.0","@storybook/channels":"6.1.0","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.0","@storybook/components":"6.1.0","@storybook/core-events":"6.1.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.0_1605752705819_0.3209256544711687","host":"s3://npm-registry-packages"}},"6.1.1":{"name":"@storybook/addon-knobs","version":"6.1.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.1","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8bd140a7887b6dffcf038a3dba69354306412bb5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.1.tgz","fileCount":95,"integrity":"sha512-dojzCfZWOCwph2hmtFY4eeoT2eSEXaL9kt/Dd1KmLYHQFv2t9pRwnHzYHSbuOjXVLqkUmTRmsUEdvTu71XB34A==","signatures":[{"sig":"MEQCID1qbXAI0bnwBerppbo6xbLuF3rhHAIOpsvOo0LBrimhAiAfgIm1v5fjvGRvh6AI1mYBp/YwX2w3lMf7jA5M5m23AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftqizCRA9TVsSAnZWagAA3+UP/1hg5YfVlVULLXS3+D4g\nDTHi+kMvTijL2uhnOXmLWHuGuEqlbnzYMWmDu0Ye+u+YwLMPB5ezVRgFhNSy\ncl7IsTj6ac85guFA1910Az/IQPxI75y89Np0R9wV4fVthJax8vqIG4lJZWTC\n702VXaXMe26/bIHv4+mqGn3R9k2n2vfZHp7wFOK6DrBxXVzSOsyaIfVFKGXw\nkdmTH0AOfZ6mcH1pKVCk7W6RQIrBx7pttAicIJgecdBruTW788z+rLeAzJ8j\ns7ze+mhYugGVqIc3c+n8rg6tJl95bz3BCs2QYA1aifGm1x20D1chd1m1cqnU\nssGoAWM3uA6epf9miOe2+darY8EgXlnJi+a3se6H8BgVpW7QMuyRQmeRJqml\nKepYClZcsJH3Rpnfudb2/wKxQLfkwuRr6c8SW+tJbkIvRTtPLlhT7FzO9a0Q\nha1G/AlTYtjnaHHiWqfVLwBUIVKzjdmW9Xd9sxoLtegpS9V3tarac39flPrB\nq8S+ykO5ZCNSh8bDdQd+2NXzVLpoWQV01ISZ1RUG2qGForaxjheaVfvPB/Jg\n/o5y9gKjvtdHPfhLQHjmI/4/bE5mr5GV0Rk8RQ5g/CYkrhPJov+PwJNTEg49\ntWrqYlUWROcKBsQVDUd+3XEaboTfP8+cRMnf3drXqoV1UE0IidoGV1HELAN0\nVmRf\r\n=bBcq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"3622cb7d2c4adf44a643ecba51afb39c576f4d1c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.1","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.1","@storybook/channels":"6.1.1","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.1","@storybook/components":"6.1.1","@storybook/core-events":"6.1.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.1_1605806259357_0.328778584663713","host":"s3://npm-registry-packages"}},"6.1.2":{"name":"@storybook/addon-knobs","version":"6.1.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.2","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6daf89fd4fdf6830ca0546b22f448ade3f49b10f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.2.tgz","fileCount":95,"integrity":"sha512-pNQIJJF68PBBEHNKzgXGUb1IyO3jtF+Gwkuxn5r1msrp4p7yTckl5alH4Abiy9hvcjThhyCTULLO2eee7eawLg==","signatures":[{"sig":"MEQCIEPRWp4INlFIjpKX3Bdt1P9z3mN7VvlKBMtqx4A224DLAiAbSOUqtlKhIvqOyE2pkEbUqmdBZFnvHrEuerwRwjmYZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuKrNCRA9TVsSAnZWagAAcgYP/izNsNSFNYD0JtBJuKK6\nQC7V+lBYmCdOfWs6b55gkAslPiwUDhzg4cOgTgWh6fZPa8hMf3Gb/dxb+utw\n9mWOZdjgJRCo80IKa9W2Dg9HhGRnxiX25/B+BktpC5Jl+qBzUqUwl3F9BuZE\nprkQjX6+v599TpLonfAJRTrTFXzUY8E7O9sjeO0wbOJnJpCQ4CjyZtG40Z5T\nwl5tyCxNZfwc8+UL+CHV/He+foH1umvZ1BnWGm7gNVLrKy8L1hHKutGhOpB0\n+zpshdohlcdA54IH9BPAj88+Rs1FRBcN9qRToGdUsEugjzNdetBNAy8t3xyw\nzejDnQsSTEs8Cr0e2Ko1KRh78QpQVigevBtevMLEkYwKryIbs4p+7TZ7Cj+E\n6obvtklJfd6DNS9UKoyKQEfnYhaSkLBnYjQx/O7SkHdjHIRc409elddIR2cz\nopd4MbVWrmkklA90Qi5zt36JKEKlZmu69LH/THzj/L/lsDhwC8trG0/VUu6C\nl5YUFN7b2FqsktxEUhGhJxfQsrMe0Ypk19WIHqUpzSYufrZrD5QxXLuefQTs\nsYFSdvDLjDOZcAbSIGzFIQFKP9XicUFS358L1YNBjG3XA+NRQX/1nNepaIz4\n80IWcB0gxu/k2/PA1ssUtRlnUOaN2g2h5g+CR7sSw56SLe2nlnARmBDd64LA\n0MTr\r\n=9aPi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"47d0eac6db5423648c3039e0d5c8c3bcc1d8aceb","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.2","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.2","@storybook/channels":"6.1.2","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.2","@storybook/components":"6.1.2","@storybook/core-events":"6.1.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.2_1605937869366_0.46004485824349417","host":"s3://npm-registry-packages"}},"6.1.3":{"name":"@storybook/addon-knobs","version":"6.1.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.3","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4c543d0e0d2e018c11961f884ea546bdbfc537e3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.3.tgz","fileCount":95,"integrity":"sha512-UI94fljNSnsbQQK7UN37C0JnKaDz6V0ef+qUXdb5S0H9J/LN4w35AAmSwzRYx8x1mvKMQgTZ16uSnUgtzFL99g==","signatures":[{"sig":"MEYCIQCAPj0CZFbndc8B97oRwrA+0eNOAEvepUZdJ/uUo/egbgIhAOj3AAGP57HpWhLP+3nw2jza1hE1Lk9E+NCyLQ6AD34+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfu9oOCRA9TVsSAnZWagAA4gEP/jEJLYxh2igibw643AoW\nHvN1GiOUjz6Cce9b4yeVrjirg6qJdsrIk4ZEnevD41YZOGWxsiFYBgHs/4tK\nopkDxoi0BJik9/6g9LlxVNZCC4YrOogrUvBYUBDoOQkikiAsTmciO0bVIRYO\nlVvgSn6u1lvpW2Deo5YFsPbbQ9ZoNYgEjRTT7S0IFiXht+6tQiI+U6/b/DgS\nYJ8CSrP2p2lfVzzPr3W6atn7fqComL7mF623MM9pQxHVLkQV7sD78N23iQzG\n7Bfe6ZQ6VJi+rb6tNIFGxN0iM+OfxzzexDcBSS8lKnxX01+djziCCMC7V7k7\nEvZ/DOjftX1sol25+pQwgZvm2bEelv5fxVs+20yQSJwtVqtMPcM+QlA3Bj7R\ngH+cDflqCFx6neLX/VvKIGIagi9MFZca9K6ErXzwRCo7ALsNs3PkXR01ywXx\nUcR//HHmaJgv1vcJBwOvGTePeimPZmqM+3PeezVR693t2FEP299ET6KyHzw/\nhzk1Ua3AReo8sjieIva52qq1bkzQaBH6j36jdA8qtf7CPxrHbD0M+MvaOPTV\nhlDqo+oKsDnSHmVfxrHkJO7qdGk7q8lcJDN1Afog3KV7tCPfbAep55pI3xiJ\n8WxkeDhx5pPXH1imyDtp5FKn7UK/tqRAirxzw2r6iZyQ/LkwHp1lZWBu7ZuQ\nyLbP\r\n=wjTb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"fc7dd4f63be1df7cff830a813dda8ff97e10d30b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.3","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.3","@storybook/channels":"6.1.3","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.3","@storybook/components":"6.1.3","@storybook/core-events":"6.1.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.3_1606146573951_0.3971862731399225","host":"s3://npm-registry-packages"}},"6.1.4":{"name":"@storybook/addon-knobs","version":"6.1.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.4","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6a90a6dc45632334f016c394162b9201df45380d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.4.tgz","fileCount":95,"integrity":"sha512-h9t59zJVGcYD8C0nh4espG0lRTeMlUEG7zQEJyU0B59TxNl8bMh9yZ9bY5KnfoN+pWTe6gIhMo9Q+wi1pUjzSg==","signatures":[{"sig":"MEUCIQCXiRc4vMx62AHhga7z6K5kRHZw614DqoIMRQRKfWhU6wIgJS6x8aX9zyjEiU6HqrMF0LYiJrgZyfWbFcIeB16OqjA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvEzFCRA9TVsSAnZWagAAKJgP/jXsmjaCqmYLM7+WJ90r\nzWu1JKbUPqdTRB1LAXwikAr+z3IMC5yycH7XvK1+7Rfbe+bEMiK1+5fPAlIm\nu4BebCwSQ6JhNVSmOmXa4KZb1c34Oiifq7u7YclsEDBb2r6IeQGYKlnZJ2GG\nzQEP+ERuByMgDh3Fmzjrp856rcM0RSG8/kLdUikrQt96p1fApBbcsEoEpIS2\nXKJplgqdnxUfJtHLwCuZJRvRMZye5vNOSgK+9hvW/v8mbq5AvWeZgpCDMDmO\n+Q3p4iZ5GLFBukUP19NLYvAsXKU5muxqZyh9IX59rxJhh1t1DCEUynezl9Zl\npKxvvL0Osvon+TBpKk0rxD5UubSeNZEfM3ITFUx8BSEozU4CqJWwdi4puMTT\n+OctQWjA5SAzGlGo9Rr3ahB1iIFyFdzzUKZRml+8y4zEwAqfTS5B+u1IHE2Z\nZCW3EonEKbq4c/ECljPj3EAAxNndVZI6aW6NEaWE9VRYwlVnWD0R+4HNiAgy\nLaf/hasoYgplz3r2IjEdYklsg06gyhbtolBiJXUgKsr/AsVkP902LvwrDuWG\nkVC9x0mXQ1oi2uf3cdA2Dn4VLzvcu8WHb7eZvqLG7YmVC/Np70ZBTLfKS/UA\ns8S5EAQQLsC9vAKwn/vHNxxxjumtg3ZMp35LWb3HasxKxK/EWSoSNJ37uq44\nlPHn\r\n=4rvE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"2f61725dfe6f67fe1c5bef5b917715930ed0d7f3","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.4","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.4","@storybook/channels":"6.1.4","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.4","@storybook/components":"6.1.4","@storybook/core-events":"6.1.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.4_1606175940675_0.1906514927053169","host":"s3://npm-registry-packages"}},"6.1.5":{"name":"@storybook/addon-knobs","version":"6.1.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.5","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1b05be4947ea4e8844ef6c12cdd6ff01d7bf7faa","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.5.tgz","fileCount":95,"integrity":"sha512-a+yB2RFQ3F786MkPKZMKsMBQpe2/d8/sY/lNcFR6OPEWU2W2E2NxMf0Clwv2Xa35PCOjNlsrnVC+lpu33KJEvw==","signatures":[{"sig":"MEUCIQChczsptd7Yqrmf31frvMyH1m5WLiAWvh9TNJvmqAaphwIgIwkZYowkkO0S7Nq0M39Mez8yMXQPgmYtVM7bov4i9X0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvNCpCRA9TVsSAnZWagAA1HQP/RlyXWREDTCrj4TMm0E7\nmTT9il3PLb2jCNq5THUrSx72e6V354jnUjVhaM/VABcjEJJoD5Zq8EIGTovM\nTn4JBvOKnITksybN1ixDV7vbph0Xwvzb/IkmuoQOx6dWfhjnWqPwVegEa8Be\nfem7GSAxSIVOQ5sWjYnlStaIg6t0ZVfAN/bqO+Z6JNCY/v48U/djPFf58OAx\nkkAVlyXYFbV+5oqmx28rtsNt9aQ76fLYHBWoz73TsD3B92HqMfsFLTcKJnyp\n67awKU9x1QvG86IPNp08NzGUnSydXgJbPYEN7SMxuSXIMV0Y4kcYPTVLU4l+\nIfKYWGkn34q/LmsTBfx82XnjQJQgV43WHvB6yLk3zRK+IBTO0ZA8V/005rsA\nOvtDBQVufLPMP3dMtkEXSntzzbG/wzG1BU0Zpo7TVwgVXQKPBWDnxPEtZ39e\niyNROg2g1P6/xgqA5SYzLz1ffaNc8Q8pGbaXHUuOX3XpZyN5C6y1ixQasyxm\nyuu82kEUlqP1xCWOx0Fl2oFlZyVVV6Gihehd9JS+QYVYs/VQr9hWH8YkjKi8\nlU+PVE/lXZ+bmyvsM/Rdk4irt544Lxc7+9e5f135aiq3skVg+5jHRcFd2+21\nmlmBQFrw839j0SSTG7mSd2PHyxs/PsjDJ9fzWS1ydBxd7ogcZ9rL+zk01MC6\nSXMl\r\n=IJB1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"2622d8aa6d8ba207a4b03d2ee1d7d9f083fba48d","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.5","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.5","@storybook/channels":"6.1.5","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.5","@storybook/components":"6.1.5","@storybook/core-events":"6.1.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.5_1606209704660_0.924790060982994","host":"s3://npm-registry-packages"}},"6.1.6":{"name":"@storybook/addon-knobs","version":"6.1.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.6","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f891d02bea079fe320089f505d181c671ad50567","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.6.tgz","fileCount":95,"integrity":"sha512-4tjVeGiSjsIwFznlD+yETgSUZDKAQkgyInBUffp2iQxK74XGz7q+oTNqG7RL0fYLQz1mFbqg5N+t0q+bJDjqtA==","signatures":[{"sig":"MEUCIEtFKZkv4EFwYIDsGnki36XjRhchIouWDEDCjBZGjCprAiEAhPBSf/X+5chUIcOMPWG525Eeg/avzRNrP3qHI3NWqww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvaNjCRA9TVsSAnZWagAApdgP/iQnEl4EZeTZjDroRqEW\n0Tgrag8Vb+/JUysoUCkCjHzMz2x+yaByNIF0QuQMvOhFVaQ+/bWpoFbwf3W2\ncPRS7XiiK83Z4Bqq43KKHhacCVyAQDOjMgkIlzta5Y8kF/XRO4k457/bcy+T\nw5QI1Cmqgci9AiNCNpBN0Z6YrbVyvWABHzFBuLc0UAht+2Uy4dNk1rIyHqE5\nDiZAv7yRdoO54eD3e7Vy5qm3v3jG9dPM9M/CJt8GiSNnBGsM9CuiufrZgzqC\nImMi6UfSr+TeCS8LVnstSXME86rvKGPgDQO4JtxIcMQ9egauK1nzetOMaY/s\nCxfx6NTcQphV7c/VVwRq6uXAfpShMw9sdE92pmstyvj2BZJq90oR2dkI5iCV\n/6VTsrpe3EL4y0OW9LZWF/Ex4cohkREsK02ZXUC7Mn/oEOD7/RAwqWhCjxPN\nN3aUHZVmcZQSlLxa9PAVXKWgt3OMpI9e/aOFgiPdzceRRmU2YF9k0twFVDVa\n0QBQHChi3AIEgUDNhbtqghRW9ZjkO8YBE0r4AWQTAjVMzxDQg3+TcVUSbIFm\nCYdiSwDlnAYvM4IxNJ7N/2CpT5Iz+HMBHJ721oT1IzMKETLeGcFL2nv8bNG0\nGEzjRHc/JcMe2v8TZ0cXtBYdXWMO3wdceBnYfNS0ijVQKe3MFCcOb7qPfy/u\nvKTo\r\n=LupG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"1f89b5b967974abd3badb3b63d88303dfee4467b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.6","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.6","@storybook/channels":"6.1.6","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.6","@storybook/components":"6.1.6","@storybook/core-events":"6.1.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.6_1606263650557_0.774447583640653","host":"s3://npm-registry-packages"}},"6.1.7":{"name":"@storybook/addon-knobs","version":"6.1.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.7","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"eb7b0b3b6798c8d1a30ad7d27322ec499077ba11","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.7.tgz","fileCount":95,"integrity":"sha512-2VzGboI2zhmOFmAJ16dYYkcNgJfvKckbvKMcfPMS0l3P/1BUd8EM0CcSuyz2524+HHHVzQNFDQqjbBOa9qBP3Q==","signatures":[{"sig":"MEQCICgm/gZpkRISfVzTJf8Z9Bu52v0SkxieWrNI3gIGg4KZAiAS+Im0N8EWu84MydwHtN6VdhNqeGj8x3cjSB8pjRjgGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfv+LYCRA9TVsSAnZWagAAQ7kP/0vDritpBFoXXEgnVTMA\npGBAKtxvpm+lfgx3UbqbDhfc/g3Mxf6u7l1rOdMWr8XIuRUqydJbsWvw0hbL\nmjdT+f4/rSzALEucYR6Ri/NUTxQhcI+aGuQyg7E5nhkFutSXGGmsyPdt3As1\nxYBiAd6GkQXfZwQ4YSk7m+O5mGHMaxsz/mGczOrG0ZuX7Hocnif/hbETEj6Z\nXV8WzSf4JLzsVjcQMy7dSw5CLqIGlT37EZ16KU0+0nKCsxB7ww1klyIeNsGb\nAMggmXF6mxL2a/q8s/pLC/z6XWSHkFr59l4gPCff+Fejx67gqnqOjVZ6wWZS\nV2F7KrxEONzSAth5/xlwRYtnyHYdJs/0+l9zCEk1jAitXLibvVmZWPG2CS0X\nk7hLl97aqPzxysfNsRCtwHcSFOPKualsnEnJGTosng2InAqVg3xVuaIPJ7iT\nLg60cAXtaJEklp8IPrAznHDQfXO7M42D8TpuqP1Mu7lDE4hKOwWrXsCnhQov\ngKIxQGLI47aX5eQutlGcNNb1Fup8f1maDcWZAS8mugS/vFaVY5McHbCkeaPp\nDSfBW8XLIFATBVBNLSYEAHdJjKXwlBT4foQEEJSqGy+c5l80jMvVT8lAq5fv\nDxVcmMbZurfTDAOMxQ9umBV1odQ1Qb8qn3gieIaJNMrrMz4OMLaTBejJ+7YA\nfkGe\r\n=FA5N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"303d951f9ae4aa2241c9823e1cb6edbfd50fb093","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.7","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.7","@storybook/channels":"6.1.7","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.7","@storybook/components":"6.1.7","@storybook/core-events":"6.1.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.7_1606410967389_0.4567766210970272","host":"s3://npm-registry-packages"}},"6.1.8":{"name":"@storybook/addon-knobs","version":"6.1.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.8","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"1f823868f356e18b860d1f4c402f545edaa1b5b2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.8.tgz","fileCount":95,"integrity":"sha512-pLqRL1ssnt5s186BQ7j+kX8z7IxXR7h3NftTSxFVpWVIoyHPrPGs10MOPKhKmRUouR+fqKEonGyK3ueeA4nNLA==","signatures":[{"sig":"MEQCIClpW6c8p1MpA9d4YqLp8ZHYf9vCj4DGn1qn4gPQkjAsAiAgnSq2iZohwmzJIAGvuxU7VoSl6IrZxd3G6WUuNKqeWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfwQ1ACRA9TVsSAnZWagAA7VcP/2N0oasm9VesmVNyGqHN\nKm4OkyqFKj+UhiNqZ2LqUuwiSTDT/pQXApUmkUNfRyDesHH4LAG2YGsc5jkg\nuHidzl+7XvIytfXnxtMOBdrueI4Ueb9QQ0xy43+DHB2HzGuQMRNV9pXlyrKu\nDKnEnkVsO1+frnZgq3aZNKuWDdKVn+jjn7aZhyLOUi4wr1Z934rh9mdLkgmp\nGXNnDgEQ5ccg9CBoR8ZHs3xrdXGputsebljUOjSzKtluCiLnIC8I5AsIlkzw\nt0H5Lf+gJlbn3DWuJzYnlgF0ElTFND8Bt8A36AVouTKKsDoTlGdiaBqXam1+\novI04l3bMyks8i/IrWoviTQ32DVtWrEbC+cFmPVRUUEr96M11ox80gNJI9T9\nrOMn+7nHSQKqIXMaw7rRyyHApfXabuHTAO50GNlT9eWPgQoiv1YcyTumW1e4\nBSn4796/kqsv4GQaBsTh2ZDJ6tJl7R/PZ7XaYro/URAr+O1rCEzYInirwsP/\nsVmwuw9H1d64RxO472xuJxXzQExAT6vvrzDpVx5DhlP4c7/6pdRY8p2zyJAR\nCPFZGazffZRWYeF6rhIQu5JNaPdXQsdd81l81G/27HGII5mPJflkyuMfKIol\nKTfvDCg9YHSK5oJzkZVetrkZgGcKT+PHo2nZ1K9GmCjJjnTYp/+EiyCTTJxc\nJdy9\r\n=Vi5y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"6c4d0ed4beea726a121cddd365cc5258d6828be9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.8","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.8","@storybook/channels":"6.1.8","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.8","@storybook/components":"6.1.8","@storybook/core-events":"6.1.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.8_1606487360261_0.47239049644510955","host":"s3://npm-registry-packages"}},"6.1.9":{"name":"@storybook/addon-knobs","version":"6.1.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.9","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"49773931770effc208db094c61eeecbceaf5836b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.9.tgz","fileCount":95,"integrity":"sha512-aUKD9FaQGl/WOkGT6utElspYZJ7cBtUARe41JN59qOao7RNviabipQUASrjORcYUUU55sfKsLPEqQaEKB3x2bw==","signatures":[{"sig":"MEQCID3LRApjNWlAzk+18yDx1/I1HNFY4nr97EfDhFiOvTg7AiBPWWVHqwJ3i9BDdutQxzmcUJvbBVyOU8PMiFbPvli7kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfw5t2CRA9TVsSAnZWagAAxeMP/0/6pkvtzOiQgNCBNKEh\n3WcYAmTLcLrzf97lBSA8NL7cGqjIy9PUpl0VjiwmOlui4jrBrjouwveSh0p7\nK4Ov6yuGWZUXvLKImAegwL7aJHEjggjoH0ulxHhNFs1V7jBvJmQ1ytgCt8N5\nKY5wmQKBnEmIZMlRgNssDmfJYpxPhnxX5U2oek5k4iVQ3T0LKd8hNKGnX6IT\n/HBmi2vS05+n+TxGrLy5c+HHibVxczS3GaTPh9TnIlbcnJjZ8BHzzeZkYvLn\nea4nGDmaIRW5RUONdBhwS9MgaQbZvivGgFYkKwQcwHfpPrzkFIzLPJqXGXt0\n9Mvd6o4LvtdKXUWS9YLvAT0Y/pgnitT+D3fBDvJds2sH3iknATTADM28OI3A\nXv3PhS8aoJSRii/aix6IGGuxTC//c6itYNI7pgeaU9joOM9rlP03uYo3zXTC\n/gKbccKwHu6HSi58qnUdgfw0RbL52rzMPQa0NJrOuwaPFco8W9A/L81fSFYn\nOcsT3rJiHZRlVPbB6b2h2NTo7LUoWSrvX3eJUBVs/cqgDo7vZwA8QLuXtH5T\nizQVOhe2yMKBcm8oe0+5MdAG+8XivFiku6AtMOKuaqwcagU0BNloovDMskOK\nthzI4nTj6kZ+ImAOft2ri9pnEQ6BNlL7porL1cSANj7tn5RIXaeUvra8T7xs\nwciM\r\n=1hGX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"495a468d5eccaac706b6b8b52e9dbc5a484027a4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.9","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.9","@storybook/channels":"6.1.9","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.9","@storybook/components":"6.1.9","@storybook/core-events":"6.1.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.9_1606654838302_0.8089472684886194","host":"s3://npm-registry-packages"}},"6.2.0-alpha.0":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.0","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.0","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f03eb1ea57c83aeb488e73627f909afe3cc6e505","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.0.tgz","fileCount":95,"integrity":"sha512-P6EVV6jrcWEgAvXl3Ch1lxf1I7/DZ91XzDVfvTPcmFt7ZWJsoBm75RfZjObBArcsrnZbdxKOvKG8fSfKP9aSfA==","signatures":[{"sig":"MEQCIFlAVjud+baM8liC8luiWcMZ5bcPHPRvZeVN/egu/I5IAiAwxFIBu7QKcRr9x7pYsL/ZknVSQV+Al44TWaT4Cr2/3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxb1UCRA9TVsSAnZWagAAokIP/j70ZxrRwk3KtE79o2X6\nqLoBzArIzCKv2yORvOXdLG830LBJr10KHubW4hcKatrZ+Bn8O7awvLKQv8rA\nmRpmN3iqRPNNhdvLbgkOIgMpI81Uo30yxazz2QfENAh+fNj9OkeecR10mYKd\ncq8JeZ6u2WhKQenT/N5bnXsi1A76/ZNWRe8JCfuAYiLNro7O+Z25glLj5KMC\n9dVyIjwAexZRfrmy/tg2uSyLc9aVOjUsBVVOhsB2AYa0hwLWRtf5zX9utxv+\nmkR+50otPn7egpdaC07eOF17eqzRhT+Ui+ryhEhZPvay7Q0DEoNbg0m9poKF\nUDPxYplZ/KT7stNIclCDBJBZou85o8vv1oMaC+yb4CDDFxAheaFsGYpuj/OB\nGNCeJG1/vKXXqFqB+ucfHvWHy8DuhzTjuR5gPR3NZXp5riEU9tLbwI3e4rg/\nOtPCnFSN/vxcGWMf9BxvySNikF0MmdrWcLVqK6RuZi16AjIuJCzAFZckGeUE\n6XcopCQ70MROZNIgF+daBfYMoa4WdU5VRE4QhpivVvvsDuKOfrDVU6fjD8/C\n0S3idwefgrrmiP4A0o5g+K1g+B0VDUPzpmgaW4LxHuQaseS+mg5XvoKGL6UL\n9ofuhW4xB+yqsQ7LBg7ivwfFj/u7DArZevjp4qkG+DAGXkPJKQ4sn2YSDpHC\nkkeB\r\n=ZK0a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"c44dc96274577a6f1c4006c88b0f9db524e821c4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.0","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.0","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.0","@storybook/channels":"6.2.0-alpha.0","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.0","@storybook/components":"6.2.0-alpha.0","@storybook/core-events":"6.2.0-alpha.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.0_1606794579893_0.02102681132309847","host":"s3://npm-registry-packages"}},"6.2.0-alpha.1":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.1","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.1","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"88169e5167fbb1196c8cf5e53341dc5a37f59cfd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.1.tgz","fileCount":95,"integrity":"sha512-VevLtFBS6+jxaya+ZQuchY4fQDhfDnlU9sFCxuDiM+zgnc87f2mzo7yJEOBn1Af2/dEOQRgjGsGHShUYGuLSeQ==","signatures":[{"sig":"MEQCIDTeGYtiW8i4lZ5bF7sFLPfyXAuE8s7vsd34UwGOMvIfAiB3jMFxSOrcirM0S7kpeuQjZQ4B4UKN91AZK193l64YVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxkTvCRA9TVsSAnZWagAAlCYP/16S+8twpWs0x/nmKlAx\nAqcUgMonJyk6miaQ7h7P3L8mwHX8oY4IdiA4KSrFBIJsO2sLhY+vN2XI2c2t\n66bBirP6JpmW2qtJJHmyog4GSL24SLz4uFnDVc27UJ/KQZzG7vrgb8tJOYwJ\nwBxWjfQ6k+FqQyA345K8T8/6/YAAquChAOOPIeSO8pwyr74BupqlVXt9y4Dl\nI1DMyZwia7MBfg1NzazU4tOUfHvLyk4nA80yw39eetnbkQxWuVyE0zBzcZF1\n+h1+zi9lBz4rlBodNl9v/5S12OdjbipXTWvYz+1CXBdKyI7BXnEmha2e5OiV\nK7E9FAtt6p6lLgoNMe5QB/o1y3ExnwoiFjdEIlJRJfx/hlmXQU+EcWFwcdAf\ngB64V0QmZ7feG3R5jTiazlsWXoLQUyxadBOjNqxGhFJPOmxIUZEHUsx2s4tb\nNC1K7pGOincXfNEHjOe4kOJXm4QBGbp8NEXsFxEeZxhLMDpSWZ1rgmElGdM1\nNi5wJZruxZyGetW305p+mk7adwhR+20y4F4qun0mBYHQdnPkf3pcmHcj2LPI\nFj1bt+1/AAHChehwYGceyTXuqHbPERj8nguPyl9TLicEAGoet2qvlyCk/CVd\nVsiKNfaeOtNZAU/n6fNOKfPBmO2bu/al82KsGLRPU/B//k1xDOj4ABd+OO6+\nwX1H\r\n=IzlI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"211db5358500cb71c73d6183e86f40df1638752b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.1","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.1","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.1","@storybook/channels":"6.2.0-alpha.1","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.1","@storybook/components":"6.2.0-alpha.1","@storybook/core-events":"6.2.0-alpha.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.1_1606829294982_0.568534255318984","host":"s3://npm-registry-packages"}},"6.2.0-alpha.2":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.2","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.2","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"923d88d3ab63e87e2f20788524692d4f2dba6d9a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.2.tgz","fileCount":95,"integrity":"sha512-hkPpClxYAcnu05bhpg7jbg3Y/H2lZCpm5IZUjH2XjRK9QQsNzVlXy3LdG5XDBOZZCZby/60JX4+9NUXdWnQvWw==","signatures":[{"sig":"MEYCIQDmqiwWGFvY1pdEHCjgjyFBDu3AGSQKVayjyOppYqQeywIhAJIBvcn0pQMV1g8Jbx7XBLM0IiChB2IGeLkGhu1/Mccr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyJXWCRA9TVsSAnZWagAAb9oP/3+QhmQvuuHX5ksfjU3l\nxfr4biHeDqrAnOAXuMQoYZMwxFZ069km2Bs50BDajMOYHeDLc8BwnTs498sa\nuvVRVL+njWt1houvaD96c934gYLhISShHly9cU0ckRtdoSW4IYsD42IAlGhO\ndDliiB4hplScveUtqeCK8fia0Yx+3+tgD22zbWGTWnTqgEIIDThlApsl6nQ9\nFhH0QTZDwEXLmRRCQDSLxvasT2FHSeqYSsifmHeJP4QRWHvUR4+eOTpokfhA\nsJvyca4svIu3GJP/k2neALvu+OEOd+YdsW7YWKd9irkq6D5MLc4WS8wJcj2F\n0jSp7EBeotwJtdbYrK+BCsmF7J/nfOjnudVv9Jo+ewamLAnRBzHYQ69sx3jL\nJJYkm/St53FYTQJkrHKiN5ilZhzt/UNlFVseI4tGRFreLM7eGGeoRm8kjuI7\nB853JAYzZWm+GQLqjTD+JnGd8uPyz35qVXwM6wW+W5wL/TjP5b1Khg2AfO39\njGlNc8ApmmMmwRfaptz/5y9+mrURqnvAxz6hL6Qp4bo2cRI8oR/iRIq9I7BG\n+RpqLGY9136oP+Q95IKVpyBYGEdp7jCTI13aspv70qGBCe+WxBy/QmL+k0J6\npLzoTWhu3VlJY2Zw8Rzvn7IQEYj9PVbJk/yxt+BxCQ7xycLF4nhRtRN0hDXy\nUE7T\r\n=6rTR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"1b9dcaec9bd853c813b9f9001d00bdb89c742e66","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.2","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.2","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.2","@storybook/channels":"6.2.0-alpha.2","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.2","@storybook/components":"6.2.0-alpha.2","@storybook/core-events":"6.2.0-alpha.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.2_1606981078333_0.2094552670441896","host":"s3://npm-registry-packages"}},"6.1.10":{"name":"@storybook/addon-knobs","version":"6.1.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.10","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"cac21ce6e73fbaaac95c648de3354b30c0cb9511","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.10.tgz","fileCount":95,"integrity":"sha512-hk0eszusVi4/Lq4bL146ZwWemtS6OiBTi1CGn9Yluzopz6RWnzo0mgGPBKz9hSw1uC/3wHxmQQaolaHcl7A0Qw==","signatures":[{"sig":"MEYCIQCY22Yg9QlQse+UMchvUnAMyFL+5UdEGGpFj2tjChsYCwIhAI/Gme3MqCixSvXtBuswkLRMSP4G4BlqYwb6BjAMJctI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyactCRA9TVsSAnZWagAA1eQQAJFbslvBd7tvGnm+Fsjf\nKRfJwGEXPXliELn0/TGqaM73cbiF05lEDsO4Pq+Z5v4wpoigFB8o8ZBeApYO\n8V814gJ5Y1bNV1lHfYcNNQU2y+xPB+sKe81wTFwEll0pd10KWgr1d8NqW+/m\n2bZ3LPwF4kf6pjozJAGtQj9Of9mFrHnAheQQHtlf0/ra8oafioC/V22/Pj0W\nef+pCzE7dPsfNJeouN5955TnjNcfHaEthBLnWlkye9uOZuSeNSvvA329blfu\nG59T0U8rTZts29p/r3huouERPtcwiMZf8fYdDRAxo1slVC6/137Y6JwwuQdL\nOQihZ3gg+x2W13TVdf5aPVhBFhMLmSd5U48yYwi/J/S+YSypEbhFCHGB9WzS\n1+q1FZL8jH+DjdJkdmnqxSf31Uenb4LZR8J7Ml0DGqjQ0DaUW4eiAvBNqTua\nYEQ/+ZiOWZgfYZvdO1RTR2i0uTm2AOP7+Qe0sLI56SeEGgdH7xqM1Jy62LcI\nKGwQqLBFYLtmXO6DNcyWQgPzLS+sNe3/fNnXWd3nTfrRXYjBrz2yLvGYl0h5\njdD4Se9NOHQt+3CQ75abx2+mEvdC/Xa+Be/vMYzVpRK/5e2t8T8UKJgchweP\n/9dvqV5hC2Hh45mkbpmYNeUxIUilmRRp2gRSar0skheFrjPc3IaKan5RWs/z\nQv1P\r\n=0Jwh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"94ffc5dab339819c9f3cac71ddc509a59db16c05","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.10","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.10","@storybook/channels":"6.1.10","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.10","@storybook/components":"6.1.10","@storybook/core-events":"6.1.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.10_1607051053180_0.5106418387672371","host":"s3://npm-registry-packages"}},"6.2.0-alpha.3":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.3","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.3","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d24eba844b317bc313f30fddd0c048de6beddbda","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.3.tgz","fileCount":95,"integrity":"sha512-OVDkKSI5tkTKX5FlwBeSVD5rCOWw13PFhVnYy/0OWLLnrT+3wM6g2SUWmuqSJlTZoGZv20PwTSwwuYAU1m0Evw==","signatures":[{"sig":"MEUCIQDCzhncsbEBC1HSjJ/IXDt0Irw+MnQcqj3ptatLoiNeFgIgP/yv4vYPFGqQ2BLNxwtIjFSfQEFFdnaWMWRAp/4usd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfydybCRA9TVsSAnZWagAA0f8P/2IKmOHb5ZREVXTawU/N\nVJatfiug+SvK7QAzbYDY4vHD1Y019pd959MfkhzZMQMMnErzY2AExS21d7hr\n9hyS4K4a/azbuDmxtK/9GCZxgZOrqjIGaDXlidrywkdbI2juPoVzFGK/1OKQ\neJhH0h23lWVBHZqkH6bsYhXSPmTlQC+OPKKZD9MPy1wIq3Pjr8EzhTzO0lLq\npLTHLcwr6sNT7iz7kzl6m0O19aJ4/A7mkYIp1KJg+GNKVmfjl1Yu6rxCi+SU\nraEwHdSqEr8rhCplMoACI+olZsvuOLKx6BRZogffYL2LPgP7548zHIbdk8I1\nUqvfXr6oNoQnnGeFiNK3WB4XG5TqNbIrwZSHvW3hElzi4xAhVYN9kHLcGJ/y\n5KIqAGQsacE3WRGg8Gg90BkLLBLcV1qw7FL8WKu/YagVH2YXA4Ek9mrVDN91\nE0OlvAsxKHoIj0smm/PXyxohC5ERexa243tTTsZpdwsjRUk4mzcbL8yhSt3i\n7BFYSom+tKs+oqp8Mb8zUvWKA88qtKaj/pFPNNlhxSplP6g/Wo52tLa5gd2N\n0IlExpP6FQW1+GhVJAanuiAj+MOFSixLc+406AkwWFs00zhPOWZql7F5B43O\nybKw+oboQdraZCboow+sIUUKkTqwBXXv5RSRe0z96NPxecNzIdXWzEEzKpd2\nro++\r\n=JwJ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"70078d0fbd3af8290e82831109a00eddd133e4db","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.3","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.3","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.3","@storybook/channels":"6.2.0-alpha.3","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.3","@storybook/components":"6.2.0-alpha.3","@storybook/core-events":"6.2.0-alpha.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.3_1607064731197_0.3094471681358124","host":"s3://npm-registry-packages"}},"6.2.0-alpha.4":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.4","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.4","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0a5ad96dbc65e428f2d17744f6777b2047e70bfb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.4.tgz","fileCount":95,"integrity":"sha512-+6sywT2Y12HiYYGvheATsX2IhylnZLl6vEJT55xBN+ZWToRVwhMB3xMOl+hzUsj0mcpQaMxz42fubrCVWO0RrA==","signatures":[{"sig":"MEUCIC85it7ps8xmIClxbmh3izij3CHYxqKcQUd3q+pgknPBAiEA7qi2LsEnJq24nm5V/063dGzmE9PU/+uEORFtF4uTUjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzGwvCRA9TVsSAnZWagAAHQ4P/jNbfLOzUuYtPQTLTkni\nmrKKvUHeSRYrQ5b4HLU1EqIUFEtccpEHUyaANhlXRYwWNO1SXLsZqR2swQds\nrej7rLxzDovj9tOYrPXczYMk+9FKbDRwYjI2rlbg5RDEL/OdJplDDj3lqzGv\najo5VuAby+9B3I97lBNkoXsUn5DBLYbSu4XojLxHTPtnocaJM7lSWUW6gObT\nA61rih3//F0EPKafSEYcVTm+yJBdpzWdTbIxP3jhzSt4VgChcZ3shXiw0z+L\n6HVAiamHt9MWso3FAlSj3FANArHRZkuspAhuEMoHFffYPpNaByirhTkwAiE4\nmkKQHcfbEk7A4W9BWBAQyz3cw+tsdDt9jmULg9f2QWNKTKWAb5tNFmdUgLyK\nVJV/3QVexQqk8xRnmRQiMy/eWtCyfFD/lkxsNUEFtNoFYSqiPq0FRMp0GCFb\nQzoKrM4kUumpj6iK2epElRnZsACrPSuSGViNjGirt3T6f90C+C0DC1am93Pi\nCHunyCZMJ8F/BGG6HEHM43gclDBw6Lz8PgGBtC0lbc15yP+AFwsOldF6gm/u\nVx16rxEusOJhD369jJe4BUiBrMuCq5JzbO9YiZaNRzhAnMN+f0gTKJe9l21o\n1+s4lXB/Ls3h0uguQ0pcR8Vv4+hFvK3AHkbgfHbfvS4eOMK67bPV/yPEjVw0\n4BNi\r\n=Tp35\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"59f78816e922ed7af0c23890f998bf3399b6b7d9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.4","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.4","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.4","@storybook/channels":"6.2.0-alpha.4","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.4","@storybook/components":"6.2.0-alpha.4","@storybook/core-events":"6.2.0-alpha.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.4_1607232559057_0.11000073265747523","host":"s3://npm-registry-packages"}},"6.2.0-alpha.5":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.5","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.5","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6fdb461f8708137e688cb522133da01df9591336","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.5.tgz","fileCount":95,"integrity":"sha512-Ht6R1mJGJYMOY3V/qxiTU+1AHfi9IRxWwAXp4RIZzJdSD2GmBbLMQ29KMqlGLWy4M4b61z3L5m8vPA6269OMvg==","signatures":[{"sig":"MEUCIAsiOr285WM3hH3Oxz3h3sNK4x0pi9cmgKkJlsEqjiJwAiEAwZBVffWRQ/k10ZH2QYmaKn7FzRmKdYSr1k9ql2mnBDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzwe7CRA9TVsSAnZWagAAmgMP/1jpNpcqjSlrg6ad82tz\n3ISSyabPDLKUx/VbfYaNFlAwi1Tfjv3+LcM3VukgYOoxU7FZVBjgArsoqxh5\nPsRwzZ9BMeWHNpk/2zlvAx4aIipsdliigolMPuOYFwzB+zuGkpwAux6ldWY7\nHZo6nsgJKVj4PpSctoNrg6rslp8lA31BQ3FNqlFxjRXXEhZlX4ZFv01wje7l\nmvOmkMqpPbD184844G0qsFvxrBRg6fVak1Z27uczwB7UbRuT91MWPEYVa2oR\ndJs+iNThUz+TOBaJKHEZiJUpRdXBI2MzEG+mdtFflxfeTWAUrSr0+otOuh2E\nSstk4s2j2jilCCI2S/YKaRirPgikcuVba0EM3+3zCgSKL5PgMISDlKeEmmzM\n4aHPEk1Q/bUQXG44Wm92Pamx7Bnc1k8IxYKSADbLGU1g/K3Wxpa1wB5y3Oeb\nVothRq1L1HdaS1oBbjKAHGEGUcVI0bhdbcbbSbflFBcdwxnUXj59j+d7vA5Y\nDp0bZ7N/iTAYDH6VnD9vwnQ1pDcMttx1Rawel+hzSWkCbQmDci/r/bGmUHb0\nLzlmF22Kl13m3JQ9/E4T3fgGO0MUiN18APra6jA0jecswo1krb2i7XeAny79\n/lx8xPwwe+LCqAWutUPUsV9zWaDznCAQj5cw8s/glBjQXGN3EHsrs+m1arkc\nrwtt\r\n=UCRS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"850a0d8b98f2ddab1cd4d652e9beac11e21a369c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.5","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.5","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.5","@storybook/channels":"6.2.0-alpha.5","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.5","@storybook/components":"6.2.0-alpha.5","@storybook/core-events":"6.2.0-alpha.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.5_1607403451087_0.6213979461065733","host":"s3://npm-registry-packages"}},"6.2.0-alpha.6":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.6","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.6","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6b670e7073e6735690217d5c2f949d114108c279","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.6.tgz","fileCount":95,"integrity":"sha512-cWNVIVRH6LxkDf5DpahBJTlNqPgdtaH2xidI5QcyncAPBqo7M5b/jebEHUslKjjJZ+Zu6OGkF/7ZfB6CEl7Bmg==","signatures":[{"sig":"MEQCIFIS00bk/smvaWDQyk8EGBlWcVLwtWwYvCtVBeuCYzJTAiAW1FkI9BlyWlxyeYd7NScIBDUHU7HcaiW/5PLwdvTNMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1DrWCRA9TVsSAnZWagAAAg4P/Rc4aDIGB//o/R1K771H\ntvSlSL+PaBvKeyNyBAtgBKExYZsFcDDz+4xCUuXmHHWu0ylFtTSFjq1oK1Q3\nx2eRy3lLZCn/iLnL4ku4zotQSXV9DQIbr2yKFZr7YWFNK+o3xreK8G9Vzz5i\n1qEwB3fHpL+Er2vWi0B3HAKKatJg6RuirYtoaUcm42x2O/EjRu8NYh8DqcmC\nCp3t/6JevwTUKSkFo5DNpbKxwzz9CURSlVidjaGw8K9UUwQY3LU+acb+vYIu\nz1c35X2AY2srww/4RzYUOBqJLX/aYe9hQL3FCGhJqvGvO2yWp2XHDOGtv1ni\n1vGCG7OxOYqNIQObU4GjV2ISzen3NvP3jk7gHHwIG4bey25ycnm71pL2Xe9E\nbkj+ZXubYplzCKn8mlH33KN8KUhB91POQPZjXUOC96B4koHPUMzKzSrNoqk3\nUHMapQjpsmU4hePbKW8qcnM+2Fbe25KkgQJlmtNjlGoIepDZJ1g4dF/qpGvN\nCzS0I3b6KZ1iQ1qck/LNzNWk+o1LoCu5TGrB7K8ufNy1Qo+ZkcZy9K+YyJGC\ndSaliGSyb9X87LQGQQrI4aU7HaoU85yDeVw5J1opl+rl061sSKYRF1kZYQHv\n/RuKBr9orPEBrYRENbcDQBdJhZUh15p2X5HmS+XWhNvarvimKIsA6WEN4hhI\nvG+6\r\n=sC5Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","readme":"# Storybook Addon Knobs\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```\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","gitHead":"e741f5e3af491b8515668abd5a31fb8e2c201770","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.6","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.6","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.6","@storybook/channels":"6.2.0-alpha.6","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.6","@storybook/components":"6.2.0-alpha.6","@storybook/core-events":"6.2.0-alpha.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.6_1607744213612_0.12200915253096256","host":"s3://npm-registry-packages"}},"6.1.11":{"name":"@storybook/addon-knobs","version":"6.1.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.11","maintainers":[{"name":"lshadler","email":"lshadler13@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"bd0e33af886f00f359b8d2e83b63bde1bf97e8c7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.11.tgz","fileCount":95,"integrity":"sha512-5bVB7JbClyL/v8hJcifRL1Jetj1rDbVjmIOw2RputZHPbOJ2Dd18X3uOAfzNa7e2KJ0BmtA1ojZ3PuDfy9MAPw==","signatures":[{"sig":"MEUCIBpgyF2ZRZnAlIfPu1Cxn4wXlWeapnRlkmutEFup0Ax1AiEAzw36ENXe1MyVxky4Ha0/MrPGkJM3BK1kEiaetR1TyVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1LgJCRA9TVsSAnZWagAA9SwP/3V81zI7fUQJaYdQ/qvU\novkExrwnoASA07r4ikVhwVMfvNUhA0g1ebQ+/2mXp8j6ARz3Rzb9szf3c2iR\nfM3oKqTMMQ/+XazYQuwLv/KMP/gwL1X0arQdL9ik/E4KN/35BRQ1q9sSy4+Q\nxZ3pXOGQMwn1HabRqG3cZtz61eeNFB7ecn/zT96CCjqUiNOcJY+Yyelq4YOk\nDeFDWmPVkcWho60MquhO/nee1yqT4j9zMdl9+ohpa745D2UcscAzXm39QT3E\n3lTEVUGVVOYYMeZrk0UpmYENMJEfciBZ7qtvL0G0O2q+WPnPufkU6QOZPSZ2\n8/Ee91pdoB9Lap0h60o9Zhw3tlOX3WImqPg1LZ/OjORoP3H5sx0hI0d0iZKD\n4xDAlwlWiBgU+r+ZGJgkPIQF++lgwh9m5o+pK2HgCBxeGfGrRr8tFTsc1fld\n/3EP+ztKAYbwjsyhNM8bu2k8gIZQrFJFwN+6s+rZJBfuWZNawtzighWSi1qq\n34Whc2KkFN5UcZP9ToDr7xXDdxqmN2sy/aJRFPeegSrQhNTy0qZpePjDx8mB\nf2OzxFE6IQ9xCN1iX4pSYYFHduoY5j8geybSm64GuYQu9uE5idN6klGRvn9p\nKEC1GTNK0AwdWH7xaRQP2sCbrBuY6vIfLJsEKd8o8AqAhS+okOY/blz73FrA\nFi+a\r\n=D1FU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"5999b789d796414997c21d74517f7dfede6ddeff","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.11","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.11","@storybook/channels":"6.1.11","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.11","@storybook/components":"6.1.11","@storybook/core-events":"6.1.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.11_1607776265219_0.9684227633203837","host":"s3://npm-registry-packages"}},"6.2.0-alpha.7":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.7","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.7","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"cb74d135656ff9401ad30372deaa81a6f64f87ae","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.7.tgz","fileCount":119,"integrity":"sha512-s2mk5LyHnAGZ9KwtcQ++lrOcD7QnWliUgtyVzuijyv70hZkQSjrFChVNBdrcSW/YwEkItvvSqhs3WJJIAUNBUQ==","signatures":[{"sig":"MEUCIHhH/lS+ZRm4hXpncH1XpPVksOhNWdkAYEoO64bnbRkrAiEAiqkZt2iaUAwKZq8Tc/LjeD0qo+SjXBT9y+me1pEUU/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2M3LCRA9TVsSAnZWagAAddkP/0uNGTApz/E3ROikfXjS\niyfUrXCRYv1v5m4s6snAzf9/buo3bScj1ghK3Us6Om08MiWRZDFnA+MnMil3\nRx3UTfVeMSdmlDL/KyfDvezna0kJA3jFzXfrI2dww6vabkevPDM+Op9Ec5EB\n5R7eHSfj5t7MiQsoY9vDIGtwMtHwM9ch3JazPxpMFqM/Vm0BOA6Vx6+s69Va\nshdNnsKF+HSUldwdDKYCsxIz/3jrPWG6ORN2x+wUpODR4F9M8tpPXqvIBxft\nE+pf+Jo8u4sWUCMw7gq1PeU7chJWzB+RbYh02R3jNLB1PB6T013M1FPxbbgI\nNPoQxOd1Ic1y+otduKiSguSVEjFaQrcymbjUab9NrW1oyndOKXuICFBmnh9u\nbdy+NXF5kCTl00hMONYOsbTI9FSJu4yV5BYpWi5E5Nlen2birXlU4PB4Eb/j\nFcVZLXco7i6dOOh96bJAiV7Plc0R3iC1kBo1rxt+UKWyLRiFavlRzck8+wD+\n6sX11oiIgVWPTWF17G+3rN1l7CmBSnuQU2QatSD6f5xxkc6jiSpjcxCowJJc\nymzN8NXcAxWopRZ5U4B0czont3iepnSrm6AIhfmTSOuMNVnCdLjCmC8O/fzR\nZPelHMoTJl4lR4evnG+N8ZHo8iSKtMKwvkwDTY4xfomUxqdUaXoRMDYf4Em5\nXPr7\r\n=VOK/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"ba05f6ae5e8062abee62675cb49dd38e5e3ce742","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.7","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.7","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.7","@storybook/channels":"6.2.0-alpha.7","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.7","@storybook/components":"6.2.0-alpha.7","@storybook/core-events":"6.2.0-alpha.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.7_1608043978608_0.4249155609705979","host":"s3://npm-registry-packages"}},"6.2.0-alpha.8":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.8","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.8","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9cb51e94b52d45c1c87caf5553f5a651fd314e49","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.8.tgz","fileCount":119,"integrity":"sha512-Q4CddQU2wVoiIE8W6T2nHPtN/YikYwK4xA0ABW7mCceGTxPSUXvSbbyvov7XDkavwybPCL4pV/9jAaC9ldjcDA==","signatures":[{"sig":"MEQCIC6BfbEZo1k/Ik9RmtWS37OdC+XCwwJ8AnrCNos68fovAiBaErEuj8/dSqpfNFfYuj/M8qX3og8JxqCjB57id7pzAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2h2CCRA9TVsSAnZWagAAmFwQAIh7bJUJYgaSq/yrzohn\nMWmqgeX96ytaoQkiQH4jIalQ25Yyo6Z++CnKvCVsk8hhqz7hjsNv6WM7l75c\nj4h4C/L7Sn2ysffHC/eKLR7T2LHiCrKOCXhI6vUrSqk4i73wkUC2zWVaxmt/\nNjenq4HSmlP8JOzT6MWxasz2RGtWsNibrDpzevDUxRYEwqjwgMOQ7q862vGS\n6oreqn5SyXhbpRxGe771lqw3Zd7eRhazQCXOD2OIlXTdJtdFphxdJacsgliI\nuOqeVUVIOjL1b/kIQOuQFsWKMY4m3keUe5/6lWBbJPMEZVrhJT2AmQvYhXXH\njrsGvqRZoHi6zpJDumslc70/rrr5ZEqt6fIBbHD97j1im9yOfqHzYJdKbU6F\nrs57thGahjsb6GMKSnTmREKXLr/i9UXkukRhvZyIt/JeXRoFfEc6AznLwQ7F\nrxXeR7pF4qEQUn1hBRDpLmCJF3ucqP4qbzwcgwaP3ZkeL8LdKYtTDk4Daluz\nFcLmZTIRfip4Cxhqfcr1zKzpxNBk3lSTInw8kJGPQZ7GwqHXXCXNdEseL0WO\ntom/NADDaeKMSiwx4BXEImN0JoPT5pioPI6VcXY2TBqhMAMd/yhH0/C6qK8c\nY5F6vzqbLHOOq3fvctUDpdEJrqJocjJCJ4eUJ3myhZfSkBLpHg5hih5neCnf\nDuBS\r\n=tyxR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"c04cdab92d3832a904485f0f885a7faac7ebbf93","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.8","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.8","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.8","@storybook/channels":"6.2.0-alpha.8","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.8","@storybook/components":"6.2.0-alpha.8","@storybook/core-events":"6.2.0-alpha.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.8_1608129922328_0.3094593212062908","host":"s3://npm-registry-packages"}},"6.2.0-alpha.9":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.9","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.9","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a8b33a8dbb793c2fee09db3929fabaefa51ab2c2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.9.tgz","fileCount":119,"integrity":"sha512-dN22tz9Q9Axjoo6fg4y/hAyNXU3jwZHMGbakXRtLbgXHv/PYszp1VED00bgzZtNxR5ILcNOE1/bgd82YG4dGxg==","signatures":[{"sig":"MEQCIEl1CRqJVNGm6J+3nZmLUA3pZXbECtveF2AA1JnRxYl6AiArNvE75r0OlQr85oj/iqjk49KXfqlpQW/z2zBxq8lgtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf3z0/CRA9TVsSAnZWagAAXRQP+QF0o4QURUFHuuS2yABz\nDLt9w9xCSCVFzA3adQMtszMzKhTqZ8B6HwC4W0ipdb8n1ob7LU6K6Dj/ZjKd\nRDc5V7gXUUXRlVY05hDFGhB/h1CKdlSo4xJfsm1HuwY7CZBg8fTrjRgOzE6y\nRraDb4nFUlUSMJCU+omJJ1hnHQwvaFwma/mMaWBSFYp6V7cLy7EExNeC6Dkp\ngSj1XuQFBKmwMBzvJIGKFLQgMsTqoU5W6dw8W/IBr6EoLUxJAccsmrGQJg1N\n5icBX2kWtfRG2ZnUkIGa4GUN12pzoKkN8KFSySDIY+tl8YBmSCrwohC1HP5f\nw4MgUYMmxPhPORDg1hGwt+Yu+I4XVk8RzW+lyyNNYfQmC2hQbhCJB3qvTa60\nhDk5pNMl3z1lqttiNUklnELRcs9nvYE5Wi8tTteD0K7W9gcVQ4TSAhpaqNUG\nJy66qRoPcrCxxI4u9anxBPlGomYUYavhTTKD+vVu99TGxTqYu14YnuDWD431\n42ZEyV4hLPIZIVy6v6RbwPLlYHp6iYMDmCewN1rQAzU3P9AOk3TNOqD5r7e/\nSYm3vL1HJvAnx6+nX17GpVr1OKSJAAGKoAiz4pOpvoziZ8SIXE0W9XgDjV3/\niIm4r4wEOA6PWTGUOx4HMxcl6Tv86Pk1m55hlAng+tBY4GsSuHu0DAoYMtIL\nIxy5\r\n=y2TW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"47341be6aa61d4fb38f2c0e058af32f1acb8e0a7","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.9","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.9","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.9","@storybook/channels":"6.2.0-alpha.9","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.9","@storybook/components":"6.2.0-alpha.9","@storybook/core-events":"6.2.0-alpha.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.9_1608465727012_0.264934808096277","host":"s3://npm-registry-packages"}},"6.2.0-alpha.10":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.10","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.10","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e1d0c023e63339aa9fed95c6e2181d07e00ee9f3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.10.tgz","fileCount":119,"integrity":"sha512-ycAI2OhSiifXfccF4wai0bHvKCV0sWTW2BTZCFyy9sxzNodJYrybTNArhzWtMQUeEIKC953Zdu7BwdfxYuJowQ==","signatures":[{"sig":"MEUCIQDw+UQyUvntUIfELO+te8YpjOGkZi04K4GbhayuR/pT8wIgWAqlH+kJYM+hZQFaCyjrp9LQILPOMcTVzZsaKsoJAXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6VcaCRA9TVsSAnZWagAAMOkP/RlnAyG3K9qfYnSra6Fg\n2gouXLtAvY8/g2PX6P1bIRfgfkIqelbfTXJEC5v6dD1gzbamHLXoZnTH5gOZ\nJayy+Rpf8PL3DcoTOmxWYBgDVG+SPFyDzL5Kz9jMgBySXrDJsSQERhzNM5Rm\nslkhnCmBENduQjgJk+I9QJtrIdZN0vhixcRgAtQ3yFYUKgwcFyhIiTuxlMad\n3oEFUAjc/jbA1EwEDyXjnak5gDh+AoPVuR0QXnXAGK/ObklGUsm0zTb1/hrk\noIUoykm2rC6LBK09jxL3CC6Y4hks5S5S9EJHOyvfCNlYy+6WlZzU5ah0Ba6e\nY9CjOLUCVa9OVrBfQsT2D9e7tZCZEp9A3MwB7w+YiMYkZ/ZBe3Nt2S1X6sCI\nk7gvUsRtLbmx3V4MCxALXcMOz1MjF0kdUv+IGRiF3U2MGfTl6WwDFuXuCVIm\nf2EMoyhVsQUCQMfO+MOunei1T/TeVIFrHkG2GHqgaOqpGQCuZpC8DRrvch8g\nSp2LxwbjV+O5C8GEQAFTJVs5P3n7Zhceb2L5O6MIXr7SMQsCovNTO98kmY7Y\nJ3tAh+BaNvDAars/bby9rKOGGEuyaYxBKi9MLU7WVQEBL8veOpZW0aOtOsjo\nv034Kgvg6H7xJazf/YC/BqEPLIxMo8BeZi75MDMg6X+VoWW0DAKVvsu4GteW\nLqty\r\n=Mb6c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"bd7f2bbed53a0bde622977b2ed6e1addb67d5018","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.10","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.10","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.10","@storybook/channels":"6.2.0-alpha.10","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.10","@storybook/components":"6.2.0-alpha.10","@storybook/core-events":"6.2.0-alpha.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.10_1609127705862_0.7629948407057248","host":"s3://npm-registry-packages"}},"6.2.0-alpha.11":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.11","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.11","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d9296acaa6d2150ca86316fbc7ce3c70a1b55382","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.11.tgz","fileCount":119,"integrity":"sha512-632/lt6AbrCGEGosWxFTAY/6u59o6ggxkJe/wPujCJpSicgqDfdN4mkTRVbSXWWRXStKiSyPSdpdE6wwyQvtRw==","signatures":[{"sig":"MEQCIER3O+drSSKnw319nmXZuwrFvV13zcDLfSfcI93JwlFKAiA4fe+E6dlv6i4N4iMEIDjK3jEuQJSxDWsLo/AZnmy5ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/C3/CRA9TVsSAnZWagAAjzgP/iB38Y9RUsIDlUB6kw7g\nc4nUF/xtdHU4Xq7XeDN/COsyrlKoDU7WCcefmwiWyGnK4XBTSjS88B/d1/VM\ncBDnuw36Em4m5OekVwxphZAbopcnDgg5nwfLUxq3jJGEjvtRmYsk2zMP+C2H\nKVBYmby6Ug9En7F+rfsDhIl80Chv6NyeJa4fTkpbdgGaVGhKUfZGIoyVZo7i\nF6dzebrI/V0LJKoqEqHIhnlCJ4NNO1/xjOrpA995oUFbFvgxsNfPRBnPew5Z\nIoKezeVab/ME3yu3g9fXx0KB5uTE0cEyQGxG9HZlzXUa92t8C9g4zwMHCUCv\nn1EHXELBiD1xXCe6s43MNZ1hkQRFQLJB4u54S4j7X07yM7hcKIFBzdscApRb\n3koCf/lWruFVYy8UZHdyPSQg29RifwX/GkiPtksaAE9aHFQpZ8xR0mgQct4v\nkG5dafiVSdtn8o4ot5a9FNDyh9P/xRj0gFJz+4XQxMSJ/Jngao77wtYU0Jp5\n6tLsgR34QmmNumO/9IDYxtuHNsaab/RP9vhtDBlBEl56Ex1NInaJjF4ZTEPS\n1hbhfLZAPJP2bb5Oky10Hka2DIdo2Kj9HcIgzrWqRE1ivIqe1AePQ1VpSZ41\nKC8Z8OWnFPMuBc5E8jgzyU2i4aRt8eKezpLcSGiKN5HOO+y/Ljx2jSKi7vF4\nhDwE\r\n=10Fa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"9ee9dd1c2f780051dec8d836428a1d03d4779f96","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.11","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.11","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.11","@storybook/channels":"6.2.0-alpha.11","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.11","@storybook/components":"6.2.0-alpha.11","@storybook/core-events":"6.2.0-alpha.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.11_1610362366891_0.021257688548038445","host":"s3://npm-registry-packages"}},"6.2.0-alpha.12":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.12","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f143021a1867a7bc4a2b1757bf5ad2eff34cf3e7","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.12.tgz","fileCount":119,"integrity":"sha512-jMY55WJGMzEfw8QpsQ/aLsUVWO7DeaYpVWC0eq/OwmA9l7IC1zlmoBPgUK1Qx7w+d2VFO1xPwjgDpkxZVW2kEQ==","signatures":[{"sig":"MEUCIQDoztXmz4pP7Hee9151Pa0VHt/Xug3YwHbuX75nBwIDJwIgYc7mDhK7d+7+XO6d0qQM8q2IsxSI+C23x9WQ0wRm3gE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/J31CRA9TVsSAnZWagAA+lsQAJaTcBBZlvukdAVuGeCu\nMdnkk//H9LTiEYPUeEAWCwzThxGfwKlBwm3SC+AfCvoi9AuR4AFLht71XZ7c\nWQnUqcDg5wIbeq73iiecH+RsEfJtjRUlQCwKENR7y0nPbGcmbcQETWqPvBV/\nDY2sdO+L4XrBQdFc+39f2dJyOTp3z16NUX8pLngBga/3M5zh/m+rrGMRxkcX\nmMe7AYOYSi9+CxM/NXnaIG9dlnO9ZPqUbQIc2zhtIZsMOmONECpWHTsMUWVQ\nsmH0ZRfnMaJeA6L1ZG8pytt0hT83y3WSvaXc21ECHuHa3JvbLzl7b+SCcPuo\niEW2noTDtOf//4QIPQLFZ2gqbj549l8ISBM9ndPuCfBahRUwkr/Ho57TDxZs\n2kQTZDgazSobOMlE0/UnLVU5EWJEdZDBHRPciUDuSHeJGd9loi+NcNpjwtHz\n14gIuY+jxq4kjbTndORv8+oM3nYKYYZnBEkprlnpjOZXYVqTPOYDihvq4S06\nr3Z+MPassBL1+Ivsjl+sk6qEl6aUqq6iZcGJyBiQ3vUGiq7R4pTem8JWGrJP\nYESegm/NvKx0beY8Qf3Y4rNR2vI+zSArKqefdplxD5G9qNWZqNL9Q2S3rCe0\nb4vgt8ziwIa49N14aRf8NQDrzoLyK3sC+t/P2PoF8V+j7EqyLs2SHOh8GNPy\n9lK2\r\n=3Uft\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"b362282965d10d670ac1efe10bb3391fbeb0755b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.12","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.12","@storybook/channels":"6.2.0-alpha.12","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.12","@storybook/components":"6.2.0-alpha.12","@storybook/core-events":"6.2.0-alpha.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.12_1610391028889_0.8841729810222343","host":"s3://npm-registry-packages"}},"6.1.12":{"name":"@storybook/addon-knobs","version":"6.1.12","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.12","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e3dfd70f96beadd139ec524675557f17ceec9293","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.12.tgz","fileCount":95,"integrity":"sha512-ZvXeg700PHadlkFVpWU8jHfk1V/SiHE7k8rWMkbnDuplVfGs0QSuC603Qa0ywpNTgxIZukM+AUHtYSFWAFBN5A==","signatures":[{"sig":"MEUCIEfz59nMQ9uBsSgCvhP34RS6KkkdSZa50phf5kOLaWN9AiEAhn1W7B9fPdB1Jkr2jrX1kpj8DeAJjkkbUhruPIYXaMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/OH6CRA9TVsSAnZWagAAp2UQAJFNov5d/W0d64bVvGRa\nKrhUUAA9la1n+u4MuTshYX6gPlNbNAjFdxhez2d40NIxngbzRcEagC7WNIh2\ng3Y+oRijHSEowYv6k+DAvFETVlMRcKkgM+16LevDlMJrYZSzwE298Vgs12zQ\nHCfRZidwzy7AfYU9b7mJ5fsK9m5HHr9bQo+M8kuZSzWkO/ubtWkUeIH/qOZd\nnaui0xmgUvORyT/iEFhtR0jDXOCBfhX3dugPAX6VbaguoDTCY4s13IoEjQLv\nusbUtU/EsTeEZRSWGk2lRKo0XrUuF3/jTQRO5poBmLOz8kAQNI3WEt49CmbZ\n+PlYbgIB0EnGpBhdmNPLp4iCTSme0iZU3uaxsbbfta0zXzEVtCnYdANUElmR\ns+iHaw1D608ZyumexQuTXfOMGWmHHQwj2/J8q7BtAZftPiipybmwivfTlgjG\nk4m4BJMA+5nYYuwPVyxCJEjXF06jbL1IUiPpECMpWYNor9KPPEQASgVgv4iu\nNmZwdnnWY+wCfySqszstdAT7zy5DExTCsMGyCGep27/F18G3mjzsis8X2s8f\n+r/0kXgL5j6kpK8QskmiiJlribOxIOTAKcsfhZr/2UY1UhYp7D+02SkC3KVG\nsb3FQ7MlwicEOkCzMlCfi73Xk171JGiHw+a+nQt/NGjbDtbN6rFv3EZC9hNb\nDxQg\r\n=ZYMA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"9c114af32618d516ae9e6f73700fbb79273c95e2","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.12","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.12","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.12","@storybook/channels":"6.1.12","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.12","@storybook/components":"6.1.12","@storybook/core-events":"6.1.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.12_1610408442327_0.5545170418227687","host":"s3://npm-registry-packages"}},"6.1.14":{"name":"@storybook/addon-knobs","version":"6.1.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.14","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"748a66eff822189c016e7024129637932020bf81","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.14.tgz","fileCount":95,"integrity":"sha512-Zyd4hWbV8OpsC3Cllmz4kxrGgoSGR6fDjaN1rYTZplUDf0h3dVWPEd/RhI3iU7umE5FqrFuQyadunHwuGXh3OA==","signatures":[{"sig":"MEUCIQDj/EpPlvAsQ/DRiyLiB4HUHCrboJcPvX+f0xu8hHA1VgIgHX+UuUirT+bG1ZwW60tO/hseJvkdfgXCpt43KdIqod8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/YhjCRA9TVsSAnZWagAA1RUQAJRf3mF/jVpfySEkmb8B\nGktTE/0/Hj50iIw5xZdRvViA/4tTXlFWRtNBDdo412K0pl4IrXwgn5iHIOfy\nv+DvWm/vQ57A5UkJdDhvndZuBk6oBs8DXQGxsDJwh42vxUi5eol6sN1Lm9ee\nrhE1zaKSp39jemo8/1HgsdXdOSroLV/dkaaw0kouSnjXs3NZsKfL35zAXgEh\nNyRAPM46oC3yPomVOAIDxj6nz3hRH4tA3YasYHhJEisSY9WfESgg47/BlBzs\nVGeX9xQnOCC4T7VM8BbkoNt4wn/kAE77OJ/XloOS8tCLasODk0rQnYuB0zu2\nwXtEv+g8eXAa7Ck3smwTa4WVmLTfEtN3mYTEKJXh2Mz+JmO9TaAusU9qLIqo\nApfHAL/q2RaDipjYxuuxqX24CDEdHQ9husAUDb0tNRXZDRFWj+6L1jTlLSvY\npbmdAWXDzwU/H3FVe+bdc48Z69sahAxXRXg1pfrOoJMA/wqDa4/kl3Y+wDjl\n9AxKnCvoCXN21ca0nTqs1iI+bEd5UISFerBhRCGmOulRALAkdkkrJECmhG4d\ne/h1hbd3oooh2iNYDmUq6D7S42VRa9ITg+Nwzims9yK+kzy/EJUVDfUfJmXc\nJiiJS6bQ7wP2oxODD/VGVdoSbTk3z51zl2sirbS9ZATKy+uS6DiVxHaSIDQP\nMcIX\r\n=h7eY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"0ac0ec9ee30df2cb78de2178fda66f37a3c75081","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.14","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.14","@storybook/channels":"6.1.14","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.14","@storybook/components":"6.1.14","@storybook/core-events":"6.1.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.14_1610451042823_0.2918159733214847","host":"s3://npm-registry-packages"}},"6.2.0-alpha.13":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.13","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.13","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e956295a618138bd346db0e210bdd7500571c4c4","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.13.tgz","fileCount":119,"integrity":"sha512-BFNMT8v8kYnNM4TkAZGiFJPZ2X8Grf3c6gMUn8fXXDx3e31wu6JOe+UT7jUz0N4DyCy3y+Wtre1XaDhFm1He2Q==","signatures":[{"sig":"MEQCIEHClJ/b+1qe8IDzp0dJyfgO6E1qn/DB+ehOv9GezNLeAiAM68vDYR71L1Th3d8sITjxUQ74ORJWBvhma3wMn1e8kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/se1CRA9TVsSAnZWagAATxgP/0pJYo0vG9Nvt5qmHf5d\nkU2in/xAlqdkTio7irx8WZdP0VLTpOSjT+k9PwcmPCBvi2BvhO1ya6/ZtIsk\nBBzDP6YzDkA5n1Qb+7ET5IQ7JlA2X3QMCCh9BI/T6SlBihQuxoeSrP9wCZ7Z\nlAeg70WBLwYKRvKvrJ7M7zz6LFxBtRWcwTZy88mVRnPKckWcWapD1Ecf+NmR\nSEWV4O73g0n0lnXVkx16swyKJdy+cplW8zpZTb6eevBe/HDSIPMTaP+EKoo2\nbZeZPFXdH+7VY4B72WlDe8r1JZ1eLgam4TDuU8X+zL8a1gNs4p5pPIwuO34Z\nsuvk5EjujoOIXSM2VXP6C5P+s5V+c6daV0GqDbScbmVwxPCg6AP1sjvxYbii\nnjg7wifkBeE5KcZ1mrthHvZStUt/MFHnmBDo1jCrBY7GCk7gjO159opcN846\njcCXM/9xdOfg/Pa1dZK2dfaf4WakMVCFo0AiWEAE0ZIluFzzqvCjqzV4gptA\nGVwE7XgOJqIvNmhezgoUqNGWbjKou3zEPQ7roDAtuDZ1O03E9swC9t21F3y5\nnycgH4v7lBg/sHrKxk/I6fqps7qhRra/5NgbKCkwlddpjDpnnC2+U2Y3gqFh\nl6u2tyc4L0xb6yb42OE4nhOJNK7GzTJ/NXQI5IKNV5sPPvDJpUqDf3b7Ro+8\nBZdK\r\n=oJye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"9de487fa7b79cef77fd8de0d0357e8cf962dc776","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.13","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.13","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.13","@storybook/channels":"6.2.0-alpha.13","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.13","@storybook/components":"6.2.0-alpha.13","@storybook/core-events":"6.2.0-alpha.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.13_1610532789281_0.22916209912023344","host":"s3://npm-registry-packages"}},"6.2.0-alpha.14":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.14","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.14","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"946e113b4ec2348e27eb9fe8f86c2816858ad784","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.14.tgz","fileCount":119,"integrity":"sha512-rbIH0Q2G9IiyXKur98a6WRtVqUx5ZB625oHJUaqY2Z2BgBI4hGNED5IDQ32BJ9uPtsooD6uJ2Fh+TEP4BgC/lg==","signatures":[{"sig":"MEYCIQCcDYYecEySfbC0+77KkPHOJQpk79hrTQ6b2E3TjPt6oAIhAMQ9/IMeqVfMh8Q1FGZOTsTfyAEZvIx4xYY/d7BWQRKf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4//CRA9TVsSAnZWagAAWOkP/0HvVokI3xx3p/2CJwnH\n01i8ots23LfUfZuCPsu2J+QdhWm60SfDnfEQnc5rHuLKL/Vu19Oi2Vw3SlCG\nOTico4UuiX721px4Ps9wpVM3YDiRyZrmAESmbpr6a5C4I3yTRgIBo4denEW7\nbSue6WWgKecgIlkOu3cUsRX4FUUvaxg0Gz6TUWLv4APRUQY/vkHkcaO2QAYz\nFE49my/j+zRfeh/xJd2PrHx5E3NLToV3giE8bs33UYhtEpHMa7c0Wtc0hVZP\n91bSysO/IUUcbYMqNPo31jNJyNoi9Fs9FVnlwAx7UNj4VYP6+n6+umNY9syE\nwpHzckqlX9J/0aWzNVZEbClEpxUCbGp3Vd+g20Vnsli+2YIO5f4zSQXEt5ut\n9bLCIFeK/SeO2IVs51YJnPnxmRB9MnhXSkBDJ/SVk3FOer2bK2OhXAixrFCT\nXgo8UbfmB9jLRISJwiHHvZk+SSrSa03tfOHj9yRWRyOiEbQjkJCU4HzbxTp5\nn3U+WsZEC8DBUKDIuZWyI+6fKjbma+1RgtXIBrT0fzjUM6R2XGAGVsRJNGRZ\nIhIb35cDOJyMdE+HIxC5OEV3bEMSjI0CRJuf/hz+OYsnfKdVSFc+majMIvDf\n6f85ZcgqSEXIiUv/sDWOrWMdI3XfPX1s9gyc9RYZTb+D0PDGgtCw1EEZfvg1\nqOYS\r\n=S4HZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"b2ef49e6665fc41eac369eb7492bde8e3bd8100b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.2.0-alpha.14","fast-deep-equal":"^3.1.1","@storybook/addons":"6.2.0-alpha.14","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.2.0-alpha.14","@storybook/channels":"6.2.0-alpha.14","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.14","@storybook/components":"6.2.0-alpha.14","@storybook/core-events":"6.2.0-alpha.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.14_1610584062820_0.0018034608076420433","host":"s3://npm-registry-packages"}},"6.2.0-alpha.15":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.15","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e2a185cd3ae23f63a1f3b31b8529e6ad1464877f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.15.tgz","fileCount":119,"integrity":"sha512-VnKyjT900gj3fUWzIz4gJyJjYl2zHVf2YLdKq9Vd+vZQKPas+lqmmj6LHip9FVWjyWXIY3rVRt2V/QpSlSBeog==","signatures":[{"sig":"MEUCIFCqxBhKKgPJJhFUwbgZ9yKsH3lXR669ZbFzPd/YCLBTAiEAtmIMhQ7WC2gHljLfwFDkZzZ8q6WtL69Blqnn5GFGA94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgATYJCRA9TVsSAnZWagAAH3kP/ifeG/MyApWCxUZNvBq5\nYZPj6lhwpe1b8crN+vP9A/VcnknjF6ii7bZtAkV6So90WCJ1fv7eA+aH5xG6\nF0ifA4VRVeHkZloSvHBTvIeTJabEUVQvp2iNPPpgZq/5G+B5w1P+nWCZSjnT\n+lFH5C2pKtrRZmDnuTKScfLqt/T2A9GeDn0/nZdjKtYxDCf2ytPVsibvnW8M\n66Cenhul+HqXPZO3RxAS2oHQtR9BvYFtsSlTZpnuHN8HJJvMdx0U3pBpU9bH\nb/S689jsbkrlQHfWjGOv9Vg9XyBhvaMbazBOMwGXne6uoB2Ia/00A1cgF51l\nnN5GkbhrNoz1J6m722raDBVHhQBdaoz0V/jNgQh4DOjO/ns5W2mW3h5teQph\nb9ybX86EcK1l6c5rDiI7zdtqNiSiPfitrY0+41IFzULAslKpco5+Uejjb6Ek\ndfjZhQyPuGOGxB+y5wiknbPX87G34yhujRQBEle9GviD9dyruI4EK5de+4o7\n1NFcSIoUWAiUuMj1CxilN/kbem6dUn/X+jbZ9dya+ENXYx9cmqrtE3xOuF06\nMLOAmtc3+u6aF5JO0K9aw6uk1GcP62s75Ac5xAL4TUygn1Ft+DRHoG2SN9y/\n8s7FJ/B5wAGp+IcGxrqfwhysVcXzHBN9m+XRLaqEtVk1jYmRhR3qnleCcEss\nyQM0\r\n=NNby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"9819dbdf5791d8283f90be6ab73057d10d35ef25","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.15","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.15","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.15","@storybook/channels":"6.2.0-alpha.15","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.15","@storybook/components":"6.2.0-alpha.15","@storybook/core-events":"6.2.0-alpha.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.15_1610692105265_0.9060693240363971","host":"s3://npm-registry-packages"}},"6.2.0-alpha.16":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.16","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.16","maintainers":[{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d175d751a02bd62c0378e23482722a45bafdb859","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.16.tgz","fileCount":119,"integrity":"sha512-1GgrNhmU+85hti0PZckH5A88EkZMzrTMfZMv1yCCDdeRum3dEuvvlk2L0YU1khx4NgcGchSi53Hp/EmZ+f4tOw==","signatures":[{"sig":"MEYCIQCBSs79IDwO7/lARmBB/Zb7jV8kTMcGp/u5yDBNxT0baQIhANtYZRhB2yVtAHy/H2Dge9a55IJWKSTfQoF4cLWg6T/b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAjmZCRA9TVsSAnZWagAAL2oP/RIBg0KAGmQCEr4ZKdnc\nicM5aNzWvT8xVRroy7kbm3W5ypLFS2bmsQNozV7WWMKXAG+JbzqW6L/LApVd\n3Drb6QpS0uQN9BmOZp1ZRv110uE/hucBEGA5Q51EfGAYDGBYh+WhQ9oHpK8h\nbFtgkLlsjNRuUuTdfsoCSj0PPm6L/pnfsJRF2IIdJivyz9LV6lT0lFAlhmDm\neP6v3PPASDQpCo4qZphRwW2ScEEwFmngO3RlkKOQY55TtSO9X987KV/t4Alb\nbgnVfAq7ld5uqTg3+Lc2YjIZw9Kr8TXzk26k4NO5A8hF82GqLY7khJHCE9vt\nejww3EI46ptaW0eBSKu7tp+WNOMgUEC9mEYYiN3XRzKKuy+mvLYVn1Ys9HAs\nuXdpPDlPcw0vVO4ZnecLSwDUIS1LMbTIgjHAj9UY6huwIT9Se4PtrvXVPvLo\niCn7zGHJ1UUidJcq3cil0CQr6GTy40VVDR1uFFyVqthSG881I93heSFhcaq9\nZcxHOy6XOotR0oUj4RdHjfNhSqiRis6VBMy7vIWjfhpZvJ+M8sKq7fGqCjpE\nW9UlaJE+1hwKp5HEth/PLtSUeHZAH+tpOSEv7wJTsiehkgDPxh6PZjtvPjRo\nfkgLuyJV1HRxXajXZpQtJvtY0TS9NlannbD2CdjGCdCXHUCTyrp9IyKzF5Y3\nUZsf\r\n=NgMx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"2cc64efa1dcb90b72806d4c88c295f38dd92e427","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.16","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.16","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.16","@storybook/channels":"6.2.0-alpha.16","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.16","@storybook/components":"6.2.0-alpha.16","@storybook/core-events":"6.2.0-alpha.16","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.16_1610758552898_0.41853817829969064","host":"s3://npm-registry-packages"}},"6.2.0-alpha.17":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.17","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"cb19cef25f99201e19c30716f397694f1903b516","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.17.tgz","fileCount":119,"integrity":"sha512-eFVQOrWIMd4j7d4/d9okBHq1HnaiS1iVoBNBU6GVj5I1DiSAZnStAqAdHGLu6VG/zLbwMZTrxvVC37GSt519HA==","signatures":[{"sig":"MEYCIQC4LAPVm2ansTqSk1ek4+/ez7cNFQ4kq/LG6+P1DUiwvAIhAM9DtS7rDCRd3UOSrsXA42kwBrAfoCkmYe8sIUim0nUE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCld9CRA9TVsSAnZWagAAzRAP/RyVJINI1xFDiqtuhus4\nQHq8PK2lXi1ltSxV9qGS7Sus2sXPZGfGwvvaWhowpSPkqtHNMThmDuu7zcCo\nKvaCDYx1bqr5kTfizZJVGNSCCgvaFHerokUHw+b54TNZoxp9ucFR9xT9Piph\n/got0LeRfpJhbtqKSBURMMGokVFkbDESb15zyWNXae8PORTXs3CZMuBs6tJu\nGj68C6oEDSxf7rapcZjjEggoSQyfExd+G0IrGAqYwFFHDXUuf8dMG5sXz/gW\nkD+9SE0ui0HntOQs1r1uw3ThsF68zDZxrSstEmw+RBQ8r0uGmr7lVCePYoBU\nAG6T5HMKg5ZdqL8zE3mRh2bAuV8+wrQlDy7B8AiIWEW4XS6SU5wW2UdkU+2x\nles6YdSmbcjE6V77/OHQRyl47xuatuU+DL8wBnDnHJyR3vb8PmxgYojiQTkd\npFveXaslrQKVSWRVE7Y1bHd41KGe7tNyJ0zDJZO6OZ6m7tgXIYIi6Y2NCxjE\ni/m1L0yrzJnQNf3RN+swLVrkAsHf9kNFlQQUV2WfFIvyaS2zBzJF+a+oBZRu\noSGo5vQs2LIq/WstNNccbKu6nxsj9Dc71uBq+pZoAtozYaR8CKqZirO6Sn76\ndzPnZRgGMQNAzXGQ4ylsACezhvuyp1oENjmRqJkm9cBxgKOCCSvWK/1EomKm\nufoX\r\n=W+lq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"218f33702f39ae55ce04dc8f51e9ffc8a7306d9b","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.17","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.17","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.17","@storybook/channels":"6.2.0-alpha.17","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.17","@storybook/components":"6.2.0-alpha.17","@storybook/core-events":"6.2.0-alpha.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.17_1611290493459_0.09102652085514329","host":"s3://npm-registry-packages"}},"6.2.0-alpha.18":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.18","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"bb0468d9efd13549be3895b1b639885978710fa1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.18.tgz","fileCount":119,"integrity":"sha512-qrbOLmdoAUTsMQgnrWV1NuVYkRfPDl4n4BbMi9fvfEmGQAVtVs6XqlUpp2PiXY+dww13VLy8wBvj0jLN1SMiuA==","signatures":[{"sig":"MEYCIQCm0uX+/tasKm4/21/nd+sYOcfk3+bREjm/2l//f0wJZQIhAPGUYavsfVLNM7upVROQTX4sxma3eiHMIvOxyR13R7dt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCtHRCRA9TVsSAnZWagAAKh0P/3ISKWWFxMRIbfd4eY44\nOLwclCZpSkNSNrROlVfwCv+M5tk8lCTfXKdly4DRzxd9H9TL8YiYMZkw/Aem\ngf3if6TYNGqAwqMP7LziGwPv+2/0f5RAcOWYxtoluFMXo4NUNN2mNAiSS63E\nCo4AU3U8+Nqq0WqP6l79UsHUg5tEx0gr/v17Nnl+IRTiMr5viiqzAiIxuG6S\nJhhhhZr2X+Rtmxytf6xOEHOpTPnr0ZBxkXHBwSjvE3pJkwXCmCeNoqteC7P6\nip0OIOQQ/w8l6e7Oc3kNJfQP7Bc7zm6RM6q0VgdRfy9RDnHS9uFLz3T9hDt5\nLQtZUz4myvG2rqQdf+/q91TWaTfa7+EyamAW7W2Q6L/8ldNLEAk3oeOCX4H0\nT42m5wQ7nZ4xs2zVvNOpjxggik8GxUFjcngXZCukCqyZxtlCYLcBLFNmutAv\nOirXnbsyTLmg0nd3ezX0Mima+z77ELCRySntRkABm8FSCmgQys3se9KA7TFj\nbWQIHqV1OllZgyUTY5X/4WSRX61LC40LQisH4pBL3XR2W1mqCLYlDqu3eFF+\npwHCFr+qV3vsbdqMYNwGpX5uNsHiSUwqBMbUb/G6KJaVCPjgHC6HYs/SP4vS\njbPmaP/CT2S4wszt6GYI2brYcbjCR8D69arFdnQZkIsMVw3x7Z574ERa0GXm\nEiiU\r\n=rpqA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"ed19e4b88b0fbc36d10379149b7c98194254897e","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.18","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.18","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.18","@storybook/channels":"6.2.0-alpha.18","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.18","@storybook/components":"6.2.0-alpha.18","@storybook/core-events":"6.2.0-alpha.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.18_1611321808709_0.7755993324828183","host":"s3://npm-registry-packages"}},"6.1.15":{"name":"@storybook/addon-knobs","version":"6.1.15","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.15","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8f12fd5da15c0a00993dbe837b971a4867339de2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.15.tgz","fileCount":95,"integrity":"sha512-eiwav0/9fGrChwAs7yTi13W1mR9g+vYtkQaCKQFF2VIarY9mFH0gKZvLDSs+SH2wyPMp1JOROu8ef39B8Cyj4A==","signatures":[{"sig":"MEQCIGS26yxu1A378sWywDc2gw7l6hs2keeOSvgzPXd/k9HgAiAtHtXe93banKWIQ5cWJUps7S8mCkJEtMEgKi3wn5cYAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCuHnCRA9TVsSAnZWagAAc2QQAICASU9dE+mhN4kVENqv\nQyFU2PFsoc+mRq5RvdCzXSh/QqqSulvIMy4gUQ5XTZ4UDBNyzfiemk3K66dx\nxHAs/CbQyB2OLwmg0yp79LVnijpu0BTPGzAHulxkYvtIYbtrqllwdPpfn9Wz\nm9Pil+zd/J/9jfuZrqUGNYcXDCYWk4tGA1g3KN9gBvcKGdKMl2X+1W2Hro9g\n/vyS/XQW+soLyf8Q3xR06K9ANn+Y/dyTZSydWsrsPe7dVwId+g3FKZhM/OkD\ne9cwUhabyU5/KdvelvjbvdD8wI7Mq6r+xD1XLBkisD1nS/HagCsOklPXNH/A\nCSbib9Qbqakkztnm1zw+gJuEShFFfw8TurRa8FrgO/Hrk40qpYoCLlZqdqq/\nWWzvtkNpIopBEmH0EkNBtMI+pvSprnu3aGRnur5BsBJ6N+AYP3EezJfQ8ty6\nfK4O4YncQHl7SJi9uJMuGRPQnFPxk0l1ptG45jLCI9tynE2HiQUln6QMPAi2\n7FHLSzlWD+cPA9t4Jz1OaTENi43/Nz7fXp1Ir7O7IABcXTlngQlG/L6VPGlX\n1f7X0bt3ZaVbIzed5EdVMwh+JNqHqp68Og3cQHp3cjnPKfjFLrtqCJPDf4rt\n8/CuDLvssKzt7Yt0WmWQjV2RYR9d5zDzwEn2AApHs0ruwe/aB1pucNUrdAL9\n1fQc\r\n=yPTt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"ecd471c96b1ef2e8f8b7a07a137f391bb445bda9","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.15","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.15","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.15","@storybook/channels":"6.1.15","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.15","@storybook/components":"6.1.15","@storybook/core-events":"6.1.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.15_1611325926499_0.5803568312762701","host":"s3://npm-registry-packages"}},"6.2.0-alpha.19":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.19","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e466a82f7d204f2bb046fd28089f988b6ae6ca8e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.19.tgz","fileCount":119,"integrity":"sha512-Yx21BAuqK+A2sc5VOwoO80bMBHA2R1zeBek928iDDfepKRAs35gB0RTWTPwV8ib9cvs31X/0SFy09xT4ep5lqg==","signatures":[{"sig":"MEQCICOOrEaZK2pVRt2nrBUg1xEp5M3pE9lxpohPWNkxWeKIAiA0m+kKPSXtd8XaFJsfnqFbqqmCWTrlO9uVdUXVe1yfvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgE1w3CRA9TVsSAnZWagAAt0oQAJAn5/sG1ABzIYLJYKeh\nzZ1OA5aDcK1lNLTvKTkmDiSsWMwJGuRHybyJWX8aMwibniEf/9GFp0rVTc+y\n+CsptR5vU80iarqqpwB/54sLN7Gv4vB9zKXNlqVY/ygLW0zlU5a4Z8rZ2iu4\n0y0BsJhR8CG7doI/QTjANGWbQji2QCKfio5xqW0ZvLmYQ09CL2R4SmYnlkaV\nhCYKV2NaMq5AHgmPyxR3yFccq8jMxe2MpuUcO5GIQ+3TJEiW/XQP5M0JzPVv\nePFBrB9m3Bi8aL9TS9oMsyQa/1IzGG475vPEcrgM02Dgyb1PzkNKgyBebvWa\n5GKxWlftJYz93xwrFc7lSIHvS26rG0usW9+7EeELVIIrUP0BOVRm2oaOLyEd\nPCWsqAfB7xyAs/DaxBU1VK1eA13dU3edlG3ZxI1SCccJRTCPuchFpYXbbPnM\n3WAja2/MGrinbBlJ1rgVPojIC7lLQEySHD3jI9Q+P/AW8Y/dBxPcCAfhZ+49\nvqHx/obj3eqaOrAyFpYwPR/bqTiYfuK6Q7pXFpgtO+EJcIS0/yPyE2POezci\naGFH24F89ixzjgl1aE74hE7Wa4KEc7OjT5TFsNG6YBVRg22QfGGZO0JVwq3H\n4uv6BVWbB5k1MPvWsWTXZ06hCGT8q7DoN07U2V9CM8ByUek4E1mVGopO/rR/\npJ86\r\n=EFud\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"2a8f070c0c3ba56dc820cb04e96d9bf3f47a6a23","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.19","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.19","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.19","@storybook/channels":"6.2.0-alpha.19","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.19","@storybook/components":"6.2.0-alpha.19","@storybook/core-events":"6.2.0-alpha.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.19_1611881526685_0.30752874311833","host":"s3://npm-registry-packages"}},"6.2.0-alpha.20":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.20","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"cb3eb277bdd2c378708e3db20de77ff19efd898e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.20.tgz","fileCount":119,"integrity":"sha512-xlInMgGXGN7L2+4ugU3oRc8ts5kNwpmpjTMxYT62AULFy38b7pZ9nlDxpecsK1dybUu7mR6OAICOAFLhRAFtRg==","signatures":[{"sig":"MEUCIE1IU8sf6F4JqAA9S7TiS1vpKE9od8pXAT4jo/0B0TgFAiEAq4VPAU8crBNoP8sv1mhSbOGBAmqRPGaAT7iukr0EuCQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGK6fCRA9TVsSAnZWagAA/xkP/08Yr1aEMraP+Lhqe0XD\niqFipN4SXxVaqh/0378wSoLc8MA9v/soAyJRUg1hgAeZbyQG853DJSrZAvdS\nnnIyJZkHCbWu2Iy5qNF/WDyV/kHKtj9k3A8MGerL0/ENNbmfCXjXziXYq/5i\nA6YnJTi+nTGsQ0/dFhTVAaEfX8pYQBm0tDIGDUST+L+5cDbOA/JDl/RKzHpo\nG0ed4YkzU8qhfip4tQEByJzU0lN9hlVVgkIhJv2Hm8CEdfS++XWxhdJFG1MJ\nfdicW+1J79oK6g0J5LKDz4DVjoNynO8CqzbY/sXs64gG2e6Is9oFRd5SSAzb\n4a6NN19GU/0E2ymzP79P+mYjiZBnMa9OLFGfjcfvUFai80zPc1ZEgAGeulec\n4i51f6s2apIwNkjKyAy/LmgJPSEV44LwtXCOmN/Rsl5b1rKVr9H8KQVg7GFC\nxRQyQuYAYHQDsp3/lI3UX+95WZ+x5BFqMjLF8KxbhCHXlTzg00x4/ufqQMJC\nJhrMnOqJx4JKvW4esIBYYGgIvYUeAJE87XfokJ1/A2jgJT4SzwU2qKHFRnKP\niNn1EbSPoB1XlUvIi/8BHON9Yb1j57v6P2Tyjk7iYdv+SFK7wNuiVC6tnLGA\nhix/QE3LCIpguJhdxeiQtTF+v/zsyh1rrYzPTCg7REdMvaJ5nzC5J+7H3rYf\nlFg4\r\n=tVRO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"20db16edcd0c76c54f0d80970a288ec94ebd19e6","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.20","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.20","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.20","@storybook/channels":"6.2.0-alpha.20","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.20","@storybook/components":"6.2.0-alpha.20","@storybook/core-events":"6.2.0-alpha.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.20_1612230302851_0.5777531112633512","host":"s3://npm-registry-packages"}},"6.1.16":{"name":"@storybook/addon-knobs","version":"6.1.16","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.16","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6dbf0290606b3284b221ca3619c748725649e827","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.16.tgz","fileCount":95,"integrity":"sha512-e2clvHSMFLZYibvYvFgPm9Oar9Rwt9glCQnC3GHxpOdQbcekkt2pF2/XLDLZxDaeSrmEWEiKC8NHvqq1qz9arQ==","signatures":[{"sig":"MEUCIBY//qqR2hhcDvW/0XYd9I7s1uK78Z3HOSfHWToNrA+bAiEA/Efxk2EcO+w2Dc+TrzILaL1z+nJqaa1ggkkymdIG33s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGLdZCRA9TVsSAnZWagAA0akP/Rjg2bYTZF2u9aPZ8bHr\nAyjKGlV3hZGFRkKOsZx7+yeMGupozkJ4xW2N7wQ7cwTBAWIMEIrvqv7Yhcsy\nEWcIQwXZn8NZRYHspzGHdv/wof5uuhUJmLpqgYEmvSoa8SMrsh9TlgaYahdF\n2JroqBdQc+Why828fdmDJEmdnAsQ2Oo+AU/AZbcXrlD8S+AvuOcRCRtySjdR\nGWN5BQQkfvTCP/gADRSIIXt9LtOFKUKA5rBaIxuEDlgnilnwLMMNafVSm7p+\nH03BsBjUf1yOMYx6mk9/NRIT0byrSFsmKEhHyAm9+CMahndSbul5FRTSXXQ4\nOJGlNnrSp8ko6BcW+YcwHnoCa510578eO11+pOhCMYWRao4+/1pwmVVEmLiD\nZB/lqzfM3tkppXMx8tHqsA3dBJUaexEBdGgNBfVEQiz58hI8Yxb8Uyl/SA+R\ncNZxWI05PD1Tshy8+U+Ou1SgnOUif/JbJ2binraDj/n9jFbEMHz5YdGyKIFi\nDmQq/LNo54LqhpGIPl2tN3l4qWrdJoEOS+n97abt2g+NVdjAoxLbkVRqAuuE\n6xpEgSxWNlazkY+gOxrNiL+NsAlDsTGBvNaS5DvFacDyJ8GrCEe7cuvpz4Sl\nUFdu7tpAo1YpM+j4EZASS7OeNccUTxCCxNq2U7JRyJLk1LUd4fmPSTTatXwr\nCfQh\r\n=T9Ta\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"af79329c2171b7cef7a0de9e946b993af3f78e2c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.16","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.16","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.16","@storybook/channels":"6.1.16","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.16","@storybook/components":"6.1.16","@storybook/core-events":"6.1.16","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.16_1612232536064_0.5164753291245692","host":"s3://npm-registry-packages"}},"6.2.0-alpha.21":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.21","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d36f4103923da07b08b14a4477e4c6838fb48c1e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.21.tgz","fileCount":119,"integrity":"sha512-QwjLZUy8caLzHDEKaWHSlsushMZXdUSdUy4Xpp1PwPZ54VkfIA+nLeoFMVRQ/l8BHeOkctAogA3nMhOc7w5iTQ==","signatures":[{"sig":"MEUCIAN1m6nGsZjuLpbuqGjl0wiNRxlBAc9lIuPNiW00DydmAiEAznUqBSYSxLFf8JuiJWhGuqQCKDPdHoNPQrdNk0vyZ7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG6xkCRA9TVsSAnZWagAAQ8UP+wbeNkeTYJNGDfbLSbVe\noN4OeFV1lwYa0xQMcuxIjPBiULMBTLJgDEuBnkqh9ca0MOMoZV2YWb/Pg0Mx\n8BFWiNzhfwkgLvL1Mc+FKyK8KuVkRYOQH5qKKCBuVamo99ZwRG6GbFECtgRl\nLQhNrOQMO4l7ODYWym3LJp4NfxeJdoafIMg9wCJn+wb7SM6N+waqBx5MOTJJ\n7l9V6712Mp1MnmN/tDTWbDoPvenzEvGnfUmshOexNxGqsRm8LoGHiTjQ2Aik\nNUiTaTA5uscuAp9b6eoHy77LtPJqXIpOBtkA3xVjgqMDEYypA5HpGcyvKdLD\nXrNzH3a+hTFjlX4onlZ9UpVZsPPrCIGdAFBwH7DjlZBi4ybGer0ismxsgTCI\noaTP+QrIUNzmUi4LUYADkMR9z3petK4njlbTbKkNPJTh9LWYLAcxuibobVy4\nVe4sYDT/jJkPMNjHU6PPcj1o0LLnDkTR0YnL4asWTV8zYatUHxY3NwtSxcFX\neOD1vDB9hPiUEU+YPTQ4SLQAQrVQe3OZw70d+/9Xr3oOvx+hEwQVrEhaLVz2\nQM9pp338ZHuE9X4V2KeywXGxBqpmb89FevNKMREQIalViPf1BZuogDsIhzmL\nP9YqKGfXg6F/DA8Gf8b7KtxMR4KEIuz4Emri96TGafzP2/XjMXBe9LIYWuA+\nr8Qj\r\n=1+Wz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"881800fbc3d071d64ef6850473aedb2f57763b69","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.21","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.21","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.21","@storybook/channels":"6.2.0-alpha.21","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.21","@storybook/components":"6.2.0-alpha.21","@storybook/core-events":"6.2.0-alpha.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.21_1612426339996_0.20864982345732885","host":"s3://npm-registry-packages"}},"6.1.17":{"name":"@storybook/addon-knobs","version":"6.1.17","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.17","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c7cdd5be813c2b80ce7f464eabf8ceb06486e82d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.17.tgz","fileCount":95,"integrity":"sha512-WUkoGtHhXIurXFQybsMXZaphAtCNclZjZHvji8O5eg+ahx7pIM/Wldh3uJwOdOkW5LHxT76hLxPvuXvOEysnbw==","signatures":[{"sig":"MEUCIGMC31sMUcxhGuQHNEiEa8UDQDe7RJCBPVxel60UG5lqAiEA8ERytOK9zghmfIzPV9fO6YVuwEgmDqpowDqZ3/eo9bw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHBpmCRA9TVsSAnZWagAAjywP/3HnvvmvRHFuVTKEPfVl\n2zrDgY7hN/mtDR1FkZ6rWT+pW/0pGuoHjTORDlTme3v1tyz1KgojVmZ09flx\nY5KF7uSnVpsGF0YBOFMIjv0jToaUCzkQayKZjb2g3xnVPLgijkK+J+MOt6mr\nkwoHzIP4HC5edlHdFqrXRrwJckRF/XKcClLgH9Z+I8nQ3QXvuFzsW3Refbkk\nfN/hPDFBNRa9j90WVwoQ6fDQrKyO4o0rpgSt/B5YlsgTgopj9Xmc0icK6prO\nq3IZKZOtiZhPqVeGOZnWu7ixC3bHVYkphTes4u9kUWaywaNMMBp984XDqgIH\nzVgrF9x6Me8MeqSbetmUFCKggx8BXULC9faKTRw00xfZP6Tl58DRWSH3OGjO\nPDadbNRwWvojLJnhIRjiIvR3GBpBh/7WnkFvdFkDva0HkjhzMVPSpACsp+IG\nQ1d4VZN98cfjOb9GZcSwmTz7+ri7G0oAlauFaeb1WeyCW2Au49vYNjUPkkps\n922c56XtZxclcjKWd+NhhBM2nMXlDJ1V+EZMbjPhcn/3R3iQ7sP4wGk+aQtI\nNXWynumRSHqkGWAJ7ghUQ03HvwF0/0rYTZ5ozueE+32LhdfaxiCAj9QUbF8I\nVjdIO8KD7wg7Y4yHVh1lR+J9ptpep3yrZmv4em6rJgxs5PGJvluQauGGMOl3\nh9oh\r\n=vgJy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"c5f036719ab7098cc8e2bbccf3430b3c9c494a8f","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.17","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.17","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.17","@storybook/channels":"6.1.17","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.17","@storybook/components":"6.1.17","@storybook/core-events":"6.1.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.17_1612454501650_0.02953887436905167","host":"s3://npm-registry-packages"}},"6.2.0-alpha.22":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.22","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.22","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"57492eaf70038ba02fe51194a7aa608ea282aa0a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.22.tgz","fileCount":119,"integrity":"sha512-QxDR2P3fGmvyO32LteVwcGhVY9DSmCOdH4ngs0qlyMGla8Bwr7l2JUSpolgI60EjA2jTe5EiNH0JptUIgC94+g==","signatures":[{"sig":"MEYCIQCNNdPw3cCCTHJJT4GtpGOUi1VepkVfEIX38+NkvBkocwIhAPwrdtGIpxNXCG1rEju5q21mxBqtEGHdngfpedG4SesF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHYZCRA9TVsSAnZWagAAgMkP/1yQ4RZO/ay5k8oFjc2j\n9rdjzy3/UW6hOvQ5P7mTPeXuuspP/J5w2wB9iyig9kneFOusLEWxDDy9ejNp\nl12zpw7TyZXPy0lvXXOiVx+DFIxQX2FqJYZ5Capux+wnQfAMcDaNJ2gWIzYa\nbAVx1D6ZrIBjzAVADsksXpeVwyXeQpLXQ38+E59zdJdll3zurkcS6szLxIR3\nkzO9AzmOe2n8our+cd48R4LB5h4M12/K4+Oyb3sUJeIC9sJX7lU9k3/KP+zs\nyQnkh1Qk7SZUVpOzJ0sd+E+vc/hJl2Wzz20NAs8mHE0Zy60jXbSz+/BNqMMG\nxcKAzRPV0sTWCvXAbGqX5v6KCYyoLAaRVtGzMEGwGL1iqce9uiJqaY/l2gl3\nMWXBKfVbcGodrO/Dhxhie7LoJ3qb9Ca9+XCF95ybBQEnW64yr4ktiEDB71jm\nGbhtduRY6U4to78pQr1iHJKFKADNQ2jGm9w7jmWNaffC0yBr7lNUrMs7W98S\nuAgKd7I3jf3LJiJa9O1qP0OSoOuGA/9BKp+B3nJyYiLPqSsKSJkKae2ENZu5\nDUtWw/hcP3tnuIbGBNW10ChEj9WjdmBfQ9tO3nq3HzssJI+UZuCKqY9FAmSq\nVmzgONALo95i+0j20iH6FO8IZeSX9uARMD79TPtYvVu2F0MGVMNLU8YjYtHP\nBiVT\r\n=/H56\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"e35c88c7a7043bf5859b8fc463c3ef9ed8cbf35c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.22","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.22","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.22","@storybook/channels":"6.2.0-alpha.22","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.22","@storybook/components":"6.2.0-alpha.22","@storybook/core-events":"6.2.0-alpha.22","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.22_1612477977411_0.8982303144059332","host":"s3://npm-registry-packages"}},"6.2.0-alpha.23":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.23","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.23","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a9dbbed0f036271fa7a374c7f1486fc1ab364615","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.23.tgz","fileCount":119,"integrity":"sha512-PXOhPyB4N9rvMzMEU083V55J3Z+GpAEl9BpeZgD59d3xrqrkIOOGeSAKBA3qhZTIzO5Np5hn6TBmtRyzQdEMmg==","signatures":[{"sig":"MEUCIECVh/HshkQtWm8W/9PDcjPqCnQq6z8gg877ZH8Hzo5eAiEAuOarZx/MluM4Q1IcWgQp+t5GsnTz8DqqneiS9+c3TqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHOvnCRA9TVsSAnZWagAA394P/34LByD3y+zNUEMF3c/6\n40xh6MNJnrFqvCBnkoPawChiUSS6V/KMk1AMhPr2kRxzbmNgKzAuYl/exQpW\nsQIi3C6LKV1def0FVIVJR5YYN24Bk2L8Vrw+q9bKm4ZygYU15GL5ElDLK5pw\n6nG7sCTisUcosfgbhof33UBWPzQkmCwu3KshT3JRCDdxDT48bQCJKMHxYb1R\nwPYA8TuqmyuyP8+aLMtx7813Yy29+ISiDzazUSCo2Sc7Hu7DCUfByUk0dMhL\nUlyn5IFGfB/bBO4yT+rRztlchsTF86paTEeeoARX4bkv0w5C565F8Fzp/T46\nCWCX4n+9XHU9qvLxIcySQMzPPVxHtaOPVZvrQb1OxPP2krVobDq/MpQPPPqd\no0z1kOfGq2p7AnYw2kovLYJ4AK626L0jwOstjEqGAxH3MlIUuXJ4bf961NqJ\n+jiPq/xF/FhBlPhnEekBv9NdmEj0Bg527byuo8cMMRYBRKTLW4qvdabCkcsD\nU4G4iwFqccGwYFWMvbF5POrBTITChvBVgR+cKr6h9j+0muuTZgqiyYH/kqEY\nBcpUqjNLs19vLEZmqumR0CHPqgXPreYuE9kcdt1fz1R4F0tYpNAcxIGjyMAD\n8TMwjLpcVsUGkylRRlzPnVW+ngiM0RHQX4MpsVdYnO1ElHxGGmaeNv/jQnlO\nt1y6\r\n=Mmat\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"da6c7fca24937f314525873d3d8f15b4d0e9aefe","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.23","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.23","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.23","@storybook/channels":"6.2.0-alpha.23","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.23","@storybook/components":"6.2.0-alpha.23","@storybook/core-events":"6.2.0-alpha.23","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.23_1612508135180_0.922514141559208","host":"s3://npm-registry-packages"}},"6.2.0-alpha.24":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.24","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.24","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a12a2fd84d53f128562b8f9e21207e5cb4d8d059","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.24.tgz","fileCount":119,"integrity":"sha512-oI4h6JKRXSbOL2lGZ9Dns6s6InGlwSvfWNOWCZG1KyjlU0S2t5hDaxudpPssC85ZgPouImwPYADvPCbBUbHF8w==","signatures":[{"sig":"MEUCIEw7cSoxnFOz+wLCnIgp6lhH/ftvrK6QiEni/Odx2YEzAiEAsy02AduzqhNhgkagiHTmwNIAXIZywqmj2bJXSKeKIvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHfWMCRA9TVsSAnZWagAApOMP/3LuN93qEGHR2n003ue4\npYcrKUhPxeo4FugLoW3txg0S9kdPrRlKd4i9dsxzddvCLDDrvPndtgg4NWFP\nsj2WcIhZiqAtKEuLHEVhvxtp1OB9qFbtJu2tNkMSpLqw8A1acdq51YbNkl8i\nFXUtS70WUPgLaOh/EO5GP41ZGVM3UGpq44hgypebWcKTQiSwokifVUw+dlYS\n/FAlXBojXSHUBeNbgh1KMd/yqupD9znTZTztnhtMB1Zv2ZH+iH10WjpAGh9l\n2LrYUrmvj3ch535Q27Cl8p8LgDLDo6iJM7oMh6RJjN42BFBd7yVJxtQ2eMwn\noYf3bV0n2GFVphPc2/WxZirkxNibnWIYtUzR19GeywCwRuzkaHldYuCgdNrx\nbF5FN4IsnHJdw/gQa85IeooBteSngvNbg6HfTmUfT9QlsXBHL6OWnTKzfDrq\nyMMq0dx/6aDGUUbObdmfr0cIvJLFcgIgSFo5W7+99Y8kQxOAVPPLi4pjapqH\nqG2KLZQCM9/bWxj2OQBZINGPzImXEAFOEVjtXeYnbFIpnS1zvUMVFjR3oTHd\na7Uh8nN1byJGAiMI1UUYjKYThKjGI6XmJ9D7ncRXtx+Y0aAeHgILGKA9JFZ5\nk3KufHPZ/lYdptXDmlmpueOPAU6jK1zaeZGijaoPDIii+43h+dMYDV4d32yn\n1ksE\r\n=crXY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"8001ec00b1023170e0a57f53edad61f3afe1b111","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.24","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.24","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.24","@storybook/channels":"6.2.0-alpha.24","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.24","@storybook/components":"6.2.0-alpha.24","@storybook/core-events":"6.2.0-alpha.24","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.24_1612576139744_0.5282591839241786","host":"s3://npm-registry-packages"}},"6.2.0-alpha.25":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.25","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.25","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b7602a303ffd78ba63eb01e3c3031e1b9947a11f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.25.tgz","fileCount":119,"integrity":"sha512-6ZkrV30hug98uJfrR/P2gPYz75hLPZKMvwzZNI6JNNUooX+AeER+3B6AuasTV1gUsR92Z+moKQD+t6FhSTl4Mw==","signatures":[{"sig":"MEQCIArG84YrUULe54SMzcPhe3SEp9BwKoxi8U2wQ1iNfq8wAiBcMykrh0lrug5s+zzjUYOW/zAw47Elz2whb7qcn/Laog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJIg7CRA9TVsSAnZWagAA7OgP/iz2Fnop7VCQ77FW1dCi\n7f+5N9GP1JkD6YbfIBJhAixoN5d1LT4PlVVWHrIlJ15Js8zrM2VhgYp+3LB4\nK/bBp7Nz/lrjj/+7CFyaA5AuSgHxVhSk08cRi5yp89ykBktv9kK5vza/kPnf\nXiMdSC0gu0jXUnIHcYDfRPBkZIxIFeF7hFZ4XAS0xkGupop8OlJvAuV+n4tn\n7w7cTWux01S6TI4YXJjlAOVw49geWiKeFa2iGdxdy63zjiS7mKT2SaIPnx/9\nVWIrt/oSpxEB07FxY+T8hULjVfzWBo9ZQ95i8yHF6mzjRJLiApyMSt4bUGN6\n4jV8MHC+sMTYZUa0rPjE/aCLUxRAy5RA/QKAFOfpZAjwluCmZt2lxB7VUrzl\nkuCXDXyVbXjEFchGTXtAhBLy2fjwknpX+UQLr/1aifOFB0XVTi1DKMu31H57\nlcaOYBGuR0xta40PiKcZD7WjjTduYEuYDmnfDGBWlyIYn4hsxowHHBnmG/aB\nLo7+Yt4nxm73pas2zs23vk+3TCOTseYrGaPfIp0ivEbs2ye0P3+wKYni7g+Y\nB828nUz8PGVxeMwMNQjhnV7+67Dz7SZRvi03NGhScc68xkK1Kg4mD/nVEMTx\nx9B4piiGToM4N0/7n3cEEl4kmkRR8PxLGXFdNtKGj/VdJ2/25neSy655FxzD\nxJU8\r\n=5UBc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"d4ff49b2dee7c5a3c50e992832bd0ae4d3e52e41","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.25","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.25","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.25","@storybook/channels":"6.2.0-alpha.25","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.25","@storybook/components":"6.2.0-alpha.25","@storybook/core-events":"6.2.0-alpha.25","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.25_1613006907268_0.0765284567543969","host":"s3://npm-registry-packages"}},"6.2.0-alpha.26":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.26","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.26","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3c0a23101518192426b187efe5258d72d860f226","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.26.tgz","fileCount":119,"integrity":"sha512-p5kb57yjVS4hWYKgmiWTeG+bcB+flifYLHAKRs8bGLdOWESqAMfsNAbE3t9hQqf6b2hTdtPUg5Y2todAhLnGSw==","signatures":[{"sig":"MEQCICVG8LTLVqEWJfoJoAKjKUg5lFUEsCOnjR40ZqzO2wsfAiAYwF8QJkQXmn5XWPGF6JprWvN8+J+0RIFiw7ciMsjjDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJ0eBCRA9TVsSAnZWagAAcqcP/1jYnBG45lvCxbjDC4xA\ncigTwqxDZmnpACRTkrP73ZWPs3K4HSJbvlQTJTKgMDWJ0k+Co8xkBSifvv3u\nWMgygAtlm53opngChgn6xOXlAPkgOvsXFffPaBy3joXEvoCrP9R4NM9usGwg\nFJpAoKoNCll3TSqHNYDroz5FrhtTXYOHMCzCRP0VguE7BHrpld7dxqLEcRMI\nKZ+xwx0ghZHeXAaMn5YZJNmsIJFTrrHmRFdCYbNHujlIkfqY+aD1wt0RMDSe\ntZNT1kQdWt7jbxGb12TFr63uq7ROpHhBG5l+Q0cKE1um4Tg6cxcV8XLj1mkZ\nV0wuvEqoYgEO0uLoAYDDSNhPU9N+ye2v4mWEObFSKa6PK2Vi2W8ImQjInfI6\nzJyl0XoWGCLkwjd//yc+VCNVsM2TwaawLmOhBO/V4edT5JeDDzu9E9RfobID\nrmIQpeQ5/1JcBnS5JWgrsJFXRkSHHjlahSMwQmqWeZTBhKksYDzjCOWqsvsj\ne4z5PPucGuXSOOYWtVWJNFWmWfH3FcTyFII8EWwvh8vRtzsZOphE5R3x4K8r\nVVIGpqp6E+i191Ux9hro3kK5YOHezHH2LAUi6KefVGsUGQSeyOaLTDwtOJHK\nvZHHCiqxjbyRZq3NDNNOBd5JdLf0A6g7yaZ0+1knHwgu6d2nXB11C+pcOhFp\nA8Tr\r\n=xOV+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"dc281516a86ed63016caa2861f32f59d642adac7","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.26","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.26","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.26","@storybook/channels":"6.2.0-alpha.26","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.26","@storybook/components":"6.2.0-alpha.26","@storybook/core-events":"6.2.0-alpha.26","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.26_1613186944596_0.29225322037418944","host":"s3://npm-registry-packages"}},"6.1.18":{"name":"@storybook/addon-knobs","version":"6.1.18","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.18","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0615d9d69aa833e17aefb652cbcb73f1c6ad8558","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.18.tgz","fileCount":95,"integrity":"sha512-mdfyI4VS4Mo97VmPjjNpF4u/P45vQBEKTLbC+9VNPUtRJuqIIviRHnDMiWYh6qM6oNV0vNxVMe+KKL/sOXavgQ==","signatures":[{"sig":"MEYCIQCHlIVMO1Vsxpmpt0saDV+w01Ujt+MfvQwoHslMNT+h6gIhALvtZnOrf6yv9mgEkU3u1b5t2QrANnfp9ZXTxw+hd6fK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKVhQCRA9TVsSAnZWagAATbcQAIxUIGEBaTTxjBj/6bfX\naszVu3BhurGSJuDR5HPT/4ikdzvcPv0omCOJw96CpxgCIwK4Znw54Pa2nj1S\n4xDCLNHxu7yLzyqBl+j9+FT5N60dPk4uzxGsoJMMwpTqhINHbdslEgr4lmaQ\nWLs2hZSokRgeKkJ6OiZCtCeqkDwyKGUViqrdHHpfB8uVwYGAKiKL8oLeq0PK\ntHjp38PNheR2wtanoTcaMPD1Ig4wlnUrmZunWiA+Vo5mUTmJxvIm3TuzPWKj\nLcwjK0bNyDljBwo+kMzZnxJDjST5uOfQoDb3xU0IG4FXKHDC8GNW8185d6E0\nGHK4OSvJzDFqPkt+ors68U2amzQkpaHKYpT2vXZcoysM50k/pMQArSZONgrk\numJDG3cG7sS8nccCtZjYhFlUL5ESzhcwLrNJeo0NWDjAVHr51jtXoAPQmKap\n2EZ3gXQsW3C9wvwOaRfVW2O68at/nnsRg9JUFpmesmGedMOj9kg8VAH1J3Hy\nHnGwSv13HuoHICTAK3+ta+BSYx75L4bMRIs9JPw38D1K656+32Sm2ql4qiRt\n1+OZHwuscBIo43kx41LlAY2MCErCxFNn5QSJA5rnqndTqu6KC4b4lu2kj2SC\nCK0iDPlQSX7ixwy+xeQwHKuS+P6dxIA7uVXEgk3gAq9WfDrSw/dTm3JnOOb8\nqmJd\r\n=b6Gf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"7b49fc1fad07d27ac484e6eb8ce50d75ec99604c","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v12.19.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.18","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.18","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.18","@storybook/channels":"6.1.18","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.18","@storybook/components":"6.1.18","@storybook/core-events":"6.1.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.18_1613322320237_0.8263301502143787","host":"s3://npm-registry-packages"}},"6.2.0-alpha.27":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.27","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.27","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"63cec5b7bf98f75c64575f22f4336901ca9e595b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.27.tgz","fileCount":119,"integrity":"sha512-cVqqod2/hv0bxf757x6s/kz499m2QXhiX6cUQrB6RdUqxYxyoYns3kkyV+Mw6W+jR/TDQDrJHqOALq8zSWFIbQ==","signatures":[{"sig":"MEYCIQC0fx1gu3TaDGZLRbjBWX4WYG9qN+si+kStRAsU8jiX/gIhANcqFj0XXr9XlvR9X0FastRPGu7uIYJZGBUtyR+iF8QH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKVzLCRA9TVsSAnZWagAAHRsP/0JerC6X0szdGDbaBlZ8\n2vFs4Ui9e1Tmtn7ZbiFfLkGe74ZbxhUui68IC0X7PPFSdRicyRj3HTu6EkPB\nG1F6bof8x6QpC92mHhkVQkf7j+izZDuWoE096W8eXXjcdLA08loQA+seJGdn\n9n0j2LAQtniW1BFQtCpV/mlUky2+tpj1B6Pb51Nhjt8163O9UGBY+bMTez2a\n6D/jA8YYlYaYVOGE8FGxBX+xfJ9Bq6qdBgbnz0sPpBFV/3w4npBPRaP2VzTl\nVXthhN3ECt4q4O++90eZgOG3EQoza6zUS1z2gto2MSSQEOoaNTmJIPJDzw7S\nQGvvscqah53aiEj8olYo+cRz26tVDaHYN713294xRDsUGjCE0yJSzu1CzUHF\nAchukauTxGo0wCnK+kxnQi0JF3pNeBNsQ/d0/i3ZvSG2fJz37/wwsnz32oZv\nCcDPWVfXop6DGV/MmAXSEZIjsj6cI/JmLrJXsSi3ZpVifm+yeMyoqT0RgckY\ngeo2M9nPGMnp1a4KUojajCnMbV003wza3ZCBbJlvXVz++gyc/yjrBsLBPuys\n8uU1zEV6Hcr9Y0DbFaBiR02SVRssG8uH4KsVc5ryxjGBPlA7d/ZI3ATWRLEc\nPxTvKs3paAzXy9v2QZoFxuCWTpStZ7m4qIj45JL8KEdXT8Vg0jvF+wQ0dCD/\nmlmM\r\n=rIOW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"ca441e62ddf8b05ab1d388a59f8836565cbfe303","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.27","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.27","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.27","@storybook/channels":"6.2.0-alpha.27","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.27","@storybook/components":"6.2.0-alpha.27","@storybook/core-events":"6.2.0-alpha.27","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.27_1613323466974_0.4363201888969521","host":"s3://npm-registry-packages"}},"6.2.0-alpha.28":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.28","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.28","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"cd2048eaabd479373badc63fdbf7e73208dd1aab","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.28.tgz","fileCount":119,"integrity":"sha512-bnUnPyrr6ym/o8yOPy7Hr6c2ueR22UX2qaTthxzEUQ+XFBgxbqyNn+fShhkocRNpr+bKj0j1ylYT5G9ABaCqzw==","signatures":[{"sig":"MEYCIQDXk7fkIpGYw0JGUlBOT1vi4PFFjsRBVX7LVGk/18PyjwIhAJiGjsvsvqK5FztKDScjUW8LC4UNnsz43+JE3k47GA9L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKhaFCRA9TVsSAnZWagAAW9wP/1FBRPsRfFH4RPweFwhd\nbLAEWWYrxiZS+XuK/4zRdk5vGaTnPaQMVe5WmmQ7AWQVpykc6vFm6zLSYPGv\ndoISWpbhAT3k4NpfPpDrUH0ASN7Lm1hteEXnIC3HMr1ud/zH2zvfxTS2bAlV\nhxM6JlOBsK0KJ5U8xZzbwJykehtEvSP9aUuL6L9iqIEAN6j3F+L+GIAOHEwJ\nPgYAQqhSSfXTxiFGYHU10wrAK/0t9yzBu9r32lJUiGM8ocwSeymVRl6C8qRn\nLYR7KPR7J4CwR9Ei6E/fUPCydxCunFYeyGkSLLIEwL2AlJNj9E6cH3jWgbyg\nOZmMW/HFTp8YG3WCeZ/tmP+FfhBAPDO+A+8Tu1tZsG+V9anm2O5HSqOGRRqW\n/lB4HcmxZF8NwCcOoinGJT+R/v1ICTq+A43BdlT4jwN+yphF3FdP9T17+odN\nXE5KeZMjESI3RrFmc3nrf/KEtY8MdcaZGhkOvNj0NB0aUiAXIFxlHY6/ABZW\nHcDqsZ0qxXvx3c/t2nrf8XS4fvdFGB9XiPhj1sfiXq94NT9PpDExs+DUi1qp\nB/w9aNuDiHjkYFD+kRgEz308/bS5tGHpQFNSyFjVE3cDfE5xRtT6QOUXJOrv\njxdUGU43avpjusykPUFfwxyXgg0Un8KlVaVtfz2UIUiQMlRSXHs2GyeHEEdx\n2KLh\r\n=srqE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"899ca0824d698925edcc519c7afc7408f7b1ab46","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.28","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.28","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.28","@storybook/channels":"6.2.0-alpha.28","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.28","@storybook/components":"6.2.0-alpha.28","@storybook/core-events":"6.2.0-alpha.28","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.28_1613371012874_0.916288568462712","host":"s3://npm-registry-packages"}},"6.2.0-alpha.29":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.29","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.29","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b69eb5cc249cbd484240830d7d59bab69aa5c11c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.29.tgz","fileCount":119,"integrity":"sha512-0XzQQbEqzH1IW/Jew6Snxetp4H83RxFxbIU82KON3tDD7o01YtJvonUDnYLmZCymcMDv+10cZiyZijLy/Fk8Gg==","signatures":[{"sig":"MEUCIQDwVrIrsVyV/5GM/tPQ3wxIJ5P/verzMp/k005IhCjIugIgQbLSzLwMGe9rVsL1IAP1Umycgfu4xiRk2dxgE1UWq9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZX3CRA9TVsSAnZWagAAhz4QAJVLRD38FUFhguawlMjP\nA9XnSegDKY903SZ8tMyE1FgL4nOqOL3bIWwGzaML/xBH/KwA4kdfEQolvOOm\nbuaPVYYDzaP2se3drOIcBCfLZzPAR9M6BTFXtce9vmriKtf2bn89Zcu3TrLI\nP1HLM8dsmxzpDTGpNX4zQTw5/lS5343jIXraJUR9LdpG4XTQHYOhb9omLM8+\nC+J+hroFIAOh6O8dVZcV75J0kOY/qoctpyyhuX9EalMeiniWip2JJQvfFTyX\naT9RBgUMbOEFc+o+CQyVD8DxTZEsdzYd8S3MLJMZZOupcEMMKbDXne85lI5u\noJL7sC+RKVRaIcH46J9djxuQ5TN5rMM/iIjIrrv/GePWlAzAe4xChJJWJG60\nmAfX7ZGlhpWoz0N1p1qFxDSUTTmqEJfxnjwfagxZzaHUsGlLwAK9VndbqRZa\nQVJoNKMT6zHPRKCAZktsyLX+rRvzRuWTg05feS5Nu7E8/afrk6JyRJaK6kyU\nPV86GurheoRs1SPOPf+MU81gb4punB19QQyiFIx0tSaxb8jMtQ8HznlGCHc6\n2fibWybiP0aNgx92oq9e+eMSLzrIGSpMwuLYUNaz2ajKiREOBt9mPnmyHhi6\nIVOpgcXS+1biJGZWsGA7bNBD8IO6XkT7bqoKpK/QL1qc6bCffFZ63q+IeFv2\ndy6t\r\n=NoUa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"66dbae1b4f46f0a654cca2a32410f4654ca48821","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.29","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.29","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.29","@storybook/channels":"6.2.0-alpha.29","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.29","@storybook/components":"6.2.0-alpha.29","@storybook/core-events":"6.2.0-alpha.29","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"0.0.20","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.29_1613600246770_0.8391063910634395","host":"s3://npm-registry-packages"}},"6.2.0-alpha.30":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.30","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.30","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9374ecd003919474c0c012b0876aa46c9fd31775","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.30.tgz","fileCount":119,"integrity":"sha512-88jeHWSBpOyqI+Q974J+qC3AfQ8Qht9MuQTXmhDDUVZuNb02aXn1jSWOTosiAbwbPR5oaZzdHhxFwLpxlibDUQ==","signatures":[{"sig":"MEQCIB7o7TylxwaQX6FoJFlbLvf//FU0qgBbkexNNHvGymgPAiAUNrq7lNwziTLwjwV5rZk9+00/Z5JA3+T3xeEC6pjjZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMPv1CRA9TVsSAnZWagAA8lwP/1IBq2XdbdDn1r9xu3Ts\n8mdTjJ+FvgVI/2PcktPSnv3bzzyowBEY+6DxBDDbjV0An8xp5xk5L6BYRzBQ\nDCpXsJ7ig5Q90+wuQ3JXSJxdZUsNy5EFbVw/30xN8YjnQ5fpEwV9zGLJGIHM\nvEt8yC0ajhardztaa9jICqTPI6vDUxPGlOEf7NLh5Yu8+n1YumTLZ5K+DJwT\ncGWDubhL4vY8KsOx7S+JPUrmXYGevM7x6RMguGdCXwnji5spT0NSF0QcvUeg\nRFoAUhlt3Ml3BwPlKzPf3AznejmGZLaR+0io563HjbOEpuyZLZCBUjax5gT5\ntbzplFz/wMQ2IS9tsJNnHK9tc0CMEJCi76HAisnVhklMYMURDDJh72jdDFFz\n6+xrLcDUJcGn+TmV4ZMXAvXfsoKYbJkrnMu1j9KI355eq1ZmfuZPx75hUB46\ntelfa3B5lBT+YqaVq9//54xrL/S8rAepz4g7LzLpXI4A4OmjqLUnC8hoOVEP\n/y1ptOp1zX86lj4Yy03Z19ynPYW2HWZ5E+DbHFsR0fZnXnRN3pLrkrxTX6Sk\n03GvxY23BxIEqCOyIckc7ZMz/YO7d+XhsxFt5UfghnWiFG8HwCtTGYnYcV6a\n1mCI7w/Cv8C+5mka0huvjEF7kD0ABX9zZ2Q6ptX7J3bhkAMSPLY5u0hGOjd2\nFmdE\r\n=Qj/H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"35ad9e58eb8571d57af91747fbaf45b9891a3268","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.30","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.30","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.30","@storybook/channels":"6.2.0-alpha.30","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.30","@storybook/components":"6.2.0-alpha.30","@storybook/core-events":"6.2.0-alpha.30","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.30_1613822965363_0.7175955010810107","host":"s3://npm-registry-packages"}},"6.2.0-alpha.31":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.31","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.31","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3e46f617fc761d87cc6f2d5bbb16934c5804c082","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.31.tgz","fileCount":119,"integrity":"sha512-pmdPNvwIP6PHn+cXbOz5Fgk7XamIgkR2pwlMY7IXUaBRMvB8IMFdVdm3TbY4lLCIuxk7+TBquq5PpboJJOS8zw==","signatures":[{"sig":"MEYCIQD14BUAxaHDD7DlxFphbwptDAxlI5wQ6hWubLhponz07QIhALol2Z3/e5Kkns+WzbsAWKb63h/YT9/0Q6PeIdD/K0lW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMRLJCRA9TVsSAnZWagAA7roP/R6CPvMavOxvJc/Ykhmi\n49XS+k2Hnhp8VBdUsHSCziHMmCyCX2U4Be1IMZ+igmhNXMAv+1FNIcJ+KXPp\nX5PZo9MDseBPRRVD5AJMdK9D/BdscoHn4EWYfRSvNlUfsRnCbksKDNU4l90R\naayhcWbvjkT4e9wyz21i38rGlxKz6OL4tJyL07ksk0jy0slXIlcwteImaH/5\nWm5GdS7CFCBa1FZeuQmRh7IXDIzEipyg1q2zKKp9bmnoBa5TxFjKsVQlTAkn\naMm8n19a521MtL+yD9B0sBKD7SwwwGbUKnzcBa/GcO45CD8i5ewoPLYJVTtO\nhMkhiIwD6qa6PYl1EjU9qIgpmRod1LjSzYmWLXNHQziuCgctPa++do+K+OqP\nRwjqZu3ETcTXyLUvcGQ+qh6OsQJrkRTGuJ3a8oCEa0YXgZm5c8/6syPCkn79\nAn4ThsVtJHE1wK5QtH70QEqUfEenLJuGNCj++EAa2fGd5t55cAOE+Iey2NUP\n8fPMnLaTYvOE/gaV4zU2pi1TGLaDWWQRmQHOYTreOYZOoO9Qii+fR7KlUBKU\nXmyBo6mrWm/jS9D1aJMmTpJJjSGsKvZGwYsg/HkSWtH2EF/p0JQ7uW0vsa5C\nEayQEyMUDV2ejqGRAtK46F3WDa/kaTE8Ljve9j/eUrADxx3ztuTXRzwvUaDm\nNkGk\r\n=Vmc+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"30a22ce4c253224b41558ed46bd7c3e8879d903c","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.31","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.31","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.31","@storybook/channels":"6.2.0-alpha.31","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.31","@storybook/components":"6.2.0-alpha.31","@storybook/core-events":"6.2.0-alpha.31","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.31_1613828809023_0.25633720131317306","host":"s3://npm-registry-packages"}},"6.2.0-alpha.32":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.32","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.32","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3d584f966c5f56c4ab2fedf7dadbe453c4e6a024","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.32.tgz","fileCount":119,"integrity":"sha512-tf3VNjqmu+A/ZhkstA1Y3VCsCbQ3v9URb1hhOu6NzyV0MWQOm59Og/rQm0Xp76U75M+PPTQtMS+v6sZdmUAZAQ==","signatures":[{"sig":"MEUCIEcMgLmIZ/XS9xxpw2iK/DFpLWXHrfFzYBa5eH7hf92gAiEAhMtbsEEJV4mSK2rK46mGLNhqba4gP8MRDvzme49F1Eo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMh+0CRA9TVsSAnZWagAA6q8QAJiINAYstW5TWAu0aGt7\nx/lfJF4yHZXhq97HyQcfZEqeyclH9leOv89KApDq1pzf/FWlGUMYGuenFu0x\n3g3BMiAsJKHFG2gxrhmhytDdMQ0ILwkWYg/2bMX5U754q5NjcF1rQNX8qpVd\njSGVpFV4r3QCB3R1vz0/sCHMSA8Wcz44Y9lmkMlcym7jmlXjsxB22rqmutmZ\nISRLxW15Tahptgiod4f9E59Gt4qCwcVhCqZq4ik6DLpRMvRJBRZIoVZlJb2p\nBKfVCgC/cF6U0D7JWPZJSCK7tvw2GRQJz++Gi6E0bKd+o3dDoaVWrYatQqkj\nelHkkH2v89IR0tuq/a7fMhG4ckaZ7B9viCXc40aTMG9xB/Ayu4mWhdIAr+6d\ngWczsm7zXEibYuueYi5WgVYbfaiJVBhb7NzoL5Gc9LQdj+hpX6Lo9eC8D0n7\nn0A9YiKs6rJN6+Nbcd3M2mw8VxVkARd7ZYFDzJbBArygdPYaJZCHr9eHVc7o\nGXg3knEUaW7MLUgwU+/Zpdpw0nslNJwq+LnU3j5gHa/VEQPaFwHUE6IUYGWp\n4KUNiwCbPvER3TkGxF4xG9jWACwT/4eLKpo/QqxtIwvkiJoF/WE8xvdjCGIG\nWApBPzOIJF4VAOmAVGcg4BoIZjYRZadVoKuTgOJuvRUpdPFR0RUcUJY0zgt8\np9NY\r\n=X8gD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"cb02d735a85662ca11212a32a805755458246e4b","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.32","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.32","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.32","@storybook/channels":"6.2.0-alpha.32","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.32","@storybook/components":"6.2.0-alpha.32","@storybook/core-events":"6.2.0-alpha.32","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.32_1613897651617_0.5721737655002925","host":"s3://npm-registry-packages"}},"6.2.0-alpha.33":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.33","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.33","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d17c0680aba5fd22d28bfd9795ea4fb076485a73","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.33.tgz","fileCount":119,"integrity":"sha512-WoAcGjS5PjTFODTqIvLTGero3sf7SUa/wxnwXwbcsZMsBAsaNl6I96pyifwV086HdUcsVRqY3dsYjLvQ9Ld8+Q==","signatures":[{"sig":"MEMCIFrt6EAzPEehi6JYAuf+koFIhT34vkU2dQeylp+l8+K6Ah9+S3DI3TGOxXr6M0ww/5LzHm/PvShlVQP5tYESua+J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMw1VCRA9TVsSAnZWagAAubMP/2DpJqICwSeERVEEvFSx\nZR7piqXatxioRy46JYbw8cj/ZG24iQHAWrFCoWse3ynp18jpqVPvwU6hQ/KL\naam6OZeq0hTHTorTuS905JV/DFrDVDsoIF7WGcn4IjtlkfwQGL/MWaEPFg/X\nnrnyRsEKGSVAvAAW+14VJ7FI69CjE/hcaADi47lNY6+LJS1IC69gJRtyLGTF\nhK1dWB6lfk+bnQjUc5LFeLfownMh0O58iHg3xcSrY8mkLe5nU685uKIK65Uv\njnOEEcqidYLQvk1IBuAUjTzW/+r9FDMMlV92Ix9Rm0pkUC2E88ogxeQ0nNaW\nQvk6uBGnMi3kCAwCNzpufjI2YvcvMf+U7+9BYOC5OnojEul0ciEdyKpn1QcP\n3G/AkOsbDlyWUtXW7RZXCY9x4DgCHqVkYl7HOqka2M/ofcFNqOG17m9gp6an\nTKIftEI4+sXV1D5nexZYNHYAId0vnnqtXgVV4u5T/znOyUzrqRmOqUacNyeg\nhWGvsDm6HpfBVJ/2ZUkfZ1RJDu3YET0F1h+nUdNl/YNnaQY4MmsaJm2b9L3D\nBh29P5Ot/yrtMSgdXvyqBe5aNNGlpFc7geE9u3TvHtUgPdQDHzqrVqE6cvDS\nqEKQe7KHMw8l82Ah4wHAJZ1ScDh+nHJHPug4xwSLC9zn+yH6y6OZQCAw1sPq\ndv0+\r\n=gqM6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"149c8bb91b3ac9101fcd90252da87befff97c418","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.33","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.33","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.33","@storybook/channels":"6.2.0-alpha.33","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.33","@storybook/components":"6.2.0-alpha.33","@storybook/core-events":"6.2.0-alpha.33","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.33_1613958485493_0.5858801657937689","host":"s3://npm-registry-packages"}},"6.2.0-alpha.34":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.34","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.34","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0ccc8396626218bf582297d7f5660b7a8d7853a2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.34.tgz","fileCount":119,"integrity":"sha512-qyw4w2XA+Nek8RBAC+iqrkjUrS6Nj0mD/6R17HzdFvn+WIYFjulzkXxdrsVP69foYFzbrbqclDoucZdVFRpJ3g==","signatures":[{"sig":"MEUCIEqCWNyW3EL57o5pH0bsojTYUZbg+hmLrkCzO8uyX6PkAiEAj988le8ZjBiZFJuxyz88mhCY/C5QMdbE6Nyhjd5wn08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM3XPCRA9TVsSAnZWagAAqFkP+gL0DhY53c8rmxDfxpXx\nyBkmjQ2XUMoqahjaQ+9n8fICyyPHuK16Nevnyl8UZzEK5m7zht1NVbqnRoo1\nGx68yO2pO47g+F/jaGgifHzCm+0+zkcqE30L+VNQvHczVnErswpal9mhC9SO\n20XY53jRx0y/I6ycTO5HVJXyUfdSXYqpCrWJ6GRoE8BIjyWiDKHy0UcnZyZq\nXKwamoBpJYbvV193a9z32m+wi0XMu2KJV37Fkyx5iyKZ64QN8D4hpxiV+6dA\nZGQHWFTvqp/x49zz3AcfdkleUjvm3wNLYumRfBukPoNJIigOnhgjeLOhSiHK\n597P12diALKZFbFSW4yJ0Ez3lx5rBvQ2Gs3vNcKPojnLAULlGQ4BaNO06+od\nJQflpPs6DRkUQtBYJ/ERNVee9N6UXx5/eIWL7UzQIcMd7AtCGKW7OebsxxeX\n+TMw9+zjS9F4S2tBWH4svFrRnsmBupUU+/H8RwcgQhwY8Pah3zA+Cf4SG5JS\n+y0oU8TgrYfsYGshP3hKtMPSZWFZcXs6YvZ3vg4Ea58vWxrowX2AvNv9KEQt\ndqBaLq7uIWGzM0tmCEeA1Y7Amy8fnWkCusog5NYX6O+SIWKMcUlld2Ay/JGf\nkCI305D1Mu1d046ZjoMJM/gtdCjn7XoWOfVdm9N8Dio18H/HpLasUSZJ8wVo\nJcec\r\n=BQ/r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"557c58032e01ee6c5a5bc0b6f96796afac6d23a3","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.34","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.34","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.34","@storybook/channels":"6.2.0-alpha.34","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.34","@storybook/components":"6.2.0-alpha.34","@storybook/core-events":"6.2.0-alpha.34","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.34_1613985230879_0.9778235454249729","host":"s3://npm-registry-packages"}},"6.2.0-alpha.35":{"name":"@storybook/addon-knobs","version":"6.2.0-alpha.35","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-alpha.35","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"5d0a56d91143c47823fae80ec91ea9f6bae0fb28","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-alpha.35.tgz","fileCount":119,"integrity":"sha512-s1JngE3n680OC9IaLrcdVMES75lBdtlJ8jU+tapwrmoIm8oZSKUGIo+FT6F3I3pAgYN/OC2YcI97UwDwdSASjQ==","signatures":[{"sig":"MEUCIESt5JDpfVd6eYR0D3n14AkzQ++p56RMp5/2L5UEmz88AiEA1DEiVFGnkT4/yJiuGLcjBppuzmMVP8z+ZoQGbOyNOtA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM8KpCRA9TVsSAnZWagAA6Z8QAJY3W5efZpP8Cn9GIg7f\njeuS0+kC0kC7HTMLc06Vf54426qRGcm9VW3dP426iuZ2cjFc5UXe/CIHUmnc\nC3KnPczBfnDM/a13V1Gafq4QZGQR0QZi2f/U8CQKtS7D3lOWeAEK50xScJf7\ndCu3fHfQ7vI4UhBcEcro/9L9aizOQJuqMC1Xn7s2wYoOMGWyRmqWxT7WVOev\nOXar7LdrH0lbheSfOvkjn7ZWBpmBFT1V/IcdD2ZXIuJljfwEb4okNVZbNLxW\nVpUR8soU3nd8DSsBUK59exYOmUMVRI+PhOGU+Z7mVZFYHwHtymfw2kgqNWsc\nXbfNH+OkAZ0J1XOitQmpeijGVYOD4FMeFnlnAtmotI9PzBKKpz4XUSBvmOfT\n3Oa/vlGQhF88dqKGCPg9ULvtLNPuLHLGpd3sgnoReuqM3MDI/vtlJeRpAHrm\nEL5M33eOwByXBYzVRFhtdMRq0M23G54K/14awYfF7JOa2EkCwdSv9hP2iWF0\ngN31Bg118609POZuBEtb7dOiB7kl8aLByuWZhdkSuXz0TbWnXSVR6WpXhMSj\nOVNPHZ+mLqxsaxF9tjYiPmJLy2yHmrSrjmXoDxD8qVEtMA9BXZ7553DanF4F\nmiC9NXP45aNi2vu8VctNE8j5JoGHXY5F2Jk1R2fqvmsKiL/kq3K0erIrw+KV\nYlCZ\r\n=oELh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"95cf9c6118e49062ca132f0a853748f1bef8e62e","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-alpha.35","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-alpha.35","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-alpha.35","@storybook/channels":"6.2.0-alpha.35","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-alpha.35","@storybook/components":"6.2.0-alpha.35","@storybook/core-events":"6.2.0-alpha.35","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-alpha.35_1614004904940_0.6346603066825713","host":"s3://npm-registry-packages"}},"6.2.0-beta.0":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.0","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.0","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9481368ac62efb92042d0faeaadec26aa798d8fe","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.0.tgz","fileCount":119,"integrity":"sha512-0vaZBlOM3txwf2jUHSVHUAr5nEeL56f3Q+d36sztFQ1LRtijZLSdQ01CNHdbeHhBk0iKh2Dek+FA1kuc6ZZqnQ==","signatures":[{"sig":"MEUCIQCwkGaKQj5szpy70K8jlV+IUIuyDqic5agWyouoNw4aAQIgJYlSOx4ztB2duOypMcfz7Sj6q6ynGw7DKu8l/CEHUbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM9F2CRA9TVsSAnZWagAAkwQQAJ2qLHdqr6oZ4+LyCUH7\n8xq5WJ2+Oh0CkHBU+Diwc7lKHC8mmYha4oE8/DxMAo7JGwDt+8GzATy+oMdz\nlm60EV+xVloMqe+JXsU3s6UE1Fic/O5EFtfg5zoXG8uZaORA4+PHfPt/nmqh\nH9mCn/BoKmyOggOt/5J7d5WYSi8kJpQPtZ6f5XGov58ZL1aLBpWt+0BoYspI\nxy14DS2UyYg/adMUcEbfXfoK0l+zoElvh0zmSCyUo5bQ2N14hBozt+EJeJ7A\nst5WvkzMl+C2jtCzYwbtjpH5AaxYvaGlZXus9h9SUb+beShQvQtWdpYtvVRQ\n1IwYeKGxBzDJljKNNDE9/0advlzDPstEOhkTF7Gpq4VG/cbSK3OqZy7CD4gE\n9fXrtOAKzpoXWCDRwtCFUG3gFqBC7hk2Z5rx6ufYeZhi0v8cW2BeP9N8Hio7\nxW13/R30VdQFcicSEygXyfwws8/4CHm0iGY37BFejfy8M+oket4EvO7I8ZHd\nNE47L305H7/mPqvOCvelQ6tXtUOJUMHc3EXI+M3TP9czHkvYTchNPoUgb3Sb\n53OXnULJ2QIMXJdPTtKzuYIcAKkomrSahEdyKdpahS9VnHpQogVf/X5e3HbA\n3PXg8Y53VG+lLe+g3pqneBCgghefRawa25P/f55Gkj1PhyC4T/EwwPhjXVCb\nRBDB\r\n=hRNg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"88c8da9b94f831ad177256ec58930ddaebe7d32b","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.0","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.0","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.0","@storybook/channels":"6.2.0-beta.0","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.0","@storybook/components":"6.2.0-beta.0","@storybook/core-events":"6.2.0-beta.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.0_1614008694012_0.18138177813890421","host":"s3://npm-registry-packages"}},"6.1.19":{"name":"@storybook/addon-knobs","version":"6.1.19","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.19","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6fccd329de03953fdebb94b2d641294ad06afb7f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.19.tgz","fileCount":95,"integrity":"sha512-SRdPjccwJlAPBeGl/YMvmAJIySSM5Kq/VpcMser3InXExPuZpupOUS+8Jqt5bIikJx4vTYkdavMomlwSUBXv7w==","signatures":[{"sig":"MEUCIQCU0pw/1Xz7fOjCIvHv6Kde1fPhmAEJ/fzDPWLP111ECgIgPae6gJ4Ps8EvkwsTMEen1lUQywuF+EnIkTUN8+p3znc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNHSnCRA9TVsSAnZWagAAMy4QAILW9sdEyowk9zZbvkSY\nDUh3MVMT5DoSBmUx8/la6KdD77jx1+/SCBXBW4tkRfBQIwlXAFlCVuqYtBIE\n44WCugDsme87E3ybBBgrVrKijKI5lSbEu280Z8s/ju4hoMUSQEYsWvjLNnnI\noDPlW+bQ0q7hsNg0GK6abnwDL7iqUcgJlBRtBVlqURWGt+nrtsq08X6b40+Q\nK6DOaTo6qpNX+/6MHsZah469CgkiUzxkKD8yg3bMXha0nnP3PHdN6bO235XI\nvoXnJIAgYWWGSpLR1srlYLhW5DPXbLN5JTQ69VKD3zC0w8f8C+801T6E3pBk\n93DEfgQC8onxp2gjX1kFS0p5dTk8fCSoOHtsoKnOwgXpyJTvb0GySuwNMR5D\nNsKt84yPlMoG466Ye19ObEKghLHZ1hqa2UdnvLkCYZ2biUvqbus/alJxkNd2\nqKoTjggmGYJ0CHtni3KfqxitS5DwuGI4O7E2L5QE67bJMmjR3R7W79t5aO2x\nEkoA4+95Duq9sFBsF9yzeKBew2LeKX4I0uUJq8jX9Ne0AlYr0XD3new/j2bw\nQT7oLefx5PK+iM2dOMVP63dX3F/ndrG0Zyq5EMMsfFntrTNldfIIrFELchAl\ndFu0qg50lN8jld3gltvZbOihRwQ6HUO6F4dzGUk2Aw3ea+VqZdygfe9lQIVt\nWy+L\r\n=3LNc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"79b72d363eeda84b0df03b821e6c35d59b2875d4","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v15.0.1+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.19","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.19","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.19","@storybook/channels":"6.1.19","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.19","@storybook/components":"6.1.19","@storybook/core-events":"6.1.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.19_1614050471486_0.6823002636143412","host":"s3://npm-registry-packages"}},"6.2.0-beta.1":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.1","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.1","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9468213399636c2390626ae03c28a64b47a529ff","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.1.tgz","fileCount":119,"integrity":"sha512-Gnh9bTHCbSz7sCDmPszID1PfcR3dXkz6GxYVIxbVB2Qds5ZK034maCegzP4SME6hV4lMUKz7AEskeguPsFvnqw==","signatures":[{"sig":"MEUCIQDQgme0LhPtsknNpNyos4jAHl1vIFYzHSw+ZvS5Ev6aAAIgUUHR8USYdDeAFTpHmVbEUyaeD66KFnijukCMVRygXAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNHrTCRA9TVsSAnZWagAATqcP/jWoqnH01H8YmkrCiTs/\nhCc5IpHnyNsYqwmgnToMU7jfkgP26uN9CQFC0jpdJPnu3iwsweb/ELRTzHq1\ne960qjL5P6XcMAIDeMLqd2iqjg/H5n/coVDhhlHJUXhXyfyTZYV4MnePeoBr\n+MEZv1lmK629qAdHiuWlyYpgY34WXZ41KQP0MEgvAavfLbTzcYvXbKeOnhxw\nfk0XLXA2l3I/wn/2u6YIypf8ADJo02csN3YmCOjg7Gk3/S0BGxd8IT677koC\nPWAJsc8XTxnwjXpwvp3HzSBil0YvdYFk6VqWTzgycDCgjVPYSkYw3VD8IHTN\n/GD6Ph8B6GmzrqFfpD0Czuq8crgKH+hTyxb5r2vB9mVaxItmw4iBVTyUgyW3\nWzawqNWdT9/Cg1qwss1OaMjIq+qUf/NQ08uNtF4a8/oWYRjvbfbh5DQoIiE5\nRHCfixtJT6pBA7WeU/WSMc9FbWmw1a2ZlToP7YhMSZVp1X5WFNj3+CradoVr\nSZ/r9W4ovQhx3HPztyech/UDGWirk5R0urbL06qYhqfAvNUAMTwVUpXx9Y3x\nz0MUFaBjvapb15jatetxkUphMXfB2c75TXqhSmgLvI+/lpQ18EcyIqVcXBg7\nL38srD5omPW3mokaQfGWKHlUB2ILN2uHB5ALhDMebP9fG/bi9J95SH7ysKzv\nAfgR\r\n=H5LU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"409d897e6f20b02cec039db52c2d4aa31ee15a5c","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.1","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.1","@storybook/channels":"6.2.0-beta.1","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.1","@storybook/components":"6.2.0-beta.1","@storybook/core-events":"6.2.0-beta.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.1_1614052051134_0.7850690288069164","host":"s3://npm-registry-packages"}},"6.1.20":{"name":"@storybook/addon-knobs","version":"6.1.20","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.20","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"50e2a6e277fc44df9d50a04dad51f574e4f76f60","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.20.tgz","fileCount":95,"integrity":"sha512-4G39Od9oRGUgiMqd8ukkNj5TmD54ZPUiw7u53J0gxIJFhgeInhzIE7w754LfaeBaaQ62OIqtc43r5BAKS0uPgQ==","signatures":[{"sig":"MEQCICacbvDyx6CL95D845kYmL0qrdv9lOnZmMh+Q2tlUvIVAiBEy/mCHUwAhWe3fh+0R3y3TwomXZg3ryUdcVqMck2wpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNdo4CRA9TVsSAnZWagAAYeQQAJif9h1+nd8Q6kSthNY7\nFBZAL+V6g9mIUhYMDZm8K/BlQ5z4Hf89PRBFNyzeI87VwpiUQnvZBvIQ3VWx\nnC8W9HGDDRYfsTbTutv2svGm+XFQxzem0NTtk6QPYhx8EnBd7NYfvYWH5dLy\nkjWoRXeOzG/rF2UW+mukkmnZndjlWQobcTAAJVkXU2H7MFO2NPA94alZc9/U\nszJTNd8R+51Q6wORSWFC+lT9Sma429JLYMxEB+FPCHCAvyLT9FyYaG7NQ5kb\n6RYp2s1e57Vhv+VFqThPEgoAlS0w+rm9a1RiytApp8CVNO22UR1f6kh2w7T9\nz31ZlU196Vc1H66Oz5N7PQxzXtBWPpmfl+0CBlTssMRcqsys2xOMiKrptx1T\nsOR3uZV/MmiS7dvBE4zFQKeuFHnnm/Pn3J6gctexQUKoqNlN4dpLqMe0Lx74\nUBwusBBK2a0Muf5/puDs3PHbOnEUhdtNazx0iOTzW/BzRyFfsGaKA2St5BVl\nQq541iZxstXB2PYfY1LcbMRdlkX+K2rf6hMpDsli5LS4UT9143kEeMfTV4KE\ns6XbG/kAnQ1TNUVG1h2NQZOGdYQNmCD8SV+27MjPTTImBKs1Xb5fwlDD/BOl\nwFHzOkz4uX0vbGyAceONHO3/LH+8tLZzN8tznbDoZasbT9+qTgAeUuIypiAv\ngyMd\r\n=PIB7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"d09748c50c62a08e0498b681253cbfd9aa16dfc7","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v15.0.1+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.20","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.20","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.20","@storybook/channels":"6.1.20","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.20","@storybook/components":"6.1.20","@storybook/core-events":"6.1.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.20_1614142008276_0.9499995769689069","host":"s3://npm-registry-packages"}},"6.2.0-beta.2":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.2","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.2","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9a7f86c7e4099166419be200541c18dd5dd633e1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.2.tgz","fileCount":119,"integrity":"sha512-iObKuVV/BsAi3j+vH04vt+f5XLefee//+c1d6XAoOQK0mj/MI7yw0SuF/a5uV0rn96x5O86TrzraQGhvMMAUNg==","signatures":[{"sig":"MEUCIFf8qsQzeDXH3nhBhhJNSETVMfhSt5UxEir5VLm3UeWGAiEAq9/l4YadnYFLBJHoyexGtoJUSL7OhjPJ65DTrYzhCdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNd6PCRA9TVsSAnZWagAA7c4P/ixz5YR222swmZx2l2MP\nQYjY+feysCSBWz9bQ/i2QySrccg5rIFEtV6Ahys0vZYIlNcDiyH/4xm3BQmV\naCze7m3F0Q9QDCqho54ZROAZFUCJoqWcPXJd+GLttHrbTNnDEQuEOPlHzVWA\nCD5Fg3uS3J5Sk4MQLDzdCWR/1MFJiSxx8J6Vxw/rCSzMQF5LW3+3n6r5aWTb\nXdYa6m9foQyJkbukHHHVFTJMxykKXc4MAcYzluiZ5l/gUDU0QBdgaD25yHHG\nBt+75N1ktdjUFD4Mxv8QHKKSPpf/rmpwOt9umk6sQtitYgCfWoEwT57NS+ZN\n0VJ2ZegO3ssrN5En5UrdcFDRAnif51X3BFtEioGN6sfdjKQOdjNoNVZaL/B6\njs5HdaV6xoErM1DqiX+TRHxQ++PcPbl8141KNR96mQWcP5vD1s5IQjwi0gVZ\nF8TVP9vdC6mXXiDR5Duz6XdTsyb+PxR/AXQ3FBAiSDg3IDXOkE0KVsD6hGT3\n6+6wjMxv3Ft1Iah1kONnJlDoo33q8zkeIeee3hRzGhMSvmqN2pGmyKLLLa3n\nephn5g8pHve7P2/bXpLavrJzusCIoTerwFENO18yL0RzaWBsGsfrKPklHP0A\nQjOLVHjl79758hSLI/NQWZrykIJ1nVh68K3AfKFfWWlNcMEEpGdV8W2DDdzM\nv7/k\r\n=2uhl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"6836920db1cfc4bdfff3cead66265e03ec253eb6","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.2","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.2","@storybook/channels":"6.2.0-beta.2","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.2","@storybook/components":"6.2.0-beta.2","@storybook/core-events":"6.2.0-beta.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.2_1614143118737_0.015048660521590485","host":"s3://npm-registry-packages"}},"6.2.0-beta.3":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.3","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.3","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a8d8475fd1d55fc89a9e01dd0338233580e276e0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.3.tgz","fileCount":119,"integrity":"sha512-m8ND/le9F3bpgpWLWMJgiOf0Bcm8UuTX1enPjHIuQmsre5ktEfFZF+rMJrLCrXbQBeSYE0nbJa60TP5kcwTNaA==","signatures":[{"sig":"MEUCIQDgUHz4E5L2unYah9AosMImLly+SAg9pmapHM4GiXCqsAIge0i9pNJYkJN+EiALoWcxtol9s3K2EcTJJXtDJQRzGXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNxmECRA9TVsSAnZWagAA3ScQAJmkooIVOeoKvi9V3E+Y\naWReh7q1/t+Q1AdbeDUAoLIX5X7D2jRO+BdCYiw0Haj9ynZ+rslJFx50a1T7\nosJq18zjdwJmqtDgHAvR4FfCTsTMkBj2EZfPwug8wLSKSSX1Yte0dESxVHWt\ny402eFLCy2AzpNrpnIiy0aeJFoclG0EKrAXjgvFz1KDJWY1TsZNeH2zzYhJ5\n6FKbedVIa9FD50D5HffyX8cazcTyPYkP2TjRiUmm6MyosXIXXS6pa6hEq2E9\n71aHjeRyH5Iyb2QXdVAwqoQFLRftV7TeF1aY1FJHTAldmaSxUaGj5M4f7577\n6Pe+Q1lqZUjrDo2nJjoKQ9OK2rf6NZhOHEBgKOYFX/4dWvMZDaaVx0vQYIMx\nEmR1+dw8CWEAR8jnyTA/LycmFILVqMfPdqdMe0piFtHFSN3j07XSUHHfOqet\nTvbgFMCMrodC8f6L2HpR3jaPQxsn0kMreXG8RBu65YQjEEsAhJemwea2c1aQ\nCetRcsn/HT3l65vMSJYjo60tvx5Df73tZdpA5LDLyDHrNqgYhnaLE6XRGL8w\naXpakEl30ddsTD9ulpt7Sehf8TTjuOB+33LQVO9Lnxw7EEGiR4H3vIy5cgDJ\nvaP1OYAHdErCdpn2CJ0/ZY19j/EAUGPv+UIJd39wf+6fRAJjWRE1ws2XOJXA\nAtOJ\r\n=Xdp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"b215c5d3604658fbd70f9a12313a811902813000","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.3","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.3","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.3","@storybook/channels":"6.2.0-beta.3","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.3","@storybook/components":"6.2.0-beta.3","@storybook/core-events":"6.2.0-beta.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.3_1614223747825_0.8119344627320815","host":"s3://npm-registry-packages"}},"6.2.0-beta.4":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.4","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.4","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"2962e04df59fc139da8eec9e8efa804fd8246edf","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.4.tgz","fileCount":119,"integrity":"sha512-A5Sr1sK9y2LpO/wT5BgpQ+COfVVwF/AnaMqKIKfTC2PJsGP7mMkjRrVRiBt5dRT7nnOQjH2wLiLz+6adkLD8zg==","signatures":[{"sig":"MEUCIFRGpQCraPtOUj5GRs4H+93m26TPCnbkTtqFUGJ+rCzTAiEAoA+wxXfUt0eWYoChXPVxF+74P+1slRCXNvEeQAQqRVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOPLwCRA9TVsSAnZWagAAnNIP/jg8B53gxU9zQ+w3VmJ8\no7LkRCpkdBx+0iB5um8LYIYsVguN1xvSfREtPA2uTQx7usAqsrqErv4FibWN\n/TyQeWiV8DsCA+K4dB7yVKZ3Dym+Gm0Kvvd52KtcCfH7uHQVKOdrIbaO0YW9\ndapmAlpcnh4fP8RsotheF3YkA2VKfaM754nqO2jriAqgbKDV2c5LOmN83Xli\ngzmYk5j19t7V9fNC5klnWN6G4sVPyZY61DoLdmyumH/MQ9KharimQiyuaRUY\ndtj6HkQXJsLBxiq3KtNaLZ9FDM2bkVrfjnjDdfGyZ3Nk/+9qXc4F7qzmfXpO\nfLbLcs1gwuFd2eOSIXRzGTS1Oeq7BJ3Ueyf96FPRwOZ6gkV0RSoMc8pwR6b/\nleEdCTRTdVVGmMWkqjmNuuL9W5EJ9qxyK9MfWz9Xok1fmBWJJVLA4FQ1TOPM\nPz2b8lhUTcDktyscsT/orXv9fhZ9PHzZPpz+NGvaBadSU5PWRc8jgiMj7E+I\nZMMM01rMXk1pxHTHuk1Tysl7nckloasreP2VjVLYVhoeEjbXHmZE2F+fVLMD\nIc1XKanaF6jMkKcONZKnvPwV62rXt1ndG2wpqF3O/7nJAIOtvejzI0Vns07L\nhLtfmaTFIZhiefU0Y/1hGAQpSFHCijYd+s35L6QNSfIVCsM4d7QDdn/sg+mV\nTt7p\r\n=fxCw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"09707a9b0355643753e78a6dd49f047792efae45","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.0.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.0.1","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.4","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.4","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.4","@storybook/channels":"6.2.0-beta.4","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.4","@storybook/components":"6.2.0-beta.4","@storybook/core-events":"6.2.0-beta.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.4_1614344944209_0.5477335416141327","host":"s3://npm-registry-packages"}},"6.2.0-beta.5":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.5","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.5","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"c00290040f63c0dda48bee2ce27c3e811dad04e1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.5.tgz","fileCount":119,"integrity":"sha512-voH2o0hcFF2tkv3Cg2VlFSmY9BbKqnBHTKiaELBu/PqghUSVNj0BYHdSPumC/QwsTEBkJQ2ytZyQdaPEg2FRFA==","signatures":[{"sig":"MEYCIQCkc+BVV3jPhLptVdethtnqaAmiI1qy+mC0Vg43bMSQLAIhAJQ/PVypZThEWjCdYTDESFjp6HMXfZQ+sckhLEgbjfC7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPQgWCRA9TVsSAnZWagAAmEcP/3x5MJtd1QyxdayDo7fb\n/Rz3LPkhAPhqeT7yAH+3CHh5xJc5tpscP1Vk18uoe9cXvM5UD4Fdi0tiMfJ6\nmj4fMD2upy/5pj5odratrcSINz9q4C4cdvjXeG4SVB9Sh2NXilpEkyiMNMrp\nB4xRwlzxYA8nM2WsO9ft78vFBl4V33vOnYtlPDcQ8t4rmz/QvK74nArnI4cU\nPlzP7NIr0G/bVrzaGlRVjNmaSZxrmLnGwHQcC2LrqKTybcSyOO5fKQ5ZLpqB\nQnPHPwwN/GRMhWbmT9SXBjo9KahOMGJEn3Ph4t9tBsXMYzAFuLCaVxhTgxhz\nzZ95znGL9cUasppDnHrVVru0fMuGv2xN8axJ6rYSnpwk79Px4SxNClIe5bBw\noa5xWgoAl5XpiaD7cOhN8FqQ0HYMSpf9mSjzA26Vzl0RoIe6w7oNbTSvbdby\nNbbMvsAe7be97HpfpoHq+8hAsT9EDGZddliOlFpXlceg/1xnlGMCT7S0fq0i\nI2kp+RC3p6PEOSaABAHrqIgPPfw2yz8634GX9xLskYF3RqzcBekgSql9UYwP\n7mlT50eGam9tBmiBzJKeydjAk8lk6AJkvKKgKsSZQMWsXdbgO5DwrtsN78CO\nGlHjwA58PzaEGG+edAcSx7fcZayWpU3qonc26VeMowyIfX85np0IMQerlgQD\nRAuK\r\n=ynpQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"47c4c3c9da9ba875521d21048feddc5245fecb58","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v12.19.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"12.19.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.5","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.5","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.5","@storybook/channels":"6.2.0-beta.5","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.5","@storybook/components":"6.2.0-beta.5","@storybook/core-events":"6.2.0-beta.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.5_1614612501978_0.6161036098287505","host":"s3://npm-registry-packages"}},"6.2.0-beta.6":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.6","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.6","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"74f3ab7e199b0e96eece14fe28f0c1e6a9b703c9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.6.tgz","fileCount":119,"integrity":"sha512-yQRPSUQ49PGFwP4a+is2MgLLwzGeCZk7e/yXfBxRoYh3ta/Kg27DQbsg/X8wAt1nIr9urQu0TMeMKltL3l28iA==","signatures":[{"sig":"MEYCIQDh4IJ3PlRAmQ4tiN3WMHwpMWHENUrdLSIJRZEgJHm29QIhALPZ4HU4P0HQ7eUIuHWPEeCpbWNpoIowQfAhZsqVQ/bC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP21yCRA9TVsSAnZWagAAjB4P/0aVQ/bjFN8HAhHIRJ5p\nbOh2TpLo6MaJ0CipEFUB6KFcdFOifcGEDyVs2OmjAd9WOAfXjLB61O/tVJVv\nNNPyVJNCuIqN+jeWSff7SjnvRV3E1ol3xkVsI3F+EAY1fyHxtlLIf2nz0iwo\nzy7gkp1T0sGFlU7fE5gV3K32y1ZhZO698SZL0iEC+5NA9o/qJThyUQNcuGdc\n11nToIPBx3qgb5CxoPbtqSaKBS+OPb/Ti8mzkFwV77a2bFCPVIH7LLZQRFSm\nQBp4Nf9WaO5gesFZ0GG7v0GDLqIkuQ1dpIkf71VvYF6y70ulGmKKxPHxoy7O\nFg4EY1Qd+8QMkDiGNxe24glW4i4JkDzDNumz71QiqtL5L1KhOmqUGP5Ep6c2\nSoc4lwD0EsvjdRhWKD5MJVZqZi+Wc7NIpN1ZnIblGgdVZFzloeRrs333ZKYv\npAp9r3rpyixVEQH1cw0ExN+tuIogvppQgX0u4kKOOXxCXF4kT+Wj/gqS1TFX\nutw8jLMIgH6vwNjtFt1/kiGaCNQuE2y98M8I5tbEEt/ZHdNB1dZZFcFO0q78\ntFC5p8fjYjmyiUoGH6V36l3Pb7em25XyFHIpd95udiQkfe3mdZ/aueO2Z302\n7+SuZ6i5cCvyRVoAaTiYCB3Dq5bmYaKNu0fYdXkg+Ydf5m8jhJ8M2BN73cAI\njc9e\r\n=jWwD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"22e2b232d5b087f1eaebd4b41484c23eeda7ad2a","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.6","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.6","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.6","@storybook/channels":"6.2.0-beta.6","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.6","@storybook/components":"6.2.0-beta.6","@storybook/core-events":"6.2.0-beta.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.6_1614769522476_0.9933381007104884","host":"s3://npm-registry-packages"}},"6.1.21":{"name":"@storybook/addon-knobs","version":"6.1.21","keywords":["addon","storybook"],"license":"MIT","_id":"@storybook/addon-knobs@6.1.21","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3b732baca4195a525629705264cd6f23ec7afe8d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.1.21.tgz","fileCount":95,"integrity":"sha512-VARcSRNcvjISwxveN2o3tZUnbFzA7fLLqVBvixN0wvvbzhHtNtmQgfAhUzq43Uyd2joRcxiV2YXLeJ5VHh4BoQ==","signatures":[{"sig":"MEUCIQDVJyfsXTsdmzPgWTi5pEdz72hdM+oCmsk0mIRHWBuD4QIgCngvrUZWgnVsEq5102Ef5ec9fNQ6nQmS0MIyH0xe5qo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP3UuCRA9TVsSAnZWagAA83QP/iJIaVRLLRz2pv/DyeZ+\n9ry8OOxx2rTZKJU/xHACnxbChH32r9uKzM6qUcxFH9YMU84oi6lf87ug+O4N\nPZ5mS+bMSduwNRDOzvuZyGLDd8f40DsFAUNZWc1aBZhoJ3xqen+y2RUYKz/b\n9HHQizAXyDfXAGddhmKrroTrEH++1njqXr0TzAiqogI2LOB9fva+WPKxNGOB\nJpGPQUCX77eLDKdobDCuT4uwFFIm+EXQATwAUpwhjS8eSxCXEHTTqzi4fnnY\nOquEReIFAAnAvgci46Wy64K9j+rmHCOSqkgOA93ZnvkemvEKdo/iPovd88L5\n+5tHFI9tfrfFrRt9/0zoM1emtVuRr31Hu8L67KH7U1xzCC6j8rZ+aJNfkpIC\noQIGsmkwiOeyK92W61/cKV9lMGjLXobx2hwDdUtr+GHwIsltfHKrP/jpwRHs\n6j49yGm5ypIUQ0iTSSAeb73Z7umeOUDogDFgOnDk2jMdREjkeDQ3LkQp5Zq9\nxmO79QFzpZkbI4f/IZYEqkmcJzr3kT4tBLa3FzrSXixiKkph9m/DU/ejGs9+\nOqTR/wBloijzHP+DnuYgBSImCIosBMt67IcUxgWo4mHpFm/Wl6T5vE/Mej+f\n1G7CZbeC/gqW5MtKyciABEZUPGxrjMtWSXVPr2NwyFKDRRT5CL5Hk/nmkBbd\nCpMR\r\n=JA7o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"bd1d47e5778d40acbba8fba7ed11c46f9c995273","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":"git+https://github.com/storybookjs/storybook.git","type":"git","directory":"addons/knobs"},"_npmVersion":"lerna/3.22.0/node@v15.10.0+x64 (darwin)","description":"Storybook Addon Prop Editor Component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.6.0","global":"^4.3.2","lodash":"^4.17.15","core-js":"^3.0.1","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.17.0","react-select":"^3.0.8","@storybook/api":"6.1.21","fast-deep-equal":"^3.1.1","@storybook/addons":"6.1.21","copy-to-clipboard":"^3.0.8","@storybook/theming":"6.1.21","@storybook/channels":"6.1.21","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.1.21","@storybook/components":"6.1.21","@storybook/core-events":"6.1.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.5","@types/escape-html":"0.0.20","@types/react-color":"^3.0.1","@types/webpack-env":"^1.15.3","@types/react-select":"^3.0.12","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.1.21_1614771502149_0.8628464085274254","host":"s3://npm-registry-packages"}},"6.2.0-beta.8":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.8","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.8","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"05c66704c5686d1cd3c097b325f589c20cb4b6cf","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.8.tgz","fileCount":119,"integrity":"sha512-bnstlebi1D5E6Qqx+fOrPzvGrceTLOIw43dbHE9g/0bZiTA1UQs0/tzeVy6jWY4L/JpLWQeIJDnmkD1WnioEcA==","signatures":[{"sig":"MEQCIHDPOtDyI1X0OPYpJiMD2LwmgT0SIilKBanLb4doN6+9AiBlxg725y4eJ504iJ/EzSl5nSSZXY7bhW/eOWgwZDPfTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCNPCRA9TVsSAnZWagAAKtcQAKAEDoNWzp5PquwFtS+L\n55bp1PfHZHoXq7/WjPlRSyo3KKtq4w0wwPRd+jzWv1ON3nUDU/MFp3YGJJq7\n9CxFUQPqcx68rSbk72cDTcRG1SmwLS4WtXIQkoCSsJXW/8aFDN2hxa1sbb4n\nEm/t0pvI4idg7wm9LpCqO3IEjmpJu2Okg5ialLdrlkSDpItG3n/cd9ll05wA\nEQQb9NqHvBkRdo1E4Og/5+Lwiow7wfPmBLlJJycMQH52y6H8rBC1gzAg4ElO\nFQoieQxE+Pmqwcml/ZQ2XvLcTdd9WTz7eRgIi12CqXeDy5hpqJhkQYu3uvwI\nnXTxC+KXVolUUZhSsokAEOFQb2p+exR+jngwufLbyrm1zutEtJyZ+IuIGBif\nITJLokCRth9em6MBvZf1iCA/bH2ol84m2Kz4Cu/BNMhs+PnZVrbBPjRE5sse\npJWSE7zPsMy9CHsqZxGRRXz8odD9/xQ0fmJpusCcFobuAq9RvESGXkxR0jAf\nNsXmDirr+yJsY3qz8TVzH+HC331kzcLTcGifmjLH3+EbGzeFU3oXNXoX4GzU\nhIuM2kHS3W4XgYHYif9FMo+eElIeOqhhpBJK/zQ1/hrF+cnbd/6tmeQxtvjV\nQ8erNGREXju51foMV9A8nT1O+H2XFfJhRM8WMNx1pofeEe7SLvfuJwgVTR+P\nNtxE\r\n=T15U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"8bc0fd1fa33393abe53b1b1fca19501d0f22f6e1","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.8","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.8","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.8","@storybook/channels":"6.2.0-beta.8","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.8","@storybook/components":"6.2.0-beta.8","@storybook/core-events":"6.2.0-beta.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.8_1614816079142_0.3961034738311249","host":"s3://npm-registry-packages"}},"6.2.0-beta.9":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.9","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.9","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"75ded1c2147fe096d7e3202d1103b11a23ebd31a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.9.tgz","fileCount":119,"integrity":"sha512-6j3tV0I3GzEH83a4qcuy8OAT2anEGfuZ+RO+yrh+lo3cE6ug/wFDCsHBxi1Uo/euGXZMpvVxcxPgNGQid3ircA==","signatures":[{"sig":"MEUCIFvbLquUu5L3Wr6IYwKq2pXtXnYLceTYAQK5QGQjQ4ihAiEAhbDOvTSU2hNg9WVm1Iw1qgQPu+aDelb2FxJZaRQzmiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQL+iCRA9TVsSAnZWagAARswP/RFby8OC37HvnVQmN+qY\ncf0WjwLZP2A/t9tQEMxx53g4l/IMLUWbTAFHAx2qYTXs0uA66a1rNODtp50p\nNQeVa1rIn81EjvPYt+CXEx37AB+uMXJTpRVA5sTWprXp7nfczw74bhZ2cmMS\ni53CGsoPFa3zTXJQKPFelW9w2vSaiKq8qwHQmsrNIJNiYwTqBPE8sKwP9PqP\n/NMEuPOVs47D1Pm3zX1s1cPcHwG5DHtfqxSNfiOi33OPDEqj/UP1JKpF2z++\nLgqe1kXNLMbtsZCRwzESzUq9KJHy44mPzJFJK3AqJnnUd+6GUyCCTjCAJCfs\nIKCdMmyXmIKZkl+O7pwKG5E22l78e+XUpPcVoZ6fAPajcranrxSlgLiTVo1V\nUN76PByjPbaFYyoUz6GphIJGVc7PT89srfRs2VUvz4rw+4IH4LnTqNO3QB1A\n9fuh6wGMjtJhD0PQERFEgARTmkd65goHkHdWtIpON5/RY7Fr2oawkfniacSI\nsvKsQbNhg7ycBCZyawsRAtVulMYoNNTBIFeWe3Nln+xZo05HnOqS/61dwszi\nuY3ZV1Fmqi+wm3I5dt1QCbujS/sLnsuw+wjt66kw/rosEJ+mSYqwZ70H73vF\n4m1NBk/eb+MUyJrtYXa9W0YbCEyQpKv/R31Y9gresPQCMWlggyqhC3Zm8sU+\nO8Zj\r\n=QHtS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"a0dbf155e318c14aad93267d1a3ab8bcee87cc67","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.9","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.9","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.9","@storybook/channels":"6.2.0-beta.9","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.9","@storybook/components":"6.2.0-beta.9","@storybook/core-events":"6.2.0-beta.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.9_1614856098288_0.3960577039802162","host":"s3://npm-registry-packages"}},"6.2.0-beta.10":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.10","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.10","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"df08af0fb0c3e771cd6b8a6d3ddcc52f6e9742b1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.10.tgz","fileCount":119,"integrity":"sha512-X+MueCQUc+pflnk2t1HiXq4qtxERVR/3cckF0kNbUaiXhqHwqJRSBh8Su+onM85Z1cKvjs2/4J28cEndLLnIUQ==","signatures":[{"sig":"MEYCIQC1B9N10dIVQvtZIdUT+DenojolwBU5dIScrcMIcsIIZQIhANdHZOQcrpvue+twAjiqr1pzLGPMc/JZB642dQ4m1iHq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQgCGCRA9TVsSAnZWagAAP5wP+wZ3z92rsvaNWn5PwhNq\ni7OhdxZA3UcTMrmmunMCBfHQV/4Iaertls24pnvCL4sWjxpQIDpIcKQ1C4b6\negtteZmT50xe67dfduYrt7FLX00WNqv+oBghOZHafR48+ZXjAqUUAvn1Bqpj\nHUX9ylPJXsVtUISa4+bebHOhPRsvMhPT7v3UdTViu8UL8H6NZTkDqTLGWdgF\n3UN+R883IKkKQccjZfeRfJGWr7RGKM7kj6lw5LX726vWcdfnMHwzdwwYlmii\nFowTLSABdpQT8y2qOI1BldAiBtiyGsyIZQCqBtBep5Z87Y7cpjH1tDJmTuEp\nhVMV2Bh9YQ9gfwRyFpy2KlgAiEjIiGcj+yeRB6T1vML+etRp877O6NzL25gd\n7vyZPJEMlMACCREdRJV8iaAToqK0pG9bxwK8atuAz8OItO7BJS8N4pVnc/wn\nWd2s8uVOe302oTxRqGjnmatF5YPsf2yGaIbT605IaRVI2zRXt5XOwjz332qn\nWs9wWdJ+ulRdwZMyWnGhTx43jLAZMiQI2V74+oDqJHxt7eoib+NoQ8Qlqb1a\nfpcZurWiQaCU4j2gSWOTVP/TKPS0HqVRQKcY1vhMW32dJni+nc2gP8l5jHwn\n5cl3gAygO2nsyHQJYHAWY92HebKtUBpHTrUdoiX0ROAClrCqTEQpeobqat+o\n+/FF\r\n=vVyN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"50cd75edcdf233ac05231f8f0a95643e6e2b52a3","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.10","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.10","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.10","@storybook/channels":"6.2.0-beta.10","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.10","@storybook/components":"6.2.0-beta.10","@storybook/core-events":"6.2.0-beta.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.10_1614938246499_0.799002952709142","host":"s3://npm-registry-packages"}},"6.2.0-beta.11":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.11","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.11","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b903abeb170c4b5e31a84c8e6170a0bc3a9326ef","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.11.tgz","fileCount":119,"integrity":"sha512-81HjyDb5P0eIU2p5WZ0iORB5ISiyb532PQNNDV0Lt8SIvNZSQWhB9lsEYOz5MC23KbCYJBIPolg4vYg1WuhjrA==","signatures":[{"sig":"MEUCIQDd72RGB2GvijrXmLh9QP6vYbLbMbjQXVT5xY6FvqiLCAIgN2NDbZ389iid/9pFoA18mdkX9bl2OoHQEtDp+4TflEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRlX0CRA9TVsSAnZWagAAqlMP/0Y/eQPacReIr3z9kPot\nZ5EoiHMqW7m5ZDHBdiKSre3A+tLah658isewNeFWrqnIMaNGdbFbvpbZ1nAU\n1kNT7RuJyH6nicZmuzaTNBkI9aMeUaDi7MI+w7yk7UA5LnpH2WM/C2wG4KJh\nitdPJWY41T0G3sx576P39J0saLBG4Dtw8TNQYVXnWaionYkfgd+cXEE6TPEu\nDpy4gymgoAtZmHvWW9jd6jP002FZ6zdQUgEdemG7F8yvVF8z2dJQba2PjNIZ\nZy5d6MevBO1SU9IQQ5Wg59vSRq2m0AKNTlxUFvvOjtw0NeH523DOjTzC3Zep\nzrBkOJMHRsd4CZuFqJwWFvq7V9pAzFouyXAIEPUNoKRMfSodIsyDtKOF4p2I\nkysSNJ2t8adImULeu/K9fTfj9ZbbGRPgkgx5XNWD796pRLsNrMtm6w0gRpZF\n8Tu0e1IJqoeb+K16IMvsHoZr41QNgAG0huyfiqIKnowONGt3BNjeZFqmKFwU\ne7c4cilLnoF7rYpIQIACNiwIJxtGlLJ4jmEonybJERZrJKg/QBmw9wVAh9ed\nyRyJ1FmIk3Utar5cKTn+8FFfqiqkLzXYTt5MRYfw+EMsBcAK+CVR7Ab18hfe\nkGCXyljcLD/LplkmFCed71MKs8c1dJSQkvYlJSaVndilVKm8v7bulu6QvSWm\nZqBp\r\n=UKTN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"8a25609d3080e5d1ba14d8e7111626d4770d5740","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.11","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.11","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.11","@storybook/channels":"6.2.0-beta.11","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.11","@storybook/components":"6.2.0-beta.11","@storybook/core-events":"6.2.0-beta.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.11_1615222259742_0.9235826837693661","host":"s3://npm-registry-packages"}},"6.2.0-beta.12":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.12","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.12","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f103fa6c1470121830ea52e0e5bcdf4ca6527bd8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.12.tgz","fileCount":119,"integrity":"sha512-hoWlYl+SPRGVwkujP5ci3MBKiVdUhixZp98cESQ8hFYasu8FRc64ASvizKqjZ2ZEQRW17nldDC+xixDJLLI2sg==","signatures":[{"sig":"MEUCIQD6HExGp8kPWWf4JjqGyc+G5UCO7ze7p2CGVHcXpmw5DAIgCSuu6mRH3Z6ksWifA/D6wOMflrK+HOSp+sDv7Ews0+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSAR6CRA9TVsSAnZWagAAF2wP/A8JReiigeAtG7wA1AMt\nW3EwCIIIPMM0SHF9XEpIg6SvbvVLBVTv/EEr6e3tSj8GKam33pdVg0iCejxw\nWAB2O+ShUqhb6SFtTpMqnoHijYfb2zwf904TGp/noaULIqKE6nrdNaZLYjQ5\ndtSqLOxqXabqTs/pL9o+IMp51jgai2JY+FMuj4v0Q5gNaB6oDWygv6ZBUjZ6\nd/fCi69QZ+ObYN4Zh71+zQDWj4CmZSKO3wxq9G5xF9FW3V3rVFT827RUTCF7\nNmbhR4qxQ1+jAdh8OJQ97pwbm0grO23kQbWO+CCHExB7jWQQj2Yec+RQ5vBc\ndR0F0dN2VQJF85zlWIOAftAF0jOfwGw8QgVka/oAoxBZ33hLfhsIKeWTdXJq\n1jAtfZUGabpN5vJGMZsCPFEiLzw8YeIbqn7INlw6QY5q2USsIvD4FxD79ZKe\n1pQyHrXEcdYoeeXEpC8PiYaWDcyHgFr7+Q+KikZmqwTJaDAKWrfREDQteUpy\noOI/4G1futb7VLvHjpxh3vjiGDdudSGBh+hAp+7EFuA3l5MhlbJdCBTyTBKx\nLpcs8q1J6o8kCd+frUN1Uxkn+KuUlZaHiD8gfsPgqOEdFfyBVImDvu13Hi4i\nuBz7xOKE9g825+EznyjIanQVSKoB+VAdhMdh4w8F+vt7YSMQtQE8XVDZLWcl\nBHu3\r\n=I9Y7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"2151d99b4ea5e2bdd9634055f55e05e46ab50c74","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.12","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.12","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.12","@storybook/channels":"6.2.0-beta.12","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.12","@storybook/components":"6.2.0-beta.12","@storybook/core-events":"6.2.0-beta.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.12_1615332473971_0.7437784577475937","host":"s3://npm-registry-packages"}},"6.2.0-beta.13":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.13","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.13","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"645bb4edacb1c1e58d233dfdc4cd5513e450c6ec","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.13.tgz","fileCount":119,"integrity":"sha512-+TYH0KOTffDXDUQKAzcd+qiPfJEpOgOm4gf5IumE83+Os06CiP+zV5qO9iUKlQVGQAOYPUZMz+x+CSRm6aH4eg==","signatures":[{"sig":"MEYCIQCnRoBKi9Lf1PvNgyOAFUY0QsOCK+w+rvCd390t2WtT0gIhAKPMWmvpCpkZVMsnmoIgHLz35F6ZOHdZ70Jlk4ylOH9Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUmBCRA9TVsSAnZWagAAML0P/i/CNQB/3M7DV/Qh1vDq\n+9xLfrgDFIWLHo9t0AEuBktmzWgY0xJrdo8sMxrOJkfEw9KABq4r50blUFA3\nd4XRPANfupDslfPMDvWuwZAhpg3/tTuuzrbvF441bnbOgIRPtDgu21lzaXUN\n20sgLT2doIF0lrWfM/fn/23UUkJFq9vJHTnnz1sYXpZcaq69TRi7pSjFmEtq\nxEWn78rWf3dYcpbO80Gad6T1HT7UIvsyWN674i9YsG/0QIzeMHtVo6B47y15\ny3HlQUjPK8GNo9L9bYVljhJCWGthKjasepRBwFDGXVMkWj8/tf4ofW+xpbtF\n3KZMFJ7ml7stjttD0CEQi1O3Qmzxci5fpkC7CDhZuCSU9SFwZotWzrFoMXJ4\n3AlGbQGyf1LukIon+LOn/b45xf22/ucsj7fu4ntyyZpp/pXNo697yg2nQI4G\nzh5s5mUYIFtnhyQliG1C1LI9pf78Ypi+TNNsEKL1E5JM/dtzWQGkdlqTaiDk\n8TruwATnvu6QI/5bml5fIYyfBO/XFXW1O2eOA7sj4Fav3j3Knn3TpOaWAvbs\nG5tj/5TTNSxERIvB93jOYqedNOPvPFpj24HMEY2n6N0inmv6Lc0c4INoV1vK\nEWAkBq6gyVDPr7durd/uFGVOMpbASR9UgOZm7dazWMDrrAFsztQWyrk/Qp0g\ng+EE\r\n=B8ou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"9b7aad4bda5a705ae6faaaaae64c0eaee4cf99c5","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.13","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.13","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.13","@storybook/channels":"6.2.0-beta.13","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.13","@storybook/components":"6.2.0-beta.13","@storybook/core-events":"6.2.0-beta.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.13_1615415681106_0.9309029626859704","host":"s3://npm-registry-packages"}},"6.2.0-beta.14":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.14","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.14","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"456beb0e0ea055ad94935b47d56f79fae0476b99","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.14.tgz","fileCount":119,"integrity":"sha512-Sh38uGt6v+6XYc6o6ARnGzyhsZ1/+awYPIoNJApqyJ5oLEjVfsx3wmGm7op5NNfBrKMM+9Y2BYPsTUCvkaU12A==","signatures":[{"sig":"MEUCIQD5bPM+twoKkO2S3al1p3NBQaJXzXr6i3YqEa0lR7Lx+gIgM09JsjarFDKjj4T32cYdQhVaqVF7vEauEHxc4oVJbUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSiOaCRA9TVsSAnZWagAAPc4P/08W/7U2Mw6AVATVEj13\nYmXkRY5qMFgi1jrnkdF6+d4Gzl6wpCaQtV9q5DyDkUB34exGkgsV2jDDiag1\ngrgxjpFv3cpKa20vr2MISmL+m16h311pkr2gzH2e8iPFzMlHDZUvqvIojamO\nEdpep/cpJKtzVSbQoviODs2/oF/s5v9keOqH4ShuMdZn0dNqUBeZl5w+4cZ2\nC8mJgHGIv3kEvAwDI8YAOmRrWjtpuiNyAl3VnWcpNOc2OCCyHfV4Jjl5MBi5\no5smYc/S5Kp7NwJtYmfDBCeZSFuYYo7m0f+EKeQTXXbUCurAtQvhSQLtFW97\noiFp0bKgJf2OL86qRT/zmD6QfsE3lJwi9xWWF49/KJdzdU/yTCs1u7dYuvwf\n9H/04spCtXht0VXkU1S2Yh3On99H1nPH7wfRuplV24PJwFKk+dEsieZ2Tois\nU+8AMeaRJ55gi0mLrm2tYrcmyVyn998YvOi/7IZFnRz19WaZZZG8pmLiFZEt\nFDqHlUu9B5NsCKfXAAo6VxLh2BBptynLzremRyM8ca2noxaqs8hup1jTFaWP\nXWmdxBEPd/pBStVCVbCnhZlCDE8SpAJ5AxJZKfmNA8VLqgyqq/qV2TzWDVV6\nty4gQLImzIRTjl7D9dyT1GrJteI8ne6Qab5SN7Or73u0CANeD7n/ZszbAzug\nXgVx\r\n=AEgm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"45957443c70b308214c9eb52cb048e7e488153c6","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.14","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.14","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.14","@storybook/channels":"6.2.0-beta.14","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.14","@storybook/components":"6.2.0-beta.14","@storybook/core-events":"6.2.0-beta.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.14_1615471514204_0.6613979971997341","host":"s3://npm-registry-packages"}},"6.2.0-beta.15":{"name":"@storybook/addon-knobs","version":"6.2.0-beta.15","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-beta.15","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"af1134933743c94784c86b7de0621bcd0556d543","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-beta.15.tgz","fileCount":119,"integrity":"sha512-g8gfoBKRkWuYFBeG5teR87ZWZROAeKQnoJ4E5GGZcYULUz4xp3Y+G6Ozky24yxY5uAsDT15ItaiakrQfxhmVaQ==","signatures":[{"sig":"MEUCIQDHVEI4LVFe9xsFXfCfBWLqGWiPzn0kcVY7AbnuGZNDwwIgY/Mvfp0pTe0qzx1YG5velOUN8KZVIzaRZ02KeJGiPfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT0OyCRA9TVsSAnZWagAA90MP/Rht7qDVr5v/okwn41WX\nu1+k3khpoIlXxM+7oj0wA2WFI+u9dEwrDcWQH9dy6CWnGOwjpf3uvD19Dzh3\nNZeKvRWbYUQJP1wjct/3JvYcXyRUhceE+A8ta00G92QZs5xzwQCZoXgyZte/\n1tlrgOT2J7evE8vIEEhFsJa/FtDl8e5js0euf4pe6G3/qsYLlISIyGIr53MI\nkBholIu9K82/FpwFbF4DpPQIrywJUVO2bssxq7tT+CP9wlDvPyK0JDo31n7R\nI2T8PGHpHFVNGM2WxiBPDpa/KbezjH+jRoCoLhUrxribVShEr1pAAmhYAmJM\nKW536iRH55PfVOiMt2Z5p8mbcYjvkpLIAuPCWurkhxw/7zxceeZit+lWJTXU\njUrJ/sP8WM/T2OzDufveloaoehR1LUutdrv4I/NLU5LF/CkW6s8xCzP0cXrg\n8hVD/g4EHKnCNNVzBDkggUyE83REyZbgQA6PuMCjobbCl8f4AIiVRuSsX2f3\n0HaXv8PDhHZJjqhuijgaIvbfPjU2uL74ZkLGW3k1XE0mohbWfUOG/Xv794LI\nr/CslrlrpdMr81+kFx1XlIv/pSVjohrzZzKy5hNouQv5dnc0JtinEZrxdOne\nTPhAvu9km5FVSS3PIcp0GwY3NqPmcLE5YTSmfTiaraniiZfrgJrav9aITITi\n/Q3B\r\n=raOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"5b98c49f03094b94112f719edd5626100b21db47","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-beta.15","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-beta.15","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-beta.15","@storybook/channels":"6.2.0-beta.15","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-beta.15","@storybook/components":"6.2.0-beta.15","@storybook/core-events":"6.2.0-beta.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-beta.15_1615807410015_0.6460366877897059","host":"s3://npm-registry-packages"}},"6.2.0-rc.0":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.0","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.0","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9f6e041d202b1eada4c127565eece3836d68ae46","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.0.tgz","fileCount":119,"integrity":"sha512-P5FSuYyoTf1vAkx/xArDYYiyN/cbYrQ+T3JZQ+RJMKRC+3oFBMSNEbyA5hcJ4Y2WBO7b0lGkxMs6r+Xap8Q7KQ==","signatures":[{"sig":"MEUCIQC1y+M2E96Z3OhQhMsCALDVz4N4sh0K8IIdQHHB6x4oYQIgKZPVKWCmoynSxdnewrMkbGWFqeN4H+0v2aOX5IuxPT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT3gTCRA9TVsSAnZWagAA6GkP/Auvge6Tfqi/3RvDoqa4\nIvuDlxks5U2y/ZJedEnHxLiBJf74AJppZMQs3o5Mdc+Ta/LWUZQv+WPs/8Zc\nG95LcYcEuYmk6FADq8smpvO57J8dkDNtbSn54mIB9e4u0MN43kKqrQhqjqcv\nQe6cCV8CZcJNBFGPCXFm8BICABWePxQ2vvf34v8m0WflKds7XoNHqJxle39N\nMSCJ7PLgbajIC9LiLZs4OiOY6tnMKWkPqEYyljS5u8J6wxIeub6gfdcUvTBF\noXGhmq2lXCwBX4OKtlTbVzH8eRXelxiP1DuowGJ0WGQ3Ej8DmpIuCokDIAGL\n3B3MnKI0NcHbXm+RWmaxyZCW/DpRTwNQPLUnad83n4l9Qbfpg300om2kfakh\nfZY8pCPly94jNwnmuURMBWDL2JQbIe9GONx05ONdc+xMfWO+rlvrL4g3OAzW\nV1AAMyXTsDIVdUGiTBNPD3BOL1uvw01bHTy3otCekkkzwI94YSplAAsfB36W\nvJkBvCwYCcSG5pQ4Wd0esrQAVgBa4TbMM0eZ/doeYM6aEDRLoJfRnjf5Isfg\nYo1/axMSJeQNVRTp8p7jpQ6uAFvFRDHPjHeXijxkwvj0BFjO60ZCzxW6Re7v\n5avyg6G4m2CRNaFP/cOCUwdHUSB7XXgSWS3NjJZfa+fab9sKXgBn9c1BdWR4\nxe3h\r\n=LOpc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"a5b8c05aea4fa183a510103ec5b0d2f7754b1f50","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.0","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.0","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.0","@storybook/channels":"6.2.0-rc.0","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.0","@storybook/components":"6.2.0-rc.0","@storybook/core-events":"6.2.0-rc.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.0_1615820818809_0.6285620658960789","host":"s3://npm-registry-packages"}},"6.2.0-rc.1":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.1","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.1","maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"domyen","email":"dom@hichroma.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"pago","email":"patrick.gotthardt@trivago.com"},{"name":"dandean","email":"me@dandean.com"},{"name":"codebyalex","email":"wilsonc.alexander@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"dannyhw","email":"danny.h.williams@hotmail.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"rvasikarla","email":"vasikarla.raj@gmail.com"},{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"lshadler","email":"lshadler13@gmail.com"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6e514b2b895a457753a9404976654425e6e519fd","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.1.tgz","fileCount":119,"integrity":"sha512-3gYUAmPM/SMjSCGQeFayr09CF0QRfYuM69ExMarlpuZnlsgrl51IBZ0OprBfXQfqLZ53XW8cAFSR63qMICQfsw==","signatures":[{"sig":"MEQCIGQ2YzOP1bq6JDsnl38qoJ3axlurdsWLsrdpeNnTA+8vAiA7VsNzFvE2CXGb4uNH4OCb18ld+Nx5HkIa+/NNB2y4gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUMa9CRA9TVsSAnZWagAAHgUP/iBOgq4l2lyQDHb2/GAF\nHenoBWIEEzJnzCGNGOnRsteWKElADEHhuYxkBcrAeC/xK15GNU8VLEeQvvsu\nDEBntxVMOzqAvrw3XuN9WdYfByEyxsJLC3pQf2+Uy/WWi2ozTS6toppUxVKh\nbGBamJkhwsnfCqWxRJeIPYGTK8EWNBzEQ1ExETMIDl+OKpANYQN4YTlyS7YC\nH/176SgokXgxAUBypzIuRx6pAeh951a1udMuiwk7HZyI3Hsu507HVoky9NOZ\nJVvO2i0rCOMbnpjs9V/mveX5qVrxrlt/2rMzIbWp58H5y1/mHUGg0D3W6lK3\nu7pOJHElVV4DOGlHYI9V+872Hecgw4AJlR+PorLn2JFgHL+adLx74s75ar/E\nkMxepXHfjnwDOoBcWnClvUHAnsp+VYlbLjbSfp0qAvudDTWKPjhK/v3qrdIi\nrs+2ocfZpQmg2pgFbRrNwzcoePCNNa3hh8WuWReMtdPX56fG20lK5aXiIWqA\ndtJcHbBOySQwoCdxkYdmKEEtE1SfoqvKMJO47vFxswGeo4T+BxZLj+XGUEET\nUINUL+wgQM8LJ21BH/OsH7hREUfx8PUjrJr/feXFTIHC2EaQ9FteHNVV7lCi\npn6TrLfdQ6U6N5sxMs9MNcpyTiKBH4O/kwCPaUeyQ1CcI4dVGRbx3zJglkmm\nddcR\r\n=Bkd7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"8719fe697c922d330220851a341380546ba668e4","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.1","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.1","@storybook/channels":"6.2.0-rc.1","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.1","@storybook/components":"6.2.0-rc.1","@storybook/core-events":"6.2.0-rc.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.1_1615906492719_0.09585266505507994","host":"s3://npm-registry-packages"}},"6.2.0-rc.2":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.2","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.2","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6954b03624d4dd6c42387c2accc88600af683a81","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.2.tgz","fileCount":119,"integrity":"sha512-046Aq6bpTP81791pqERgAK8tQ8uULx5oTF7gJiIK0mJT1ibv4BejsrUurkqnp8xTf5cJryEOoLHi4Uww00VNKw==","signatures":[{"sig":"MEYCIQDTyzREf3DI7XHo0zxRUGMG7g9XHUA6s0k0djOixpcmtAIhAO8F3q5hfFYigj8Nc3yKr0iSx8lS3GM3+9TDq7DpFV9V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdS5CRA9TVsSAnZWagAAlGYQAISTMz3WY0uozc6DxedI\nljeut/2v+TMESq3dJrTvIkmLUdxb/OjrlDq3J4PuECygBe87c+oNKgN/Qc9A\nr1M6NTLm9seKSsuiuG8s2gNl8yAm313AYrQ+4aY1QqBUIwhfdGMdaywMuHZQ\nHfLO50sW/ZhiEnYLp5e6HZVTi2E+qX4ywGxs44OGXKeTZtkWPSekPU0n2uFM\nC49YuQ6LVXKFIUkxSHOIZL6Zk/t5guCBUtFqeLu3wTVJptF21Wo1VLLtvXd1\nt8R6Bv914rzsuDVKf2VGlUK9ONSndyZ7JLlWWhzyu/QvCdSsDsocGOPRc67H\nirL+i0ZbvvTjZ46zlp4pK9goIO+ER1ipE8T2Qpk1JvL4v+/SZuTvaqGU5AKk\nCYN6HWjykBmNd/x4dQ71NqcJ653F2twQJmigP8McGBEKuVLDiuXYc/w0/pDo\nXH6ZVw8bW92v+cVpW9TMiF5zJouWjuwwdAm7tn4wwiuQ2g+ZIFPywLSOcXHA\nV+3XfvXrW1Hqzc2OgEGay61xXSTk7dgw1txCydQSqA9hrDy9ouBqzhbtGj0A\nauvvg8Zrwmh6HcQIBPpW4hPfCiQ0+GFubAEOrJIceHjsvuSowqMDiA3Hz5Ql\nHesZ0hM8z8Y7c8yePoMRGLruSPdqC5X6ww1sT+UHfDvdX41f3uQGPlFtds2h\ntBcD\r\n=loUy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"2d47a4b64557a6bc94213b7c841014bd90ce7ef5","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.10.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.10.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.2","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.2","@storybook/channels":"6.2.0-rc.2","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.2","@storybook/components":"6.2.0-rc.2","@storybook/core-events":"6.2.0-rc.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.2_1615975608801_0.531353286144181","host":"s3://npm-registry-packages"}},"6.2.0-rc.3":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.3","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.3","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"4633212d5c6978d9a70f0bbc155dab4e55e8fe8b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.3.tgz","fileCount":119,"integrity":"sha512-Orki0jvWRnSkZ6d/xCpxn5kNyg51DMSrhuFwxTnaITZ/MKqsLiouiwLY2on93XY2YfWvRbH+IvZIwyDYSGS3nw==","signatures":[{"sig":"MEYCIQCi84zH4KPVGjXH+WTNi0gzhAU5yC4QrqgeYyOMNfFHsQIhAKLDFZPwOgGlLiB5MyfWMOA7+RoG9HOgglX4EA5lohIb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU16yCRA9TVsSAnZWagAAftkP/iDYUFOvQzf4JFbpLmKu\nh4o+6nbDoh1xrU474OlTqCcMGxOBBobDThsaauWmIKcbQrkaC2D47QJ936t4\nrHdTv99b/cblvXBXwcAbFdFDKjA3CkwRJYjNDm4XZU0MGrJSAsejJnjfe580\nVGyo1bFXBr0sel+WIQ/lJ2yWywUN1X7uI7jlRC7r2IldjYrgr9UmAyHQfAhB\nypeEgC0vBUDlBZvuvxbyG6rQQ0JZqAht9KuLgMbQpmw7D8TSk4CqDfX1YmwN\n3ziXgY1W215pAR4z0binZP3A0ypxUfKoRbh606gOKc1PgNQxpcjnIbrJtX+o\n82Aq8hB0a26/ckTZCK8sfjxZjBgB25lEfUL2UCxqGx+GiOAwznLgkwVmeGTS\nNYCTi2W6TjikGQtVNkAyukJwP/N5PGd/rbCP8hoHMNpPsagwAQLycaiQSrnK\n/aWuJa+LQvzybz12UMjRuBNDlAsn2/chZOenk1t0XEDof9259ZRZBwO9mUFn\nTLtgztJb8aEAqWB3ad7CAq3Mu7+roc9XDfuzouttpYKzGp2gJ9j8LAlvGsIS\n9A2BZhDTJvvcoCstREirz1R2RZcjxnMY/eU981T3wZ1Tzk0J3mSso/d2b2mL\nmhkEsLVqwisPVeJ6JzQPIlj7NEh3UgihVNIAt/MoHWevjtJ17hIQ37p/QdbB\nyGKn\r\n=mgj8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"8330d79a3da94e45418d82d2828cb6f8525fc677","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v12.21.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"12.21.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.3","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.3","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.3","@storybook/channels":"6.2.0-rc.3","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.3","@storybook/components":"6.2.0-rc.3","@storybook/core-events":"6.2.0-rc.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.3_1616076466346_0.68876119139674","host":"s3://npm-registry-packages"}},"6.2.0-rc.4":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.4","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.4","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"7f2d975cc383819000de9b131f3f9beae115a78c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.4.tgz","fileCount":119,"integrity":"sha512-CJFSbbxkgwXRxhPROSNcsy2Q5QEz0dU7+2xAa1WHq+304eHXz8bDNdfvoWg0OY8wmD1PUO2VfuNvoyVZRBYByA==","signatures":[{"sig":"MEQCIFIjHPdEWm/3A75sfp1crgG5a5hnR9pRUznj7xQE7sORAiBeVo59Pf7XBOJPSu0UdrpYtbK9sWZlshGLQYTzZdI0ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVDmOCRA9TVsSAnZWagAA0KEP/RsHrKm9NCmETv7i44/f\nwvnY6t5fjC4+1WvKBc72s0P0z4VCNyn/OAQrcRwEE+KtBWOSNpzsnFZmrnW1\nKUrrKgMseCUudQrJPUSy5Qk8U3xYDqTXEFzVN/o2apI9ZyOSjJNhafNKC4rU\nZenE3swO9z+PcrXpOpTzC0zN0zf5mT+fyrbWxsKGPtKt1ITJ78CCN9sSD2A9\n/NaNzIUgnf6WO/bB66JoW/6y2wJSdErStNDCxLYtubLrU0p07xlH7bRG+gR5\nclipWf0xTNIWCcsx3AHMbmMcIlCXG2lDTaf/FmUpGy4xX26ejGTvO8cllKl4\n1thpWKePN1wGoG5Gg3Hudz7ZO6yMHHjuziDg8KbRlLloGCAf0dnwyTBbnWwS\nEK0LBuyGqWRD/0kgN6ikun8yP/0NcWc7q8dt5aqPtsc5KVawemfMKu9MwrGX\n1G8dgTMNLorgDn4WR/EbZiv1EenMulTrU0CfRd2EXQDmm1e7m7ktPMhbv4js\n8uqcxX7ibiB8pdITBBAAymP5IeFM0JuTeYnm+6WzpCLjQLQyWi+Y0g+sgMFU\n2SrWNXeN60TaaNRFGYYL2bpUP9yKYdX2Y0if9ceEO7CEk87lvmR2TRVHkTYA\nSXuoR4kvoDRkp+qO0cm+OdDmNsQLlNNoIti0Rd+Hezh2sFbN5wp3sZXox+ki\nXMnj\r\n=eNLS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"1ac1d37eff1c54867ef24623da270f5f3472d25c","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v12.21.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"12.21.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-color":"^2.19.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.4","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.4","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.4","@storybook/channels":"6.2.0-rc.4","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.4","@storybook/components":"6.2.0-rc.4","@storybook/core-events":"6.2.0-rc.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/react-color":"^3.0.4","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.4_1616132492949_0.30369967465778935","host":"s3://npm-registry-packages"}},"6.2.0-rc.5":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.5","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.5","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"32e1a159645972a26f0b4a2c3754cf3e2f8ca34e","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.5.tgz","fileCount":119,"integrity":"sha512-LWBeuTIBXKWmTcV5xJeN1TLz6gayhpWsyk7IqV1IsCyeWDun5covdlDCVw/d2o5LpXjtrxQwGf5nnGcyA+trdg==","signatures":[{"sig":"MEQCIH+L5f18g4AxTWSpAFuPYmJ/fGlFW+WOMSjo0R/gOy19AiAZLMZZgC/72rymQZ59Qf8thkygibmWOpj2j8Mgb+ud9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVbjBCRA9TVsSAnZWagAAJX0P+wYvZgnve4V894xgk5Fk\ncI732g8LdxHPIMkzgDt21jeCHVVB713tsOi0sdsgM0QZF+lACeVM40bzAxwn\nMjdwQvx63jndm9rrlYGfYhAFVwTnV9R5YDRlD2t/qvsMIutkDz0/jLAeYvma\nufpB06NTjazDos8P4pnLRSapBZ0djvviImWimBArdbC1ABb1kooK2IKF+5Kp\n3TEIk7On97QuzL5PRx7yCQW6FBI2vofQP/h7+z6pEQ1DiVmxtvgMq+5xipRU\n33F9WfQLN+MDnmKkToEW3hr8BlBTq2M7/EiQ3vvsdX7ZIh70R/JxMIvIprX5\np1nfdrHow8MmOlq1qwaOy1lELq5kQ9QpRgOkGMQqo8AqH6Lw5tjiQIkXkoF9\n52DWOWB7B202I2EAYFH4VQNfxMwtsZ/wCCXMsF00fu+KOM0JEA0pFPR0z/VR\nLPh83+zNDyPB2bu5p8yxwVWtRkaGy/bl6sJw9GkOuCB+53Gd0HljYAoq2Co7\nEbFJf1ZDGh8PcQxYYvXQ4ogauBRazdDrl3CvV9fSaVkuwBDCntt2lT3WfYI1\nGV2F40L2tmj/QSj2LXtCINc4U+ionsml+qCoxTG3ZOkJ78C0r5rzA46hFSoP\nrDhk6qF0vJa+5yLRoUEbCcsjzVGRbQ554x5SkcfXiUW4yyrUFfJE5XW2su0C\nDv+K\r\n=8pnW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"0c13a371f4a831b1bd2c0168bc172320cd91516f","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v12.21.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"12.21.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.5","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.5","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.5","@storybook/channels":"6.2.0-rc.5","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.5","@storybook/components":"6.2.0-rc.5","@storybook/core-events":"6.2.0-rc.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.5_1616230592849_0.34844367162516354","host":"s3://npm-registry-packages"}},"6.2.0-rc.6":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.6","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.6","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"14805cfeebd9d53534514e7b2d26eb302c3b3c4c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.6.tgz","fileCount":119,"integrity":"sha512-LmfFr82tBscsuQ8YZcLVvlpA/wT2zbqgfHYeZTHYGuJ4xx6X659YXi+u3rHaymuhmtfAAMf7W1+NRiAXPpSQvg==","signatures":[{"sig":"MEYCIQDDSiBVUTnDHy3xWuE7zKfa3nJpuxApWmE+ueBRXXzuGgIhAIWNl2JUwvpLChyl4F0Ve3d61AFUSL15IvqKQGCEjEyK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgViKCCRA9TVsSAnZWagAAH40P/27MNn8rKgrcIO/jiwue\n2hb4c50p6H51raYwtzqvJuqxvjtr8/AUr89XqPrRmjfwMsXxnA9PWZ+TOvPA\nusk+Ep45yUsLgQmiT5YZG7ACzqS0zKfJRpgCkaxjayfeRbEEYI4/L7TEPX1H\nxQfBmyKjrFrlm4ed8PMDic0fwEklFnoIOfi0Go0pvKmm9DBkfHK2K8rKvEnP\nTZ4wGHcuz9JUYEuxvwOJ/mdBO19OZ8UzeGhgLKmHWjFKuIQYG1t7WnQjUyS+\nMxxbWghXGICVai/r06qyp0LKxSsYjXmYtM2YdK+CIlAAyitsgHN+g9HzxBlu\nxvly8yWAzwHHl8eSUdcmtAtXBE/LTemMnwmjSQKHHJ7pPqpvaagWFCyZK1S1\nzpFFRoWJ8/9xRm3yGf292weajykNDkPsYN6V7rqNyczLeP0DkGs/Qny3Uqk5\nSK+ojZgtoYouR3Sf9vryNQ9Gg5TZ5bsQk9ISKxCjAl+S8D2Qm9sYjmAVYmn3\nng9uIveUylp3Cg5uNf+3ZUi/34u6JDdiSURBwCvJIr4BZrVAXHgomIo7vnEb\nq1zkgU9bwb08GMnRYzvWtTv2RM2eTHutX5f6u4SyOGYdBB2UHlGJgnuFS5vY\ne2ZPyAP6rRZkVtnE8AN3ixw+YKeIfkxdB446M/13hEFxVVJ8Wm6j88N/ofYj\njb7w\r\n=6oZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"9140a2884503b405d457268fd9ffd8d2438013af","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v12.21.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"12.21.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.6","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.6","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.6","@storybook/channels":"6.2.0-rc.6","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.6","@storybook/components":"6.2.0-rc.6","@storybook/core-events":"6.2.0-rc.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.6_1616257665847_0.653371522628529","host":"s3://npm-registry-packages"}},"6.2.0-rc.7":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.7","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.7","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"3fdcbde2d492e1de6bd132d74a2d114e0968b066","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.7.tgz","fileCount":119,"integrity":"sha512-5WGQ5/KbMyyLSKeHp8QLU16H/wz2B9jX45CVbl51gf/qTxe0iX+oYO7kPY9xWDoQp9Y5yZhyRCRVI/nvIMgdgA==","signatures":[{"sig":"MEUCIFMrcUjJ1sHbDlzwFyBqRHfmyp1tZJsEw1MiEzpHQD0NAiEAp+U9h6G+p2lG2IL8zXsKfebag0258jxGcc1y2cf3BRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWMUACRA9TVsSAnZWagAA5UMP/34rK9qEJpnllJXWBuoY\npWkoMEKbQvEO1Vn5fDggpAkERFG8nRQK1Ij0CS8CMD1SIihTtSHNNV1CZnM4\nPQig7ZmM7A+DHi/6VlmHX4lLRNcGDFOx7KKL1odAk2RSkx5LY0j4pObcJqm0\nXCqZMzZ60JK/YuCZPGBeQ3e05sq4LvSv8w/Y0L2Dcp1pl5MM019gxOdiAj86\nqKPJVfpt/We2pF30CFJp1/E7gNtVGWrnMRVSwdubJFPHio0sJ/rS6mPd71aB\niraUB/j4KyqsdtTaS89mMZVAjdSuNTIegDZyImK/4wvPFFD4eQlsa1KJY3BT\nSfnk9ANrcwLJbfik2WCjiiP8+7U3N5nWHXN2Ebcsv5uvSB4xnu++KyKAaBJM\nzG/qa0QETScUXOu76K3v9hNyGvGMkklj5HM745GXI7vfjvs2fpA+n3yZ0NOu\nuhvP5IPApx3EqFJUgOAcKkxhFa2MUIMFg5Vre0qGWJjhVtx7TvKY6RA2tWhA\nJMDT7K3OP0QB16j+GSoAbmaiFumftdW336uI1M/1J28QcdW0CTrT+yg4GtBd\noGrN8rh2XNuTH3w6r8MgBky8dq4K53ok1js51MaotGPPFPBaGQbk0PRxnALt\nLy/MQtUSXVRsBS9jYr6LhT2r3IfhyFUpyGwcArz4mOMA431aTBXw1E0lh4rg\nfSF/\r\n=pbSu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"ea154d612ff984260bfacfeed804820cf00fee97","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v12.21.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"12.21.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.7","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.7","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.7","@storybook/channels":"6.2.0-rc.7","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.7","@storybook/components":"6.2.0-rc.7","@storybook/core-events":"6.2.0-rc.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.7_1616430335950_0.4075674299830063","host":"s3://npm-registry-packages"}},"6.2.0-rc.8":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.8","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.8","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e334987afcfa2abad4e8e3bfc11843412979db08","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.8.tgz","fileCount":119,"integrity":"sha512-mjrpz6sXRqwdWAaUugPk5rWvZLy8yk8lvc2QfEISaDGcUtvblhoe1z6AnsNer3WMIFyx4/diYjGF2+nuuv4WRw==","signatures":[{"sig":"MEYCIQCC2WmqnyXEBSx4zpIN+b8gi6lWcbi6SrM0gthFxSX9KAIhAIJJKUZ17EHAc6Q3JKT+Fgpj2Q5+kWa9y8sdw97tVtEp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWU5fCRA9TVsSAnZWagAA988P/3NSiYLWg7FTFVybNqu8\ntuXC7bPdIEW5IhrwQKPRS9HtYgeSXhTe64bXzeoA+8txmIq3a/cCa8bVfw1p\nhfrbEW/y24Aa+eF3Mz5wCTuXJ36ucYIcS/E5xV6+JTYPNHobcLO6qg1LEzLU\nOPaDOnmnJ8CQYvSEyCnh/102WUUB0XNzqPmrPLpoxwK5AJMaKPpym8QnPW+Z\nCXtNfisS6NVp7fdWJwp2jSdBaOcQ8Skfn2kXBTyazhJBp656BDPgtxVxNxvI\n/gBTk/aivLI5d1lCHMHeiteBix+7pAH9zL1TUVCU/jDGMlV8jTMrmHu36+Ho\nTTU5hD/OOn6JqUJe+6SD/Oea+UttvGUKCGz5BGye/MLzR54hauQgMQcrNt9k\nRzswQ1Pjw74E0LNWCk9kLq/m/6CSeSipH4PT/RtAXcfHV33PClm2o+EFIby8\n40u6WzykEE0WGBaF4V74PUyr/ErJ8txhPTqWfJ9hdgndOo2dhwtlY0N0gMOU\nm46EofY78oTvTua3NbqPoOaiWFsai7t4ugIkGKLaaHx+Ig3wF+TfFRDlGd7V\n8MKVfu8pFrPCw1n3bSKso72ArfIm2czT5/zKmkv3koCrN2VgMnzpJWarEdR+\nQTSjNdadyf1hUl1dQslEep/wMlnap9ucK/JsQ0vqycUONokHPrMS4XPem+zc\nKs4b\r\n=oTkD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"229ae2956bdb1e49a5dee26d3b6ada991a38c725","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v12.21.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"12.21.0","dependencies":{"qs":"^6.9.5","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.8","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.8","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.8","@storybook/channels":"6.2.0-rc.8","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.8","@storybook/components":"6.2.0-rc.8","@storybook/core-events":"6.2.0-rc.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.8_1616465503362_0.14320568242242104","host":"s3://npm-registry-packages"}},"6.2.0-rc.9":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.9","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.9","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"29de8ae3fc6bff0f57ccdff9a769b66d0d9cbca1","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.9.tgz","fileCount":119,"integrity":"sha512-n024alh6OmPuj3ueuNOpYNUmbU89ceSO7QyBW3Rj3azZZrm+7N3kdQQaRUrtQJxg7ACM72Ir7d9m5BjYryNPPg==","signatures":[{"sig":"MEQCIAX4m1Z+yEI6yi2OigouzN42ipLKoMD1Sf6j20ddtOdSAiA0SDcAMKRh8d/QerPmLpx53+6r+n9e/g7RIoP8DimPIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW21gCRA9TVsSAnZWagAAl8YP/0FBToNVqpaF32VBWaa2\nsxAo7pHF8O497VIuZm50iCcGz5l8Q/G2ggWOym1tlNvN5Eyj1iuE79z2p4kc\n62uVkcE+d5s2xIuzwN8CTYW9BhlAj/5VlL4yjjDFB7mZ5s+q2dOnJqWvtHoU\n6BqX4PaHXCMNHm1pVya4tmm2d87fJsvcmmAFt+011gdubePpJg4KmIrY3fQe\nCAXaZvNSqNvdtaER5NmU2o5HiZNDk/EV0eCuY8+zzN8Kw4TiUT+xw4CpNXNa\naDt0sSNq754ZA7R4qXT2YcbpdydUQEsNI1bpDNUHHkMRMZgFHweiwpnGlsD7\nkQyzgmTc0PkWuhOYiZt4q1fPYExZzGIBUPfFZ+2pnpstf2enI8eMLcotR69T\nxXvkOJWKZ6UrW+8/4Dh8YJYj7s1yu3kfDi8tZwLkHRR2tj7DOwQcEB32rAay\n+x0YsSF72WK5wVgvBLfa1CQo4WOG6vOpVPsS632z9zSy206nCxG5e8G+dlh+\nU5vL+mwDYF3rXpW3/APGtUt5Cw+2sSPzne6Bpgu/DRKjPpsmtYcDTJHkLX16\nYFl0cyQ7BB/pq810W8kU0CkUepPL5of5/M5kdRY03GDYmKfXujjEmRv0YF7u\nO18Kz3IpgUI/WVUEVDAS2f3jQasq7EUDJe7V6OJuAb8QGX/COiMkGXS32rOZ\nVBbO\r\n=48A0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"b100a45b69db3c2b9c4cd06e68d9035a769f592d","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v12.21.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"12.21.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.9","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.9","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.9","@storybook/channels":"6.2.0-rc.9","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.9","@storybook/components":"6.2.0-rc.9","@storybook/core-events":"6.2.0-rc.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.9_1616604512055_0.2175043525835645","host":"s3://npm-registry-packages"}},"6.2.0-rc.10":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.10","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.10","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0383f58e55d2550912fbe19e276397b15c78471b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.10.tgz","fileCount":119,"integrity":"sha512-QFRAueNyoV9VjmgtWO30J3jt55D2n3lbQBsVJ6S4I5kFtr3gttVVCQuDIYHKXB+RMqy3N0BeRW0p+pT+3ehNXA==","signatures":[{"sig":"MEYCIQDmTTA8Lb4ok/+QA+qe811KEC1IMuQes9/eltLc3Am6cAIhANPra08BQCuzrRqrWMTqhGtRgWrNzoK3qbp3uNJpzcXO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZTeCRA9TVsSAnZWagAAFx8P/33SoWEJAs+qwNdEdsf+\n7fy4gCblF1piSfvH8wo8hxbFI00h2J7B+RRyEiYYKKXp/B+FpfyOqWad4WRC\nMbc3VdqMIiaMQVPACzBBb3urBsflRViibjhg7YWLyncEsRMqJRzlgflKEFjB\n3UVqU/Vhaw5UPhLBNcs8D8BFFqypTnhJQiuaTYs9KD5djnL2XGKq4fNBKrkS\n9WqIQuXiV6Xhb7WrAZgCQXRWg/n0bv2IBB3ayQNZDMEetnMdJytyt2GZSktt\nmqw1yXCbG+dZ5HQ6W8VEf/9QjYGvAneabVttt1ykTlvriHHnHtjOD7+i1B1K\nl6VFJaLpGfm8ia+h/PAkwNm5nbnw/e/VGmHWHCx8Ar6ghh4Ux3dhsRw8N6gV\nKKsAw79kjM4bTHpZL/yjBOhbQ4uIDbyxwa4Rp8i9WBBPpvnbvKxVfPJdpCai\ns2z4atrjqXWAkDV4aqTvSRgYUnCG54hWjvq0Y25BXmltwDxuaXgSLA/pdaqe\n3fXcmYQ6cnhGmlLryJ/9dse1SQU8mY3k2CJ8rN8zCf2uKT73FsVPokp42L8F\nN32LZCFiikyVhO9op3N4B/s0kGCRhCCA10dnseV2RE4d3Q5ZPEcKaWjVYxSb\nXiqY50ytFcQDOskZpAK7fMPbZPOw5+S4YgIPm450G444X0jiWiX8z7Z+aJaX\nv1Ly\r\n=ZCbH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"a667853246c625fc0668b3ae54779b232ee33431","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v12.21.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"12.21.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.10","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.10","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.10","@storybook/channels":"6.2.0-rc.10","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.10","@storybook/components":"6.2.0-rc.10","@storybook/core-events":"6.2.0-rc.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.10_1616745693982_0.5736323184839163","host":"s3://npm-registry-packages"}},"6.2.0-rc.11":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.11","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.11","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"11133d158e411b28c72ba67192d0b4dd6d04ddd9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.11.tgz","fileCount":119,"integrity":"sha512-IA0nVZd7Qs/1jSiLQVkqt2SQBTkLGptK7cx47xnWHRNZ4hC7XMQ5ShUSujc6/1N8XvE1947nuvzIb9Vz5fFMvA==","signatures":[{"sig":"MEQCIFhdMeeOQEeY7w/uJu03wpmR2TeKIH/T6+YA/MDPzwY8AiAbUikN+LbVUKigTfWgFPvUyE8xdz5esOx1MBkIK/6V6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYZHdCRA9TVsSAnZWagAApusP/27pWHYpE8WwgBcs7a/Y\neEMJzH6NUpdMMY3Pm3lNtKUoxZaJ5U7g8U/r8yyRMifEGrRx8ELD1qlGvw7J\nwOYNGd4qy5EMW4TH5yZfXmCxcwz+xxZ8D2veHUDSF22t4aPdhHmeZcRiv7FQ\nIsJrCchM9iv2JfrCdG0g6trGSAiopfVqmsSAvuKDXKHmVmoo2/r9QaxUuLIm\nM0tbX9l+6WsH1KFmXWS/3PpRTCZS6/dg0cM9uzH5ClJz/POoTL7nUOnXrkQv\nCl29Tf0JNBaTRTSVyTT6nfXyw4/9xDQ0pWLKU3G5Min3p1zcdNWsxmSsC0a3\n+Xx8gLHiIK9BAF6v80lIaSNi3ZXjN8hXHsjfqnm2DlEYpnNGX/m9VjObduZu\n0rJxiB8SBtdNeA1T2hqcXmPufqjMI6WkUoH67EeG4CkmgvnqjrqlVZ+vYwrW\nQNUkY/V0s9gWqS+BZ74TrJNRXvRqYcs3VE4J2/hNZVOaI0dWGQaSa3YicKA9\nyrye4k5Dvxl+FehzH3fIGcaZ5VzdQ1zSJXlRUurFzpHMS+9fEvP41c58/cpQ\npkZv2+Wj0WZAvN1Umv1CM6LSDNkFLzbqDHDADeuEoiuKqervRL3dB+FlFyAl\nJEVIFU+XybPWg3PobshQxIC7wjQ28x/6ydbvVSSj4+H34VwYJyCGmMK6DJ5Z\nyjh9\r\n=F+Rb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"b2100d195fbb25a0267189dc91b01f9fb1a96b73","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.11","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.11","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.11","@storybook/channels":"6.2.0-rc.11","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.11","@storybook/components":"6.2.0-rc.11","@storybook/core-events":"6.2.0-rc.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.11_1617007069194_0.9289681717847786","host":"s3://npm-registry-packages"}},"6.2.0-rc.12":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.12","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.12","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"798e00e2ca2e6c4a7e69529e5a549d601a4e06a2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.12.tgz","fileCount":119,"integrity":"sha512-0ucbiiM2jw1+dUPM4FblRUwLH1+y4F3nzJaWepMoM6qGmYroJffuU737gucFbxWWxuj7O2HP5QBAu2L5fAixTw==","signatures":[{"sig":"MEUCIQD0iQgGKEpcbiEGAJUjWC4/mYTiv/9gio+bhj4IGnScIgIgZrt/h5XQGfEfsQOer4IONZPr1f7NfWDIiUTiMpiQ558=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYpJvCRA9TVsSAnZWagAAFY8P/1CUbyJK5QMrS60XwYIp\nB8TL5ODtwVT/Ru/hR+6BgHhoB8t2Qk0eRNhMPp+3zjieDZCqmMUgjVHaKMEd\nuqRyZAEgq2kz/Ztknmb/0SFt6VaSdUEIf9itLictVxSwqRG66KvLJkG0j4fj\ns0YWFHdPVN7QcBr/H0zuCHGqldXlOaxCnVnIL8SPLPXJFKD2vC0yu/TpUxCa\nMkGdP5iJ/V36jzM6la+h8VqQ5giq6lt9sM56hIJe3I7EkG0s/fpnuzQ1rU2f\nTKdchPwNoSfEODyF89y+dXeVinrILVWW9uy7LqeEbt5W6lIoTbpkUPkWFafs\nmweQFGIdwQQ9V2gqVquVkX4V694yaaRRkHGNRjLfgmucOXs1nFTkTpI25QHx\n+QPIWk2gOxN5eLrdMtLiV4VsHun9iml6k5Va0mKxY9u2tjYmaQP8adVVZYou\nQs9Uabfib2AG6hRVPUkDoqDepjvDG/DbM7J2KQr6ZGp9DavE6HSnV9spYeg0\ns2EE9WkoiljhdzvLbqM0cB6a9/getqVedg8JTYCEow6wQFdEomLq891WhFvD\nuLFI163EQAE2QdaJtmN6a/0hZ6uqCOELhIxfWJVpldHUPVFW14DE1NjYwlWf\ni3jlyQIrUFde/sSTHFHEFvAYhNzkfXN5N5+g05GWqQvW99FHZEa07muL2SpS\nP/zp\r\n=Qsqg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"5ee73396dba34362f070dbb6b8508fe18a3775dd","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.12","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.12","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.12","@storybook/channels":"6.2.0-rc.12","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.12","@storybook/components":"6.2.0-rc.12","@storybook/core-events":"6.2.0-rc.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.12_1617072749585_0.04912913860924961","host":"s3://npm-registry-packages"}},"6.2.0-rc.13":{"name":"@storybook/addon-knobs","version":"6.2.0-rc.13","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0-rc.13","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"770be86c311366a80d68419e07a647f00544d77b","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0-rc.13.tgz","fileCount":119,"integrity":"sha512-4CfKG+2ybS1JjOEDK1Ru6yducGQjrsJadYqd9ux7h0Q7W27yI971xl6asEMGIy3EmluhiPKKF/gv9JKygIciyQ==","signatures":[{"sig":"MEYCIQDSq675VSnCC7/MZp0GZTLxzbUKu+GEA5gI7RfxygGu+AIhAIsj6d2XYc34FBvWfqQxg4bLVvZdOr7qTI0p+dvMKvAh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYwKpCRA9TVsSAnZWagAAFasQAJNqPNHlW1H/RgOS1SNi\nUhFirdZxG9x+OoQVwrWssxkCRh+TbVdJucet83VsVEj5IXU6ay3r7Dz0+Gwb\nfqOx9LfRiEX5jX2j94/RRsZmjjhaHNGMFSbvRLb3b2wrgR15T2twa7m7waGv\nWzAFgSZDP16YvtN+mtbHMqv9NVrivw8rpXURsXIR54ErXewhwOHlwuQVc+NS\nqgP0Z9+5DWu79hZ1eaVzH/dYHZ7Nl3uGPZM9a00qaCTgRDZMy2vskWUsj3jv\n5DTJwNskCWqAkwEjIP5wqFVAeFavcN1fIQr/0kScuFJDLmUtqbLzX4PSZm9l\nD7Lf0VPAoDP+//hMBlOOuLSan/Rc5D0CYl01aGohtDVSvlsvzldCOXAXxWl3\nYOL1ryhAk+H7IYn3vXTeL+FFq10seGw/qMFlDs3yhEevcUNCKIFrYWVfrESU\nMaCJB/te2hz7q06uIJ19zBWY8lSOqIn8gcHJ36t8V1RdXzLoDf7SXLuomQtb\n8M5i1nB9y7GvKEG8IlP+eqaGdOkVSLCuXdmcIdDdbTt7rnJ6BqC6PC9B2fsG\niGXqr/zhtk0I+AJeqQAlVMY0bcQfOAdovcoISF6KvBJ6BYMnGzuTkKy7c+gc\njezcS04ud7o1CkI0zcvAI5/iZ/HtwqphZWluTQIeV7rPK0dRnTWrmR+r9wTM\nKk7k\r\n=gtJo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"c1dfd5babe14f479db54c9d59fe3374a45a004d3","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.0-rc.13","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0-rc.13","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0-rc.13","@storybook/channels":"6.2.0-rc.13","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0-rc.13","@storybook/components":"6.2.0-rc.13","@storybook/core-events":"6.2.0-rc.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0-rc.13_1617101480954_0.019234690414311695","host":"s3://npm-registry-packages"}},"6.2.0":{"name":"@storybook/addon-knobs","version":"6.2.0","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.0","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"620a04e69961891043e02cf33b3cb968a7b28ef3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.0.tgz","fileCount":119,"integrity":"sha512-IQ8yQIUNP/kBiMk8aKnxF7pQHPlvWIn9pwgh8nwamKiLylaWVF2P7t69owdDxq9cWyYjm5Yfz865fF2IUjMWfg==","signatures":[{"sig":"MEYCIQC37xyh2D0Vk898eS92HdgAo5WXFm5QpfgKmTNEwuR/6gIhAM3IaEUfBhhZOOvFZr5IdUp61xKxIZtPituUzLi//2I6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY0wJCRA9TVsSAnZWagAAO1IP/AiBdFQEQlko0JrLifC7\nXYdr6L5qEfyQ2W/720R2Mp6UWwEG2KqW/M2OiM2SS2CmO1obugxNn8yEKbUI\nSIpDjVkpjzVN7qmT8kIWoOlaYA7SCpMeqdA8KrChqE8Bc48tjfg1JhoZ+xIA\ncRoAmH/b+1R2zoOFRbZZOsmdOyFnM+q13/72Wu+7CSAb0J/UgobLjTry72KP\nzyU9IiVEnYg+hL4fYAwUSqRAwaxDxBK+VOdgAP2hc2BqOyOtEdOkd9BGPnFy\nGaMTwdyUG/pJ1caekM3MssopzhxxWgQXRNfWiHTpoIHa3ok6608z/Wkg/YCF\n7iG/+N/7aElEhG+/tmUE1AIl4Erv6z/4Btsx/QA01nXNTUXPHVnTB9wK5dSv\nVeOqB/lGZip0rmhQCCBICTxbDOIGztySWTlaGJM2oB62oDb47iaMvWv+zH2h\nFnHc5i56eoLyKwOtZ9yLkYIQL8HR2y3tjlh0gMdYACtqz5YfLpOZhvj4jLvt\n2OTKFAavdyPesZsfvIiZFS1ZvGHKmmoMV6NLRs8M3Yq2idANbvFOTd4BfGb3\nXKLPd8D331KCz5dFyswDQgKYeiXbU7V6FeiV4cO4RMbtRrdVtNx4euGd+M+c\nJkjD4yzfRchUJFi54XI+owpy0T/cNi4cShz2oBCcdkZuPcFLEuejW/8iyb5B\n/ZVq\r\n=ctD0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","gitHead":"829c72e4374888ca74ed4e68e0c1de940ac18163","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.0","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.0","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.0","@storybook/channels":"6.2.0","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.0","@storybook/components":"6.2.0","@storybook/core-events":"6.2.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.0_1617120264897_0.8542798911266134","host":"s3://npm-registry-packages"}},"6.2.1":{"name":"@storybook/addon-knobs","version":"6.2.1","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.1","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6fa12a399931c57b13246df0d2cda86c858076a6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.1.tgz","fileCount":119,"integrity":"sha512-RJxBi64qsuBT4sRtUiwK1CrW5b53WfKmZ8N1Sx+MtaFwgEBF8Ql1VAMbjz6FAVKtbpUPHeiDCOx3ayJZ1tRoDA==","signatures":[{"sig":"MEQCIBZnJcbeMbf1k3+i0fpdJ2B3+tJhHf+TbOkOG1MTGJoKAiA9XtPOY6U19ErKvqQ8xLXfISkuvcZezJ1+CfiDumQIFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY/WGCRA9TVsSAnZWagAAu3sP/1ZGWb93NnH8/awMn+tc\n11dgvjNqO6i5oQQ0W52ZvtRZl8RkdED+PB5CdY1cPtrOH0NlZa+rA85R5iDh\n6iXokEW01+tWAO+y+VNeZEMlqwnvumz6oKwenfhyMhUNPV+Z6ynGbhQslUa+\n5ZZwQy9Kz/+Q9nsRi8YPTvw8gbSrbj2KOkAiyS/zEgakGE2OWG+QA+S0Bi89\niCK2a6/N3D2wIZ+1f+H9QHeQ4xlcCM9Qz3vfRUYsm5F48LsJlwr2QKkQ8XS0\n1eox+0BREeXpPAB+Mg2inufAbE6SpifN3srjn+A77lk50QYItiuUq3ei3noZ\nsxsxXlUBPgelJTSDPkzMOEJ9rpKJ3GDTttvZ0+nRrlBWE6SOVfoleuLpHAoX\nbzrJsap7DUEm3AXVvRbuX+0akg4NOG7RSiRaHYgO00AkhmPraDOidCdCKytA\nrEHNKIf1O2RYKVF7jHJMGgb+BSzP6EwWx/kWRPmD0kbh67Q8Btvh5G0C2KV8\nMTyYbc6vppuMOBIKV5SkmOiUYHY01/9C6psvI05VJIn2YVHq27IMbX/wDNqU\nZBVCuV/oyVf3xBTNLZlFh1GO7MtYFYjINXBPhEF1vWk6I6RYRYwo/6Zko7W8\n82SnzuqxrJHcT4lPVwxQ97xoya4AF9eOs0FVmGvV0kXJyJpZHGrgkyod7FZC\nWdfH\r\n=MgIJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","gitHead":"3d5d666f4e961205bfb7b94133c794866f0d7a0f","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.1","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.1","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.1","@storybook/channels":"6.2.1","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.1","@storybook/components":"6.2.1","@storybook/core-events":"6.2.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.1_1617163653925_0.11728159706288799","host":"s3://npm-registry-packages"}},"6.2.2":{"name":"@storybook/addon-knobs","version":"6.2.2","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.2","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"dd3d9a3cf63e531c93bfc9e4fd77dc911a4aace0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.2.tgz","fileCount":119,"integrity":"sha512-vQ9o+BiY1W/CeZq3l8I4ZrjQ3226R1ziFiuaOUQPDnmZ/y3bSquLyruMVrHbrdqp5jGfcckMt6gUtIKsKldjag==","signatures":[{"sig":"MEUCIQChpkOCXhkfXBpUcI5kU3HoqKgARwdd3eONpHZTIHlfSgIgC1xqrLGsT5DVFg0zYSVSKyTJ+3OqTdsv7fLRMgNQTmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZumwCRA9TVsSAnZWagAACEYP+gJHFmXtRJDA/VxzubnM\ne7CMJahpbRsovQ9GEXMPvznVL8ukuMWk/wA9wQLL+FbsoG7RVlQtx/NdzfGW\nASYQKprCBqTL1pNQO52HPSnx7MumU0Wt6eSD8EqpnfeRaKMKfjcKyUeQTx/8\n/Mgn0SelkbO2U7TLcRnufiR2MXb4iA/B3sYFUnFfch8stJxEgdYaTUxiX2xd\nldTcJxNmR6kL5rQ1nGSOPJ7YmM9iblhR05611NyMdTxzpkxo37dN9/NBpEzJ\nHyPTFtfIncgoor4qNLZjdFlYmNVvQwWOJfvtSoMHmblzGLl9XIrU0OThNHLn\n43wnJ1nNcdZsVdKztIrje4j0mBWoMsPvi2f6Pr3qKqKLZqGXP/0rliV5tjzd\n5BOsgTNsLut57CUkRdY0M1qZYeSzlEAQ752VRUsX5Q1Qs0ucje0sr6h6tIpq\nIxCa45u7h1i4ht/of9KNnE1iNRZ21ByGXmU6vaN6ccjYMu0Q3AiWp8YzyxoN\ne0bVTywRQTgj5DWV2hoTNx2mEZ+IWSfswRU7t1UaO7OvmzmWLzuIAFM2sRm+\n/JACOq4J52Sk/E/9700GV3dj/YocOIcETqmd+Tl5ocCYL8KWHTA3BWVFmpiD\nQ5cgOxBO6O9gKm88/T9TLIzt/4amYvPdTwOn21NNiW7sg0egOj2b61jzQN9i\n2JwI\r\n=EK7N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","gitHead":"10fc28856bfb06d69cb6c6ac056e9332dfce564b","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.2","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.2","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.2","@storybook/channels":"6.2.2","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.2","@storybook/components":"6.2.2","@storybook/core-events":"6.2.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.2_1617357232250_0.7536419808007655","host":"s3://npm-registry-packages"}},"6.2.3":{"name":"@storybook/addon-knobs","version":"6.2.3","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.3","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e3fbc2f47054ad9d4b5e0bfa14943a331fa348a3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.3.tgz","fileCount":119,"integrity":"sha512-sGFnDeqooCTkJ3lybmScIGCPwu+cQAN62+Po0KUmvjjxh2F28nV8WOhpOOXha9W/t8mc/J10IIqJoBeLeoWh/Q==","signatures":[{"sig":"MEQCIHOZc38Uqq91NygkSy7qznVNYaEGUqx+dl4kuOLWVgYGAiA9OIbpm5StKlv1hTDyzWCRsRRoqUbWkWhTaMhQnPBm6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgax9hCRA9TVsSAnZWagAAozUP/3rCOfmcsiLcgXLwH9H+\nKMSdf4wdtKzoFV/CJqeKvgTdljXh+Yu9dNMqCv/yHdysmauDOF/tTkEiylfS\ngLrLtNTbV6v5nWFtJtpsTBMiV9bMkW4hp9Oh5pi8oQvgF5gs9Vv/tChcog3l\neVRWLpCDdyf/oCHG3OnGIKabJXITqrnIFvQI2Cg34XeJEwTz0NZKBQXgmNB4\n3nY8L+0eKERG4HtA3Nvq3W2Uu38vQJn3D3i2ZBv6/4S+qr/+VHLBacJHnjHK\ngxhmzhxDzwvl2Glh0EKfOTZ5qXYHXn8LpSBSEMQz22vWvI7URlissNozReQT\nivsUJZtCEH17WGXA0MApe6rPf2NfqVC6eXA+LLRvL3UBH6YEn6B41HJ8Dw1D\nCYkQKrZKFHSEZ7VSRGOWjVsAd6acnuiRoaAS71mzUBujdGf7yWGIkIhGCenL\n9s7n+EhO6lCvGQVHYUIexsHObNr/PRou3OVH3WUaifXrFt5cGj3KlmeU8oJS\nenHrELYfnduwZ6otsOUWJzIyJs/jbcB+pMLBWp6isVGh0t9MuAvZxnEKTg1H\nhalYsdpWQ8l+tSySK/OVnXCzmKS4c8UTblkQ+Pmrlvrpq4eanl66alFh+u0U\n0wpQZQRsSmmdwcekttrie0UHIC7mhJhHlbpWH0K+9tPUF3Lh9NH905SWpAXm\nqGU0\r\n=pdcE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","gitHead":"8c2eac34a9605df01c545e9f73d74f69863aa0b7","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.3","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.3","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.3","@storybook/channels":"6.2.3","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.3","@storybook/components":"6.2.3","@storybook/core-events":"6.2.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.3_1617633121092_0.06240741744389622","host":"s3://npm-registry-packages"}},"6.2.4":{"name":"@storybook/addon-knobs","version":"6.2.4","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.4","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"b6be80575cd749d2fb0c2a6203b8a5b97ed1dfdb","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.4.tgz","fileCount":119,"integrity":"sha512-mGuET6g76HG3MMR27xBSl/YNUw59kQpKV2G7nihkeaw8HOU56gRrZIMcNSsTXzLtZmsePGl5L2RDq14MhyUXtg==","signatures":[{"sig":"MEUCIDZYWHmCLJ4jRv4YeKTcqePmtrFrQQUH4+Kc0Pd9ZXCIAiEAuXmlfgExywFdIXRco/uI7mTSEQgOa5KIrJn2oyv3x3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbTA0CRA9TVsSAnZWagAAau8P/RZO/6l4LzuLjgjQe36q\nUpnW9Qp7zUu4lP2wOl/lfc+HphLv7ZPuDpbVKgJdehuxECUpiHccsSkTNUJ7\nafoF+hYsZeWCdq4s09CnefuaQXYc4WQlFsq6m0lp0pdl5I1PZ69F8TmV4SLY\nDK4mQW139d2BXv9OlUcnQOn9Ct5JMEqCUxdhFAN8Fbf3omUTBo6g7tURdKhy\nOscrs2urrkE81hv/e52uRKQ/OXhHi+sGEeIqpMD8A75tKjCm5obPJ7OZQ2lV\n+GQvhfiorCEDuCPfK0MEi9wQshCmff5v4JGYdpIm0BhV18tO6kqa/BF7MIhz\nqbyhfu5oxpHoACkSqd9gcrf5JymMjnyhSJeQLBXMy93HMO6kMJl+4zLG4/Fm\n69oKza8rYNurMBHJeFuy2Tq52bFSPxW8lZq0MrmDCtSbUeznVA5emKZhOMsT\n8AlvuvEVETDUauQh/+aeA2SYlR4VAb/OqSbUqEXF7mCJpK7vuIhxPRsc4mzh\nDwMf3VgWc24LmJWJK5/N/R3rjsrbbNADLI8E/cFIW1KYUgOKjHrLLvAs2Ztx\n50oqMERL412zu2CK6hDWZIrWKUgL9KDK2IONgUlVvUGEhqyAoqZL2jUwCyn2\nji2pztGuoiFE3v2YGtmtTjg1VuQz9nb7CFDmlTC4ya+BbmMmPqtlTDNhrRjl\nPfht\r\n=jKZl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","gitHead":"7d8a84165eca35692cc0cab1a2e820b1220667fd","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.4","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.4","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.4","@storybook/channels":"6.2.4","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.4","@storybook/components":"6.2.4","@storybook/core-events":"6.2.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.4_1617768499582_0.06659138983737001","host":"s3://npm-registry-packages"}},"6.2.5":{"name":"@storybook/addon-knobs","version":"6.2.5","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.5","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ec883f20bdb5940c061789e84134fb76ec32fc01","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.5.tgz","fileCount":119,"integrity":"sha512-QaZQZaz8qB5TxeWnXKP0yDwvLgClCf2nfFjo0BEBcio6fZCZ1vXUz9v/ELu/vdGL0G03vkoYjGXYUXmcw+94+A==","signatures":[{"sig":"MEUCIDstpKTzh8Hik8ABNZ/xZZvaiaRJSJ6URHtv/XI/9Jq5AiEAkqDlr0yhNvkpdmUp6WyimWcgX1sMOI2zQHNRsrZ0Ta8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbYwBCRA9TVsSAnZWagAACAcQAJV2VFIa10sOzh7Al2pR\n6AfCUjmacxyVsJWrelVKLivsj/XVU4v7OZJ6RqwdzALB5ROLgAueFx9ZCSfE\n89P+DjToDki1xaoWUJnZj4JWe48spx2/YA0h0ESmzJJN2GibAeYxSiHUEQO7\nt+dtU4+Mx5ZBlUfEiEvjpry8mBeYWdf1BcwVPmuQFxR85fqXx3Uh19RaGxNw\nLJRSgLqU/JzHGWlwbYLKH5/GCqDnxxpnJ1pceUUTbfRj/0xP2CiRk4+txetr\nHiEsczqRZs/42CYhQpMZJYYRYyDxBXoBlQiz+gJB7Pr2lZP3TL1ffQZg6CNE\njrJ5gbNWrLoq4JLbwmhRfpwOJ/283ORY+pjOZC2FUL8ZihJzSw8X9v5hiyLt\nOq72ZNITtS3rmJHu9uE18sGP7o2+K8ny6gODv7GZmOAt8DOwz15AUU4eTPdY\nUYFXjKvC9YrN+145u8qHnD2AJUC0OBOHdqj+SbUrFtikk3ri8CN93nHCQzIU\nDgJnGgMEkRiU985KvWdDR3bwIsF5UfKUdTMgoIiLzneEpIOSAr8B3V3V+FLR\ne+bhKZe/+yvH4X/3QejC6AZmSxLCpIkLACwRRvUw0kVugQ1t2GkhO6K1k9i9\n6OsbJmIl7qmkihYPl9uUXU7i1zEXHAwD2rjJivJ00g1tHtVoFjliBMiLwLN0\n9kOW\r\n=rpSp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","gitHead":"fd587f55266ddb52ba0a508b11089895ce8c3b59","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.5","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.5","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.5","@storybook/channels":"6.2.5","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.5","@storybook/components":"6.2.5","@storybook/core-events":"6.2.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.5_1617792000558_0.6783068636307052","host":"s3://npm-registry-packages"}},"6.3.0-alpha.0":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.0","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.0","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"ce973f542393b10ccbb6ea85545166f4a40a0140","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.0.tgz","fileCount":119,"integrity":"sha512-FoF/d1gnaMy+0JJ9Tneq9/oW04EFenpaFNV5vMr2hEaGgyAdRw61THLRRMFRok7Hkl9eqJuvM+jEx3RAT6ttjA==","signatures":[{"sig":"MEYCIQD/9nnJlj+E8biprN65WRq62ZEwS5aPoFmubDT8JYFFqQIhANssfxdh6aK4IA+TEK8Gvvno+z/FZQ/krYwai/hIbH/+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbtP/CRA9TVsSAnZWagAAd10P/00L+4TlxJ1j8UngsVmJ\nz2bVzZKERvkWefDyr3NvjphcOGRVPvbuBvBxiQVxf0b+Aj7rxIWDcv/3JeB/\n8mFjfa6l9SDN8ZCerMkGj0ScUMDz2kCz+0Itaa1LvJz5qtjawihTZDu/RclX\ndMMv4YkZgGPGB0+Etz9TSlskXEPAaRuMhA3hdy8l6Q2p9c2IcS4Oo0Up6/xF\nPnCteF3B8/BFXWNmfoME/HA4Ws1mWhWZH0paMwOB3vLvT0iKQ3fmyzNOYmVn\nOqXCR7jbJGllHiPJ+eP6S4sZYCyW1iFfp27/OW7dWywiWX1Xgvu3+KieEHHk\nmJ0V9wx2dOZETKthQdM3Mt3AMJ0+ADJeWfSNTGoJ8QIYokKdFgMJlLIEg2E7\no/xxskzGB6FYLMCmqBw4wRArF5jwAQf7FEZIy6pZ5b3oH9b43mWqlx/a9kuk\n/tdA0AC5JvbYyYf5+Xn8+JhxZk3g7SXA2DMEqaUj3iPnqSnLRZYqtt16R6b1\nmh5B3a72n4F2PCRzYJR/krmodWpHQyKPYzovaHm2QkRKyEqpT20oFXX5PMYp\nO79lawhRCETSvkOJCHStOuq2p4Wgat5nh+R6k16lZZwIIL+050rVWN2GNulB\nWd2vdJtxsVhbeuGowgf5cBi+AbI321f4LPnzuSm1JqIMeq9N+O2qfxrJfClR\nD+op\r\n=wcnf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"7739aace24e8614f2acc9972b2ae44cf7f228c18","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.0","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.0","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.0","@storybook/channels":"6.3.0-alpha.0","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.0","@storybook/components":"6.3.0-alpha.0","@storybook/core-events":"6.3.0-alpha.0","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.0_1617875967142_0.42990820664079443","host":"s3://npm-registry-packages"}},"6.3.0-alpha.1":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.1","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.1","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9154cf80a4c05bf33807fd5e1dfdbd199834faa8","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.1.tgz","fileCount":119,"integrity":"sha512-uiErj77vfdcTL58hCUPNomuTDm2iHO7tq7ociYAuRqS0CxRFmWMLeOGZEJWCW2Z7EZ9Ax+wGyqI6QJGv/NkdBg==","signatures":[{"sig":"MEYCIQDCrsquVVWSYj+UAAXe+LJAHVPSd28CaSGN53zyIk/orgIhAMiOJ+kQv0h4DZi/JfJ669r2PBnTqpHuh0rHTrhzVQLZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgby9hCRA9TVsSAnZWagAAhXgQAJJB0W2U0IrPHfsWyOZM\nrgKAzRAX+Hn9DfKpPFE1EZLgD03xtC0Gt4pYrymJdZPrj/eT37nuV30EPb+z\nPwniQJLJSfbheXYpCjDkfW5FRIjSOl/zg5V8Nv0Xn3uHN8ya4XrCgXpNdc67\ngkfcf7+06MLSwqEFrZqrENKtwANTxHJ68BR54wP+VOjOFU7UqYX8moxJmkMR\noXFlsRPYqhp5vSdwzQh43voNkGf7+b6UWvUCE+nWH/Be5S8WZ50QuBWx+0RY\nIzy45LNdnIAvnjmewT4Wi/EThoah2jAmaQPBwDLeUTi9UH0j2G0AMIr5pn+k\nZ2SM1pmZxnYFqbWTv0rbBnMntHMDHsJL7umtrZ4ARtwhSqrCFBA9GCR3jYIR\nKaURJITBuyxw9gJlSuYB36HFf2TbI9hoCHsqMGyeVco636AuJAcMBuhCaUKX\nVuyXDvyeHqdYMM8am21ywMye9Ro/5uE+U6uC24jUcQ7kZb2sde/mnuZlRHQh\nglraMSXXsVgPD7OJJYez5T176Sw3h6vvpleo2xP0FEWZ4osG6xLCfWkbAxMa\nLomehJWVoMrEa/Rv+mB/7TFyH67OQoAHHXdEIwgU0RA+FzLXXcAcZp4TOADm\nuVeViwaunzcBndtcGDKgmczmbF4duAPVi684pCjxLYa2Vti3yZdKsQjy7IUu\nVMxs\r\n=Kemd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"7d99c9e0bf8b8db56b16bca470c9f27245df5a39","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.1","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.1","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.1","@storybook/channels":"6.3.0-alpha.1","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.1","@storybook/components":"6.3.0-alpha.1","@storybook/core-events":"6.3.0-alpha.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.1_1617899360962_0.6683001574079916","host":"s3://npm-registry-packages"}},"6.2.6":{"name":"@storybook/addon-knobs","version":"6.2.6","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.6","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"24441e1c55a9fe1a8eda84fec9c0b32556b89940","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.6.tgz","fileCount":119,"integrity":"sha512-F8BnQ+ItpCeETDg2ewOngSwepiDWn0dNNBdpQfnJt7ov4F1CprGT0fFL25JqIEdMa/X5pH9U61bg1+/sTWGv7g==","signatures":[{"sig":"MEUCIQDL2PpNsmzuB/vw59uiQiV71QeEN026dY2YtuPB7ejKFQIgVqkp0Nrt9JJt0mC1meSSAjC25XluIGGjfzOURCmTLmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb7p/CRA9TVsSAnZWagAApk0P/22yIDr5GbD9xeWuFO1Y\nlbbIuHqxKAYhh3yFBV+4H6O72s+UFKr32XnTxNZ1SP5Gt3KfcZ8krLAIC4VZ\nJ+bVDirYzOQul2XaGXkCQhw/HE9n0dZsHLvjuTj9wdtMMVOUALBaNhN4m6fB\nmf3lEvKN/BWSl1do2750MLPXitsbcR0nB3kpK95vcaAhJi+jg9YPJ2qkA/Il\nuEjZLyEMdQIdFZ4oUdEBDH1giW0ZVR4FJi2xRk6ESM1HUiCeiJdfBZHKwjo8\nFNFKt2+B4Sv5b2zXy/byNOhm97O+bmEbGmrrk2ecvvHfNSdTuKxZm/3HhIHE\n5Am5G+6xY44x1igZ1YGJ4F8KKhi8M2jFNnzIxztdXfWApcKMco2eh3AbCCCE\nPgIgaaxFYrHnHtqDLaAT1WYUsq142hN/eTmCAeKSR6wFH5KzwSLCHVaabOJc\npYPFk1Gm/7fsyfzCATTGvZ+NRR+HK7m9DvwvBDNcP9IjBP89y3mw7x1GMi6k\n1OHU1AARLuLG0iED4j7jkx5uWgMyogGmW1N5PzeJodCBEcps8HR6BB6smlhL\n+vyNKYNMPBVrLPTU2YIYaluSy/1u3IM+1H/YcONIR8+AR4pf/+BdZmgSKWy/\nBt3ZDkHiOvIHJoQi9klICmEKIQe1Q6CD4o3nstQfAHxupePQSuJnUu2k0jnZ\nBA5n\r\n=hFlG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","gitHead":"7bcbe2e2501d034b8b8c4bdd40cb85e808221f9f","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.6","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.6","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.6","@storybook/channels":"6.2.6","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.6","@storybook/components":"6.2.6","@storybook/core-events":"6.2.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.6_1617934974809_0.3463938787247727","host":"s3://npm-registry-packages"}},"6.3.0-alpha.2":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.2","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.2","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"7ba3d1f19d653c35a8fe21d37e261ec954cb8509","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.2.tgz","fileCount":119,"integrity":"sha512-0iv+pMcWnCBuo7NZQ9SSTP9ulpAshGXd5sHZzEv1vAFiba7P2So8egOIstcTM1d9L1ReZdi2rxPE15LSpZY5og==","signatures":[{"sig":"MEUCIQDJogVPC9eoDJ0696STZpfgBsTyT4sai/Phr4H5oVou8wIgNyPmQ1Hn24j1rMYKBh1/AJNaTWuTBXnP6IH+ceER9Eg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb+HLCRA9TVsSAnZWagAA5C4QAJmEUrFdn3erRkoU0WZi\nDUTs2UUmH1hvy2pa1qcegWCx4EIPJdiRlbqgarKIUEHhpEJwC1Z3wXMgKtbN\n5RH2SPhWgw5jwY3/VbE+8xe6VUfIpV26rvoUxFWbOCx10qIgMRWxO7hQYSdc\nbUj13DrZve+5e8K1YZ2W7tLOZBs3zwzrUEUCzsE7xsGml87ktDGjU6ldhkNw\nYLo9pfYkUN5U+MU3s5aa17//D2DfEMRDf9fWkaVkk7ntHWfFDpxNRZEFX4TV\nznzEcyb6vPBxzv/t3KSuvARgCEQNx/Pvh0u2Z0I0vCM9Idcoehf3F/s137v+\n9jYKZuF3OO4Ka9idWujKF7klBG9oQ549kKxPZYHbKQ2u/Sq+bcNyyx9elq3V\nf6YmkdVv/LjHkLSqbPV6a2LZbhsJgWT6sDEMIpRCXkSi7dDNur9BVoj8LGQ+\nZvBYUn2OzW8FfJkldRJFelcQcoUCbAAPfJlHzoZgy3HqxOXgiDd6GAaF3AP2\nf7/yiDj8Lgk2u2rhrTIsFD2LFU9wypBGV/P3jyGc0uCc4GdR8n4l+FsJ2HuP\n2kXET+9AYLNjYVB0AVNtENjXsb2x4fvzMcBgdsxdWUCNwAUEGWjaKEO787MX\nWfjsvqYwHzPC4yi8Yn8harqM02HOPZxBLnFL+ZVYeIWJfRvAAejvgTt0CiPS\nzKvK\r\n=I3Xw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"8a57399297ddf3899d4e0663a8d0f3c6999d7803","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.2","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.2","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.2","@storybook/channels":"6.3.0-alpha.2","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.2","@storybook/components":"6.3.0-alpha.2","@storybook/core-events":"6.3.0-alpha.2","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.2_1617945034940_0.5560206977981574","host":"s3://npm-registry-packages"}},"6.2.7":{"name":"@storybook/addon-knobs","version":"6.2.7","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.7","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8eda92cea5d2f7e483e4b2ca8790d01e9f73eaef","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.7.tgz","fileCount":119,"integrity":"sha512-bnQpd20FWUpnUOgw0vKVouWszWEaKTRm9bWhli7RbQkHBIiWBN8rEi7Pg/x/H5lO87LBPHywT6wbKy/c6pweZQ==","signatures":[{"sig":"MEYCIQCTKMzbGfjFX4hR245s5c7AWJA95aKtlVHYqbJoWnCSyQIhAJYnjaRcZyxyVqe5oOEhYevJ8Buf9ywHfx9rnaab44Km","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb+hNCRA9TVsSAnZWagAA/PsP/A7Qkztk8MQeJFlkoWHs\n/d1tTj5czq8NiM98JPus7o7iVWyC3qiBjjYMhsjk5592DYkQLhU2o6kowdT9\nK+n1wCWueAx5r21p3hJ2aSfBtu2KMyFtGzuOGnPzsYBSbgLxutffdTkvg0Oq\nri+qgRDZDmHXa36E6InM1Z7GEeenhSfNsSNrohaQhjDEGwtzhL58m1OWyswM\nP9pa3Ml446FBGf1tZlS4aQzfh/LtjtO+MLciqsRF7fhBr1Gg+BB6FFx39U1i\nv8JkFnBCFpe8kETkZ6M0/74smVsJkpX7BseAzGoJZvyc3k3tnItPrNBdo/xH\nGX7g/mGy+4ekicTYa2epSVsuRhsM3wWP43hn7WQs6mh3bew8Os54EOWwDyvd\nzDr/I8krGOwou/W0kiERZwmxharpx4tYdtVMpzceQzVor6ENORx74WF/dLNx\nkNLPejcxy5m6TSVtkN25LDXMfG+gzFxfDhfAzdpJfxeLgY/gm//0T+HC77bU\n2ITgPcraI6BOzyO4KW3HJprWjoGYo0DIIvkT4PBZMm3YQPJMejDufbJ99qbX\n7N5K5MebBpSLdkmCwj3ODW7IjhNLLwcr1ScFccpXQWVTvCtn0qML2E0xJJpJ\nj3KxLcPPeQnWcS91MJI9BfJddN6nEDff54MywyW84Td8DCUeBcK9u4EGTbzp\nci2B\r\n=CXgf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","gitHead":"4cc07e57a9e6399dd71e2af43fe3dabebce6ed25","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v15.12.0+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"15.12.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.7","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.7","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.7","@storybook/channels":"6.2.7","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.7","@storybook/components":"6.2.7","@storybook/core-events":"6.2.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.7_1617946700864_0.5521534992131885","host":"s3://npm-registry-packages"}},"6.3.0-alpha.3":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.3","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.3","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"a225467bce8ce60be673fd0213caea5c2ccaae06","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.3.tgz","fileCount":119,"integrity":"sha512-HWtQ98UVr1Iwkm9rozBG5e+KW33JY+rKkIXa+jXkRsjqUZzWy/UEcjwyIAO2UyAS15Q09N0guGzNnUeqRhiitA==","signatures":[{"sig":"MEQCIEZuNncRjapw/+d1fr+xqi1nWdwtNZJSC/FGJ33Qp81IAiB+1IYD65TbCGEy0WpMFS/PB7wRth8IciCid6iymoirmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcSwwCRA9TVsSAnZWagAAtyUP/itnTlHxSTB8BrXhfYMW\nN7zHC14S/kQNzn8/3KFUEWJXuIWS6k3jDnCGBJPnDZO0W3zXQyp5uZ50yuEk\nVLE4jUaKKDD4Gd75rKLBh1ukbCUDk2TY8liuKr1Lmh6ska3JlQuDdLBiL7Ep\nb/GUXWw3prq4NdLvAmCAtgjM2DrZX1gNfEzuGIAvE/KMcUv1kqtQ4Na3xuUW\nx8s18wiQU8B7SLJfV2rCWZ7qUfj91//HIzv8U2AH5k3zLIYxAIm+iU9k2oDv\nMJjqXfupsyJzbJfSETkpLJjqVJtoWmjXfFecRg5vyEoJ1fxB0CKdo10QH+PD\nbnYx57BDYKVy5q27P98U6fcjf9iGlP1x9TxpKXaeTAOEDe/Idu8hhlwXRHWZ\nzl9Vp1TtoWcGgL8236J2AeO6vJyMe8GBzd6HnKO/gnVCIDnP9Scf6QTIcScq\nCBvgONxanXePNFhA+joUdroX+XOzSRMPjRPw/+lwZXpBrj8L+ZjDg+XVAlQi\noGafsuiSHm8/plO3kcIhQFZAWwfh/+AniXzA1PazOEYxKLEHZvT8rsrpNP6Q\n9rMILRNxIU6JuOvABmQdVCYmteO1pErWo+VmNQPMWtGKn4+ov2jvUdU9cnyE\ngNyHq3wJlo5BF4eMFZRfq52KA77IImK+1rd4Bi9MNCTBZYWDIQzdIZJxh9E0\nJ4cb\r\n=CT1O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"4797065261cf6cfdb5aa3b1d451dde0361c3a19a","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.3","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.3","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.3","@storybook/channels":"6.3.0-alpha.3","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.3","@storybook/components":"6.3.0-alpha.3","@storybook/core-events":"6.3.0-alpha.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.3_1618029615671_0.774739805650954","host":"s3://npm-registry-packages"}},"6.3.0-alpha.4":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.4","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.4","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"63de33ba9409fc2f81ee328bd0bb06b7aab3e8ad","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.4.tgz","fileCount":119,"integrity":"sha512-Rg+3HYOQkaU9+LeX+7qVfH92jNOuH/wzVl/XcwCvu5I5wqAxxCMUOnsDQFmTiJn0uhbfWWv4fZobDy2Iv7ScYA==","signatures":[{"sig":"MEYCIQDsLcQ0evSih8MusPObECEenOzSQLfcE4ZpegqrSiXJjwIhAO7DElkGhuMdFLi/7oSQESo7iGMRik51hLFav+J+sHFk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcZ8uCRA9TVsSAnZWagAAHFEP/R3wN9xXn2933QTvoV0v\n4ZEyPwVidUwSZAjWKRil1ajdknhKNzVPVS2Fftols6sXv3vX73k4EibHuWeR\nfR4uUAeF8b2ByL7aNNmkUJoeW+m47VkNe18Ixs11ABOGeepsRfrnm9iuk75y\nU3+bzKskawNr17AGGjVBn4h3Qv4V+3Pn9hfoKEZN+PJv0+xsB847QsqwE4n5\nKLS/lGQa+ulNl43ySUe5jx0PIZBe0tlGtWTNuodT2DtgtcYApZVipzScD/qR\n8C3kMieOf5DuyW9/pyr0Ni3aQ1df3TFy3i44bLGSRNgtnjxGJ29L7m8uGkn5\n9Ie1LWlzut7IO9diJIdBPGKr6hcqvsfEOyZjdKzr37DAxOhk56USRJhO9bqy\nheUU/v/Hm1HuAFl8qYqyXCdZ/C9zL2EwQlzBwqCkhnK2IMj+28pN6z9YnmFD\nEJtiZfidaYuaAKDAuIkyv5vMz2/7E/qsbaXoq/reWjm7h+ocewg28BpehFd1\nHq+r3nhXCrafQV1REHDCEbkBsSSgdfQIpFEA+FQ/W+th63yGbQfRLiyhz3HK\n+FhS1izWUmcnpIAd4z7Bs1Mw1esTqraoI6nQGNn9LJlw0isQzNpegb2PKDIK\nG/Aw3+WTOE/dwZ0THd/pulkHyN0YkA56dZD8jzQ33pEw7yXcO4K2dWbO7Kry\n1cFA\r\n=4c5p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"157857bbe17910be4c5cdf6f75a39dfe9b17becb","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.4","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.4","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.4","@storybook/channels":"6.3.0-alpha.4","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.4","@storybook/components":"6.3.0-alpha.4","@storybook/core-events":"6.3.0-alpha.4","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.4_1618059053964_0.19415495662351034","host":"s3://npm-registry-packages"}},"6.3.0-alpha.5":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.5","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.5","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"9eb9ec01a3f72cdb155facc37916593390527a43","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.5.tgz","fileCount":119,"integrity":"sha512-N1UTHS1dh0dLx5/S7xf5o1cL1nD957GWe4d70knriaHtADLJsdmM6S316anpPfKK9RATt4E5XdnrfHm++QYdIg==","signatures":[{"sig":"MEYCIQDCON6fLbWf459d4u0fuKr0MByPvo0liMUsqEBrePBbcQIhAKky3LVCFPUp252fpAsFpA8XgyhDBIBths3ntMEke3z7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcxk2CRA9TVsSAnZWagAAHfIP/RyPyPyU8C/dL83TJbRI\nrhk5gHYX0bQF+2XnnzFAZ1oIZ7fu94fWxghQIF/EjZRW33syIHJszB5Alz1Z\nwkL9CNbI7Aw9WFHrqIpBh9Pzu3CJ4/s1UVOOkOrxN9PyclQNiMaPpEVn8c1K\nS2S/W9aTlAoIiTrFeElVrzIxyAhgF0ay5duOcFLj02gLt7PiBxwsPm1KODN0\nXFR5jFA+dtr95egKs6Pt3yFnRKkdd+03C8tXD8xFBQzwUYpBkcCIeZMhSC3E\nP7FqdwwMyA6VBTXo4yQV4Klc97ju7sNqbj7cjxAEECNvTelDvFNjXfX+8QFh\n4O2xYqc26BFPDAlq5toldc1r4N0nCC1df9tYbPDcs1nmyyHO4yFzazl9vzJk\nPn/FBRNAuVhiIaRHwtSDItSnGBib+EEaxvFkHNRzx5hOsL5z9gTef0saoT1p\n8K4CbdSlX5/7tHIcCj/qssjNLUYZn9CSumtx7Ich9RR+BlRlUktYTYDPTsTI\nuD93n/QIfiD6kZ+vlc577VPl7mti1uYOL/CNM69cZDjq+lP+7oaIe4KeNlsR\n0sDYGbkELjgMoH9MqYSsBONH75D4InDCUCAkFXE8mcfq5Ow956UZ3MSr2mCb\nS8o4mh5vPg0YjWVElBjSFbhNDeyokf5uyTzmtXMIDOXgYfk3VOOanBzCYQwR\ne2ui\r\n=W6xC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"9030fc7598b26f94e209c26152a021b218386b3d","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.5","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.5","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.5","@storybook/channels":"6.3.0-alpha.5","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.5","@storybook/components":"6.3.0-alpha.5","@storybook/core-events":"6.3.0-alpha.5","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.5_1618155830284_0.3092585147346749","host":"s3://npm-registry-packages"}},"6.3.0-alpha.6":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.6","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.6","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0ca1bd74e6bedbb8357c2defc918a65eb67f7a3d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.6.tgz","fileCount":119,"integrity":"sha512-MX8HJm27QJFwHgRgGnxMDVgLnxbiT2fbO5qKdk54eFfEyN4rVuYeGDnlugXyX/YZtq/rR8aB4L3TqVP5C7wCvA==","signatures":[{"sig":"MEYCIQCA/wQUxoTyCOB30wQjAc7fKIdLMa18dL+pkvtN/reh8QIhAJ0dk0mA50wGHcnw3o3mi/rTWF06tBqodvemo6gl0yJT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdVe6CRA9TVsSAnZWagAA4iwP/2n+QOBBf6l5CgsxS+x7\nXzWIWMtgl/6pwDzDWDW93sqxNzuxq5RXYWLCDtDHm5VdKg1e/rYP+i3FOUim\nJQ9fGV1JlXA3EPqnUwhRRDMV43/bZOqcssCZvndTJgqllYCoQXKvGZCLyNmn\nG/rkdttXasUjVkSOv6vh1AovbbftAi4fTGmqix9S1+xuwVMMD+hF9GofpGgb\n6wpyh4iKXzj8KakNNgOMsHepT2Pr77oN0uFMGkDqC9gj3AV8/A7cls9ZKrMo\n7T54m3sv+4plaCpuagyVeffFb5F4g+IceaT644ICnLZF9EH84ZGQ5h0SDn5O\nnweC5m0I+YdjBkkQBsupkeGI10siJ29gYJnbOpXHB6lTKObQigm8FL6flpzY\nitMvBUEn6BHuRC0/SGIQe/dmd9cIaMBojmXQZHi0m+zcUp7rgRlZUxi4EQqO\nnF6JBhE6ggiEPSvb2+C9US/hLpc6kinkA52NDsZ1FiqyOLwPQlTr/AYOCrUL\nMyTr2WQzTnKXioHYZ7hAjjhmQTbT98kbNmqFcm/7dB7hRrtPRuTjZkf/Rubp\nucADZRehiQk9wgQ6xDUdeiwwQQZa/FOJvMp23UwvPdR7Bq0ofc9W7sq9Sftz\nZHUMy5Og0nLhjav6xwgW6lfNogRgxbRBm5Bp4A9E+mZ5Vgg2dNPVppm1cW+E\nbvuK\r\n=iEcb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"60181528cff41ab003f819524e83285f2d24843a","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.6","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.6","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.6","@storybook/channels":"6.3.0-alpha.6","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.6","@storybook/components":"6.3.0-alpha.6","@storybook/core-events":"6.3.0-alpha.6","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.6_1618302906345_0.7006922481384288","host":"s3://npm-registry-packages"}},"6.3.0-alpha.7":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.7","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.7","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"fa11abf88ecbae6e4fd7d0e85dce1c4febfa4efc","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.7.tgz","fileCount":119,"integrity":"sha512-wVOy/l8ZfbZDf+SfBHmo1OMNXCYOYAUbL1KFrDUuUOy+EfQKApzkuOfoGYhyiLE/a6rRQoYx/0+Zqu+DxMzzxQ==","signatures":[{"sig":"MEQCIDHYFdHNYMBgauM4MCHHuEB3CeBBSFqe0xd6E2P3RTKdAiARn6/i3u60hfU7uIrybO+p8izHZDtKtM2qvDJwJDxZaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdlIUCRA9TVsSAnZWagAAKGAP/iBZO1dzn2yCqi9/bH/I\nh/Rq3YtHn31X2yCp1ylcU9ZKxvpolG7c/isJbGwQuQIWpz8etXovqNsW2wJ9\nGIG1qga1ygKuOfEO11btbX5fGnGx4RtraeSmOPEaUwD0WZq3lbvc0RR2Ml/e\nbmy2LxF0/9Lv31aQcVisHpmhsX5ZBxYvXnob4lepDdtYOVRLt6eMqfxKkDSt\nfHVHi5yQUQXira4vSLsqjLT48M9NWj4LqlCuEqA4D15qL4DSACl6o7bkBVUN\nZk+trGvMm2eJ/KUKVbJryZ5tA3Wf9n3ySDd3x6mFopzdnNX7Tvg9XXGMP++i\nlkXagmaKd3mUIS3W4Hph0zxaAv6WnfV23lOhBZLvleDO3LwE2tZLVRkq1kra\nyWIpFz0gkha23jLOOKwkVpEHbz5wlcKTjSLe+Hsz6+iH0tbmdQ2nSRT3p2Lb\nn3PGXBu1e1ZpfDecBXO1k2x7toKjAX4cVvPbTz1ny3KB11eKFigvGkfCFWJm\n6YC4oTlSUrsNDx/dHBbRKDcblzNN1GqvDzPNpJsC0beZ7KeR2dN+5s8vlIdx\n4apmezhjEWCWxg1FUlrFpaHvUFn4HebttNuS5ElLB7aiSV2prqc21cKuyrR0\niXJI/PbrOgjIQKrWEaCs/2zoKNkT98WYvRoxgtN7cFPhQmTphkBVXeDtI7j1\nN4UA\r\n=7jGn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"ca7182ff5f2ce82ade20e198fed65cd701bf6084","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.7","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.7","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.7","@storybook/channels":"6.3.0-alpha.7","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.7","@storybook/components":"6.3.0-alpha.7","@storybook/core-events":"6.3.0-alpha.7","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.7_1618366995638_0.8082907823090795","host":"s3://npm-registry-packages"}},"6.2.8":{"name":"@storybook/addon-knobs","version":"6.2.8","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.8","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"0f6d0fc4716c5451c99745c0421223f89abe8292","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.8.tgz","fileCount":119,"integrity":"sha512-GODdcBe39sfUDI3hNgIgzGyRMQvl1qI7bSn7NfFLb7bsR51vginiMa3BMB771rMR3ply3VQN4ZDJPi4cXajcrQ==","signatures":[{"sig":"MEQCIBgJAI6Y4wIbGQclALIE9/AsjTt0ApwzFmZuvE6lMrmZAiATvfvTq8X3glsSBtrJ7PYLaKtxnVoMX4/rwhWFw3QO6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdleYCRA9TVsSAnZWagAA3AcP/2dvdZb81wCEl9WAYMmk\nos1XvXHujIe06KiMvbYqud7TrlIJjm7xp/LAqeaPv1rlDox+EydLmsW5VIUP\nhwtHWnsY5ZZsAPf0Hf6tClBBPuuGz/ET34ZHYPj1/BOGiNzQU3MEpQI4r/Cf\nsVw00SwrWVDaYBbQ0S9o3ZhbJvHIkyH0tUqmnMECscXjcPLLSQrjcArSlyrB\nH0fCU1EDgZTe5/0nBI2NdJPNwap0MElDnFHfWbzCO3WApukgSZ26zwV2/VVQ\nKizJNsZQtJCP8RltErBORvJA9o1yL0wfUIIC+wceW+Xs1yRFIR8xljcyoMui\niIfowJF8Zqia1woEXbOzbdXZ+kFel74lmISAn6FWZ1qF/MQgtZApN7YG01pL\nXTrmrgD/vBE9Zxi7+T1dqhk9gUjInOE0eaWftU5xZSwzubcMnOrIfWCVriam\nu9SEW6AH5u/HrJpMHH0q2+h+ugip1sKyCFyWbCjy4XbY+hVGzk2uQB9mevUo\nEKXiu1b+ZC1FzGicNJ6KJFXHO1tUILTpTHk7FgcZkfHM0b/IwFz3GdCHlnYZ\n2day2ifYmDrq1cfAsk+Vx3A2FcM8Tqq1tMnnuLGuZmf12BK/iCkfV3UHLll9\nJlw9TLlZwcShkGSY/MQu+NJuGOgOm2dTLMJXUg6WadFn7bhF+lLX//RhGIzT\ncooN\r\n=54BE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","gitHead":"63c944f232fdfd95daa1da073fc2abc6243194c0","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.8","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.8","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.8","@storybook/channels":"6.2.8","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.8","@storybook/components":"6.2.8","@storybook/core-events":"6.2.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.8_1618368408034_0.7793747058904901","host":"s3://npm-registry-packages"}},"6.3.0-alpha.8":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.8","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.8","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f822adb7f5db402352f65bcfe8f6e609949fffc9","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.8.tgz","fileCount":119,"integrity":"sha512-7RF3kfie5YkksTSf/xByIbw/FLFb5CGWrzqiOfSALRSoH6UgAW7fZoAqlshEtx6dOcWT1hb1Ti9eGtXom3mv5w==","signatures":[{"sig":"MEUCIQCYFNuqii0A0YQgsn6865zPkHSXM40QitUYEiMrrxlOEgIgSutcOetAMnfHcdzE8hrORfHVXKpykuex6sqLfPE1wFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeE0/CRA9TVsSAnZWagAAqFUP/jCiIHaj35p8oDGKz/yc\nq12+66o8D9CMqr5GEPiiEeRvAKDFa48tfBS0NjDHotlLYGeyh8RdvHunhIEx\nOnjBlmg7owqddTIgVrsCOWjG8hjELYxXskmPf4p6VFjDs+33lVzvgVJDrHDp\nPhQao26Uksg3V6cRbphJJeSna6+4oWfPKsWT4KWo1yjVHJgzhllJTWxDxUwr\nafCokelrI+8ntCzS42BZiR5a2KeaCA/Rcwvk29+xaYxXNTU2ChVSiJ2YrLbk\noKcf8eRdZPsynIrHCkqsI174XU310F4eX/wYOVeEwYwCoaX4FGtT5kiiCEle\nK5ISHQr4gi6F/MxXVRxldahhwPEOjxCRWsokQc2cCAj68s0ufX2ZJzu4KANx\n/Mp+a4k+VkINOdb264HRbpp5h/LEXpnR4ixJ/h2qwmW7BGY4gMt1uExcAVrO\naMfG9mT9OAbXncqe0J1+5986o3YmJiw1c4CNGcdPXw6Z8508Hzz6F9N1cu/I\n6CE89mCGWzHsBJFHyapdFZnXPwhhVd7rTQFRoF+SpP5j1+XnBczdazWogtPn\nqOFfLNf+nmf7snqqUHxTJt8dekFaquivrHUDUb699y2dDjWryCNsyOH40xXj\nQBnEW9lix23tYay1k0qMkhhGtmZpuNRpsAL6jXR7c+vdkeolBcvJekhrQSvd\nuoZL\r\n=vja5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"2459eb428208887e4eafab91256c72389e60d934","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.8","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.8","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.8","@storybook/channels":"6.3.0-alpha.8","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.8","@storybook/components":"6.3.0-alpha.8","@storybook/core-events":"6.3.0-alpha.8","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.8_1618496830916_0.5937524492214743","host":"s3://npm-registry-packages"}},"6.3.0-alpha.9":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.9","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.9","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"d724f593aa27456ea44c9e8e9d487abf2a6fe330","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.9.tgz","fileCount":119,"integrity":"sha512-GaQrotF5jDhxO8pEFMrzLRwy0ERenF7gJfWrfOQStNL6kwb5+GFs7nULzUXnG550gWIHT3AmTVu6Y4gecvtuBA==","signatures":[{"sig":"MEQCIF1b1msDs3ygG34d+F9Tmn0QKQcOCs47dyASwfp5nB5vAiAaco4KHtUaUyD9b1oTaBc30v6GNo+aeOQZaTJjYmVi/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeb/ICRA9TVsSAnZWagAA0EQP/10HyT6gXx4aYNRJDcAs\nVody0OXt071/EZ5DQ+WS8ajCWWbsUcvtIRrUL+7Xc/7N0IEK231VnyYBsLNJ\nSNq7wb+SKQgZUcwt4Yv1TS/PkCFAhtqq//WDi/fDM7routQMTeGuTz2P1gRt\n4WPbnnddRvzDqf8SN25ENLmO2iXtITQWBDRjk7d5XQBucP/kPU0OGeT2tsvK\ndeB6n8Kx81uM+MOMYQM/iKa501kwDz/Ay0pHGkZsI/D4uFPbrJ00a9EDfO0l\nANc9XcyuiPHNyMtvMe7c+2DOh/7DFKtrOz65WRHJGoGECFwoP/YtD6YuQ+aX\ngun0T57jk35Kak6Y/cOqw30EBpxPy1XW5EEPsl6jXBW4d4SaJShSAYDLdkiD\n706hSkUjdQxOda8/PCHqWfhLGRXV6MtehIHbKxaUe5I5KUKRbtS21mjhJPx8\nNtz8TNoUzv6IKVNcqq4VAT8pYR2DE6FlvTh3kHcc1wbNZ6mXZ7VZJPKhnetw\nRE5Dd/qnwewzOTQggbQReMHiVjgZWNZkCUSDhtlmzC0yGWVPkfUkO0jolUnQ\nRBAvjTrqKXSK5xYia1sLbmEDNwcxCOwugKqUZ2Xznlu24vCQOz49mGFXvtX1\nHZCAJkxC//oYpOsx5ERxSnefMM8/U2QsSdJ86KJcD3quYU4SU+DV8kN1dY/N\nIcIV\r\n=PlwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"1d75ab7fc1bb8631bb5f47f96447aa53aa5da46e","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.9","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.9","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.9","@storybook/channels":"6.3.0-alpha.9","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.9","@storybook/components":"6.3.0-alpha.9","@storybook/core-events":"6.3.0-alpha.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.9_1618591688282_0.3917325927125668","host":"s3://npm-registry-packages"}},"6.3.0-alpha.10":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.10","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.10","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"8acde85b48662b4cadd4ab9ab44661a82a9fc6d3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.10.tgz","fileCount":119,"integrity":"sha512-FTTiWUtUC9F1hJ4mqn2aC7B15HCcGdD9mPPijhulP7mijFyFHY2eLSiHxhUHfWhrcm4iU4SyIPreDSEtiweWbw==","signatures":[{"sig":"MEYCIQDvw2GcW/DqYGT+IeLZ+UCdzTMPvCviqpLkaKzSd+4E3gIhAM0rB/cFFAg4X5Y1NlHoovRQx698HEeopWUwBeY9J9de","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfDJ5CRA9TVsSAnZWagAAHR4P/RGVSNGtKN8zIN2o972e\nAm+GJ4HWLgAQt3VdO5YwhrprTjAnK+5uIi1Z5EUcOkmnZwjMlmiaGwAlW8pl\ntfwVXNAImhiI9PTgXWFZ8AtJPGDpXRds7NmLsXLlSbn+s2f28aWaxufitSpb\noPz27eVsw76bapDz+XwQ7otjWHmsGs9PF0ZtiPCqmeZvNAL31vlEMm7SnPHs\nigAaZlCMfDAwQVoYYpt5/upaTqe9CHtr6oEqrOVuv5tWLQ7GDf8FQ9P3ooBT\nezRxED6QSkRrAN8/MUYsLHeOUMVXRSUne+/OV4kV5nWyhSjlUfNF6BU3tPdP\n7yHvLz1AK/sQZM9dqNO2CuesZqcOmZi3PC+OB1VMeamSFeE+16nl/klbVS8E\n2MzbB6MVCURrLO4ajj/2hxJaw3f700UTy6r5couTzeML/ZEzmi2yM9vzNxzP\nHzSMizFP7auLo4CiLBFFQxdWWmxWQaGzqtza/vvvw+tcX25CwOTOWR7tmOG6\n+4AJsSXnG3laH4h4ijz4shQtHLkmyea9IvmW/U8ty56eOFaHUua7LtmJUwOx\nUVS+sLOQzGxsa3LHJ7cl4QkSGBGYEozbaFSQSp947IELs5O1NprrSXtraQyU\nLpUIOJHAlDaHaTtvN0j1DFocFGokWYUmEg53DRTVMZWJoIj+LfqzRzhbtv2l\nqkhU\r\n=3uSH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","gitHead":"080babf6d75b17cd3fa95923858408cafa1eb374","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.10","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.10","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.10","@storybook/channels":"6.3.0-alpha.10","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.10","@storybook/components":"6.3.0-alpha.10","@storybook/core-events":"6.3.0-alpha.10","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.10_1618752121010_0.9583510546534324","host":"s3://npm-registry-packages"}},"6.3.0-alpha.11":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.11","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.11","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"e4c4c940c8d629802733f43d5faa4629a5dc8338","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.11.tgz","fileCount":119,"integrity":"sha512-IpJA4VjRbKBHL0DjaQCT64m5Lfs5sdzRhTyXP5Ifj6hbeGxycEyJYtZM0/vcc91Pn5+Wr3xSFGwo9ia+t2pJpQ==","signatures":[{"sig":"MEYCIQDfjOdUcH3uMxVsUvXtC42Zn7f+J9Dfbikpj53lndp65wIhAPHBPqGYNTeOeNT5hIUG8gS9yBfQz0kGGWvJNOn8/nTs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfZGaCRA9TVsSAnZWagAAw4AP/2j5NhzAoDTJMWroMrnt\ngeHCCt7GOF2i3uBinE/LEIG9FS4uL4Q6EldQMbczuTYM3ta8WRx+zXzyXs68\n4uFiWkdGe1XULZiZs6NkvaKbEZO15xq2hYeHNgbDgIzwIdhB1GscjtVVbXNI\nfhszWkFYiaPCpbYWqPvkqsZIHg8FJBGhxMDeG2FqRiBu1P0AyL70smkyDlpo\nh+9mTnUvnNMZy3SwMacGrB0zYiMyWKjcJM6MsDsFmcA0MpSnkhB2EtBlf5iL\nGt3QSubS0pVrLgG7ePSWNE4pLtk3ko4nnzEhjDXUjJIKtFtd31Iat0gCW1Jh\nSt2likOPmT+66uOTGdoCAgKyrg64nA9jZZKiWZjICfklWNNVBI6YY12bECoO\n8sltCBTmYFAWqJHP1CIHzsgdJ+cL5luE1yX5AZdLSB1hQEIH9lL/HXZew0bg\nCjELTqRil1bIURgS+MXrw/4X+wn5RHAC6cpKjGdlA6i1yA67NGPnV6bLURr8\nL+AeT989OW1vr50ZT2mA866l2PxN1jdYpnlxypLIaGgN51a6xR3Arda9HacS\n8270x7hM4CVg5PojcRXKBqaNQuxM47I/Ov3bOULxTGWd+wTa4lXTOPLBo7pq\nWzTv0nJXFcPksQifKs9xTWpPBPyZFvve4fDuB0/5Wae+bTf0Lt5/JkHU4chB\nmWF7\r\n=WVIf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","funding":{"url":"https://opencollective.com/storybook","type":"opencollective"},"gitHead":"7620a2978c6c85168b5d922f4d994cb57526998f","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.11","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.11","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.11","@storybook/channels":"6.3.0-alpha.11","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.11","@storybook/components":"6.3.0-alpha.11","@storybook/core-events":"6.3.0-alpha.11","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.11_1618842009747_0.9965079932880223","host":"s3://npm-registry-packages"}},"6.3.0-alpha.12":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.12","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.12","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"484d3e91f0c39d0ae383841e82471151d3d75fd6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.12.tgz","fileCount":119,"integrity":"sha512-N7ObzQvTCISkGftKCSFxIpT6zmxoaRcM//nmO921gubOcosQrkPIIBSq74Dses6cSuxor6+tdhBCWWk0FRyX2Q==","signatures":[{"sig":"MEUCIQDoBSvW0UCNYjva6p4cOuBH07LKX7LS5fp43eqjTi62yQIgDxIv2efukFncOqJCFspzskkW6Djxy4IkGQdz9PsI18Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfcW2CRA9TVsSAnZWagAAfDoQAKLOVj6GGsLLFSKm2pY+\nTvxLLP1QXIU4lXbDSPY9lY7Uf48/5l8Sa6HkEW96Vbg8kibufr00/iYG+FGI\nyGwMheYL2eDuVoVEgW4n2jsuZMET9wxq0hm6uR0o0mgi5HsPKhz+YXlfsg7n\nv5n8Htv2goEC8iKOlarmxlnv8bLwe8iOSwe3xGh4oU7TtkMIuYlU5jSlS0wZ\nt8yfy9iAEWyalHA+maSHMPDgF/JHvZCe//noQA3msQGudsG0IyQ9FmTPDy4m\nTIfsZpS4g6YBhMMt1+Cl2Fwc7ZJBhSGHIYV3oY/3dcEDkWcngGwRwMhthKqL\nn/rv9/NhPElzR5IpE44bFjChVa30Xrk99yRiXR30NEi+oy+w+iJxTHJLst0M\nLRED17PBfISj6u+1vDHh+tRTMAHPw5yxP5OpHXraXAcIz97zzq/Cg/ohFlqz\nJabAcaG4d6FQ0QURx/NzCU7JfDwrseNSNTKLi4LOvfn70xxNqBt1C4zMLoNx\nAeVdOlQhMBqYafp9Yw9rb4ooTkZlP7K1epGQID9cGt09uEXGpMD2QzmEN74N\n2nWb5+OVks7AHMoVI5eqYZo2zrVhf5SakkSv1lfCiAfKKRNlAl2fxIgAOtue\nx9HD4gnYz66D5Dy8F+jb9RnLanlKnxiNozDitak+Zn9fp1mJTF7nH/B/hWa3\naZi2\r\n=nopc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","funding":{"url":"https://opencollective.com/storybook","type":"opencollective"},"gitHead":"d559d96fc502634e605654d777bf92924692f154","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.12","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.12","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.12","@storybook/channels":"6.3.0-alpha.12","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.12","@storybook/components":"6.3.0-alpha.12","@storybook/core-events":"6.3.0-alpha.12","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.12_1618855350110_0.4627418692418026","host":"s3://npm-registry-packages"}},"6.3.0-alpha.13":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.13","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.13","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"19436ccf3a09677acd9844c20909a0eadeb2b3f5","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.13.tgz","fileCount":119,"integrity":"sha512-IVh9GyCAzMxdanudjmVnBHFiJoUSxxBH1f5p5PMv6c5cCsEFun1JpjCIxpqilAd9xlq+Up5f0R1JVo1lVuZsSA==","signatures":[{"sig":"MEUCIQD7vDIUDxllyK7854Lk2+/6LCHp3apqR/2QTrbMRPGpEAIgXMJlhPMzQSvbJ4JVSnK+iBtIirEeBKf3WRIgUbf953w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgf5HKCRA9TVsSAnZWagAAScsP/iNlpekn4HpiclgN4NwV\n/+GC8+DeQwovxIGPXyHiD3cZBDEKGgyo11J8250YPoNmR6lsNTM47y6mQzM9\n8EPHOxE5+BttrqeEs8+H8W70jh5RemFUse2ukcnUZRXVDFp3NjZHiG1ZyUSa\ncRwrNTY2c8J2/zx1OrjxCam0g81nXyGhsk+gGVAA3CKmHzRrDBKA0Yno9+ad\nmPhkteIkgejWuC+x4HHbcT9AIMFCTKvtjSpsCzR2CKuWHoNDs+YwYKB8o1u2\nrYYaaBSYl92lktiacRo3eyJlKUwQCydPi5ui4MtXZyDUWA8b9p4wx/2IjmZY\nN/Q+LrmFsC3W8/5OS0bknFaug4Tk+f9wdkuK9qWRXcPBqs+6ZoJdmywKphJk\nRPo0wI4wMczrR2TbZqDRzuVYWpFfTlJSY7aGpLSY6txHZ5vRV/EYas5r/PLM\nYW14W0aMrMh0oU6kxyWoXi76PPb9mYgUqwausHbbttbDbii8Pc+Nl/qOZFwt\n7ZnNpOHsKwE76RD8rj0wL/nX5NVhTcZ8QUKl/kQ+iV/j+VO1pAdfe/hu/tyU\nOcdZbBZeQCBr1zTeHKwvhfLDW6RIL9H/mJAwhcWJYQjEkurA/V6ny/PvO2mz\ntBfjy8Y7KMZM1M0g/59TAuL7IsJIHchDO970mu0laBiRDjFKdVZXVcY9wl0O\n8aqL\r\n=pS5e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","funding":{"url":"https://opencollective.com/storybook","type":"opencollective"},"gitHead":"35287402b58e8c9ec660d28e9fe812f6b1204254","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.13","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.13","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.13","@storybook/channels":"6.3.0-alpha.13","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.13","@storybook/components":"6.3.0-alpha.13","@storybook/core-events":"6.3.0-alpha.13","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.13_1618973130377_0.28734205477897423","host":"s3://npm-registry-packages"}},"6.3.0-alpha.14":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.14","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.14","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"884d8b19868af4ca75c1c957727af459cf1ef967","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.14.tgz","fileCount":119,"integrity":"sha512-3ngykOVEyrQzHZXmB3HdBH6UHs0OXOOGzAWbfiPFWd2EkQyx6w2/LxcZJ2TM5feFxZwqXBsqsgJOOhakGaNY9w==","signatures":[{"sig":"MEUCIQChs8Fmjtev8urpIJz29OwBKHUnGKhM2zrDo9RrvjdGUgIgXB5pXUwdQovBJegof9L3v+2Yi1R4kIGxZBeBzB6uzyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggi5fCRA9TVsSAnZWagAAd/wP/2fhTDzcM2/S99ZLQ2Wd\ny3A80shWkY7as7hU/JXDdJpOLIlU+0ZwFMDoAt0LPxCpQZfIQCC5ybaYRdPl\nVJ+5THHmTZXwTIAM7IJkKio17E1N/jVZhxe8eyPhYLwACXr3i+2bTPrVajY/\nsf1OJp40cp+XtP7lWg0t9khGZ3x4jp3kgm1QHXFIMvH6aKd8Wb4on+uQEoaP\nNEC0UXfM3SLUdoc4mQtDgGCNrGF2++3CDqhjy/SH32BamT7oIuamt2w0MRJb\nSPF6hXtJ21WmSCfA+S0Noo4f5XEJkmYSamCiYQMg/Pa7MQ2c+m5yfrtviDgo\nFugHHk7NJr+uxFYnL9j3DQPOqHGyq199A472DZfbJQU8tsBy6dY9sEVtJiGS\ntuh3K4VPSCW5MnJildr9zoCwGNiAmfzkLjxQwbbAkj7f/mOmaiUNVYw7PvkR\nQd0vz6yZKgirxt9YRrw+3vGHGEvvo8TVHLKdkym+Hb4QYqvlAIaJuS3Z0JSL\nHMvER1IctFy2FPT1fdXsGEzrK0j3oJZ9Hn3mu8XkTRMI5di66YSdSXFHGhIH\n1llI8mGTAcv63n+JxXEjF+kY3H3Bx3n4kkMoX9H9fZ8vh9BGkEzQ7MK1+q4Z\nmgWAfPaS5GpV1XzOSswbdGKxVRn8GGMS9saOnd3JvVLktozVNCurWZzR38Op\njdAm\r\n=sLj+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","funding":{"url":"https://opencollective.com/storybook","type":"opencollective"},"gitHead":"eb1e3a913f3c5329539a7a908e7cb955ffaa8100","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.14","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.14","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.14","@storybook/channels":"6.3.0-alpha.14","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.14","@storybook/components":"6.3.0-alpha.14","@storybook/core-events":"6.3.0-alpha.14","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.14_1619144287229_0.5742635529128948","host":"s3://npm-registry-packages"}},"6.2.9":{"name":"@storybook/addon-knobs","version":"6.2.9","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.2.9","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"879b2e3861c29b30b53f1d624315a2f3a463785a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.9.tgz","fileCount":119,"integrity":"sha512-ic3xXy9uWPfIGP4x3VuGnrUmg/Jn9rHKIqZMhRcC7mFDRVlgbekvQxaruC6VY9LW6o8jV/miReSZkJf7M8o0aQ==","signatures":[{"sig":"MEQCIFezqVeoAEvr0FuvOY6IkNeY4b1oEqMiwejgr1SY7A0cAiAds2Hs7y3CJ4YxDL+rN2bhuL+0OOH3AtFAs1N13QfeAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggjnMCRA9TVsSAnZWagAAfLEP/juTl6h9uhNifYLnHAK8\n9SP2wzp65pOSIwHDNqZnZqqlk3dYPzVlO+QMpnoVrmZ1toqYGOd3uve8R8Ih\nlQfuRMtqbjrMRj7Uh9K79OJ8C0so4rEyIwLezhTcC7W3EcwueDuaSnMjxo5z\n/1B7XPtqj1PXPA1BAYmT8JI7sj5GfoYdLaKDYoIgGj6I3f3bwrbCqo/foZAg\naH7YwfIqdNT0o/yXVXUUeGNctnqMgnb+ZR8QtL6aMqH/TY7oH8iJDzTdRRn9\nLBAtlS4A2YLn/qPOfQcbHr4brezz0xYXjp54aseOGU1VCG7bb24ox9IgmuhE\nTqN2yRc9rrSHHBMyLhSzHvuyMWH4Ni9K0Cj8NuFzOGuxq2DHfytTOLnpFs4k\nr47tgA0e44LiKxNzHdW0vrditMmzasvOM8KcILt0KwCxjF4gNfyCpzK9IS3D\nQvNMQvww7M03FmGrYy2HzS2jOg8qL0Otpr2kkSzawbA1akswXa6B8Zpi73Lf\n6N3WV32u8em/OI0byYHP3CT720bFxGCQKmsBcp4p2Ql+a+0hkgGdz+FMvJvb\ndiKtd6a0/706MmJgyk5Nba0yEKLI+bg+o0pfW+nSrVhBR7ctukO1pMAxHSaB\n2ebKBRW+GcWV9FBSPMbKx/QKy2CCmsXos6nebC1U2RhFbra5NPEFfS1MUX/t\nElCP\r\n=cwdk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","gitHead":"588d1330b80596a41cc6bae7aecc00201a6c0679","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.2.9","react-colorful":"^5.0.1","fast-deep-equal":"^3.1.3","@storybook/addons":"6.2.9","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.2.9","@storybook/channels":"6.2.9","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.2.9","@storybook/components":"6.2.9","@storybook/core-events":"6.2.9","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.2.9_1619147211696_0.9274817558960375","host":"s3://npm-registry-packages"}},"6.3.0-alpha.15":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.15","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.15","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"68c1cb2dfa433da6ef06bfa4904951403f4addd0","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.15.tgz","fileCount":119,"integrity":"sha512-stt0r6I04aXSqyXfN3nJIfx+O3vAjuFZlQ/l3o3Jz65uRj7Yl4X1xcVnTzpAHnTethtXb6F17KKuQz1+98bk/Q==","signatures":[{"sig":"MEYCIQDUU6/BI3W27Gihy3zWs2iS0Lr3Ig4x4dqnkxZEK164pgIhAPpCnd+/tQ20CdB7EO/5p8fPqCMxGk8HYhFqUoY6a6CM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiEt+CRA9TVsSAnZWagAAQAwP/1Hac+0F1wae+W+8j3+0\nCTm9DgdcTEQN5gVTS0xCFsmvyE3XcB3zEfLyaYAgIzoyQmHgeMZOjUcNpXPZ\n/8Z3w5HHGVolQy/1jZk7wevbX7aT3iojuGrGhW7K3HJeDWmGvQjXcm4DnFED\ngwssnqfNCiwD8IHehZr3hx60b2NR2BY3k60sSy47esDRbYs7N+HHccusyT2T\neM0cQa/ym3liNQdeVGlWaDRLpSN4w8J1dkDwVIEUus5BUaQC8PUb7qYGgHEX\nineMvO+CtAgECLM423VnnAWQ5u+I9MgCOPVAJklQCGXI+teRx09n6f4q+7Fl\nrUvKp+ERRc39LR5rDezD4SQ4LWy3sB6F2d68YG0Ql/lmwBxLPEZrJYi7W/d/\npPApF6dstpMLnMKEubPi6oIJ/nDcu5bhKa4vOI9YCwXOWU1fpac6NN66fXcU\n8HUfvWwGBQbK0bYvtafmcP3dMOzoq86cGCuqArdkGJNWRcd98C8Hy/PfTYmi\nZgSeSbH/NTI/ol2DAvxGNh6wOzjnpa5aPey1eKqcMMmTRGVs7raOrIE2QCNo\nWhiIZWbP4Ws9URWvzRac1PLIlgsbNabdF1KwHsqZO3XaI3SSfF4kWIjl3iAd\nsXUPqPLFAI89mCsqzt+4Z3yeFJ9Pn9X8Q5UrADlcqE23ggciv8EfMAv8msuM\ns7Oe\r\n=0PdF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","funding":{"url":"https://opencollective.com/storybook","type":"opencollective"},"gitHead":"11ea895ed3be540d4a353eed8bc50aa08cf5fcf5","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.15","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.15","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.15","@storybook/channels":"6.3.0-alpha.15","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.15","@storybook/components":"6.3.0-alpha.15","@storybook/core-events":"6.3.0-alpha.15","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.15_1619544957589_0.002631696522546134","host":"s3://npm-registry-packages"}},"6.3.0-alpha.16":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.16","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.16","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6809c2c18136638358d460f4872d4ceb6b70475c","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.16.tgz","fileCount":119,"integrity":"sha512-7B9baA1Nu//p+tb48xqwFyQVOefzn2453+YrU2sZOwrXSbJSh6RUuvXxA/LceUmLaS4BtIE9oBvY9uCfgUK8Nw==","signatures":[{"sig":"MEUCIQDMtn4RtH1m6wj40fkzNHQtF0tZX330cprMIoSlSv3+GAIgHxw7+arXZnZcgavmMl+h2olITzTrCxGP3KTjOmjQm8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiityCRA9TVsSAnZWagAA0vIP/RQdNRSQIRmXgmoj/loV\n6XRbqb4ym9SC95DVBSCVfStHpDUepd7kka6MBgPXZrzTnYH2zY0NcmE21rN9\ninKbewqNdMOFkad0+joUZnNLWei+e4vRk5XJbrbnqjw9IOcLwiJKRw4AEtis\nkIj3cUKewK+OrHfXYv1RmMQaH6EV1xD0pi3jEG4VEeSBala8VguVr1COVYXR\nNd2ly8dLTaZW9+cG8INVhXQlmpM6rYCkZyXlnppuWdPL4YayalfxCL7Lw8nP\n/D0VDJ//sUIipFglYKqdffCJRBrZpTHCT3A5vhLQIHISpeDOeRl8KMApxUEi\nBlkcH7ti8hpaV/iUW/KtXp6lIzCPbNM6WnFiSSQ1E0YseQIVCOmSMSKTXP0d\nRtRWwjG0DKdLPdPnf8j18C2Tqfu1N/tUg4Hcpp4kvYmCdTFSIE0lhp0ZQ0MD\n+FAqQ+fIJSn4ZSx7CMwdUKbxRszyfm5WIdBx26Ob87uGNAGxeLWWxfbqGOWz\nkwVDKIo55Cu+owmrNSiKYp+Dq4KOWlpHrNxSVDymYzSQ3LjvAvs07ukp5UrU\nHnWtO9vGaSwKpBqgHK/SlkMLydKASLSsjsRZ3e8lNfKZrYRXX/2Ezzd0zb0Y\nCVXRRaXJRacqm8BzY7p1j1u+pl7aF5VcchkW0jzu6284/3jXL0Xyj7WHw3F9\nCCxW\r\n=FwAp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","funding":{"url":"https://opencollective.com/storybook","type":"opencollective"},"gitHead":"f09bb7bf0016bfbc2723f43b3e214e4a1c644843","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.16","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.16","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.16","@storybook/channels":"6.3.0-alpha.16","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.16","@storybook/components":"6.3.0-alpha.16","@storybook/core-events":"6.3.0-alpha.16","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.16_1619667826248_0.8452756813801274","host":"s3://npm-registry-packages"}},"6.3.0-alpha.17":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.17","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.17","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"427bc0d184aefe7e185e7e5004b798c55624a918","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.17.tgz","fileCount":119,"integrity":"sha512-JfpwBYbHwy3EGetAqd++XLl27hl3T881RpjUIODzUHAzvRF6tkPrKqq9CnRKZhbKKbqjakS6E2H1SapSG4l3lw==","signatures":[{"sig":"MEUCIQDD+q6oC2Vw3Wn0Ajx/fJUlzkF7EoWjcW0A1PQtwUfD8AIgRNKlWBfMrPRnfa040EAtxl+iwgYOFkG/iXVV3QLKP1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgi6QACRA9TVsSAnZWagAAhdgQAJDG6851Qp4qQiVxmOWQ\nKbdgFzvvoXtNINqCj1qql+cSFUaTCwObz1cR4SkSG0ZN4XSZkbBwF4soBoR3\nqFhi+CJhFttSP5c15q2nE/2trzKXtClYtdqd8KzizWeCZz+Wv9aa/UjO12n/\na2jjVw1jJotAK2R3O8dQ7jGXVUVXKTjO7AbvOSXtkUznIYu9E4eD0eFCFuZA\nVd4rJJ2nnlCtbGKUEZ2LKLzrO4uApwDMkBGwFpDn3mCG8EwCP6nn39WqRAUp\nht/ENvnCea0kF8rKOtTvc/s+mY9nkzpr9tvD5W6B6OvKs59L0DnRqOfIoBQI\nBqixtQcQGKf6cyqG7CJPySi7alSdmAGKigVyf0sefhB0k2/xjwEs0G6uFvOa\nkgMDvjlJ0nLeQ2jPo298/+4HkHnarz6TewLmbGukgMRA5pj3OA7g38hBO7uq\nz6dljgpabSo0Kj4cfsRYxcV6eCsKprqm+AsT7EwJEs0sHKadHkKT7S6OMRq1\nMEpVF27yDBVZhoq5W7oZF7/Uc8kzo3WxJiNcb9t/rSajhQ+AdRZJwP5bYsgw\nYVzdoECUDdU7PB+nqMWWgk3CYBtZGEjO01j64+0rRw9qP9wjo9dveWceddYI\nV3qmBh1bsY/4mlCPwWYNrM49BdxwX1QFjk4x2PiuIK03+CultjN3ZtuUM07N\nMnYE\r\n=KTuY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","funding":{"url":"https://opencollective.com/storybook","type":"opencollective"},"gitHead":"36d878614dcdea5f06e9ecae10da69fe36358ebf","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.17","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.17","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.17","@storybook/channels":"6.3.0-alpha.17","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.17","@storybook/components":"6.3.0-alpha.17","@storybook/core-events":"6.3.0-alpha.17","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.17_1619764224179_0.05748667547891517","host":"s3://npm-registry-packages"}},"6.3.0-alpha.18":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.18","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.18","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"80db3e5d265e8b51705ee1d704ecb2b55d1f9757","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.18.tgz","fileCount":119,"integrity":"sha512-wSPaNHQcLVsARcrKT1nGGWyuWwJHNuBDHXQbLm8K0JdoiY5SSOUgfguxLPnG/BdQ/vltS0XLTnqD4UZlslB8Bg==","signatures":[{"sig":"MEYCIQDwv2Rtis6SmIyUvRSl7KWxjLNUN6KLcP94TyD0Qiy3KAIhAK7qK/d3zmi6W7bpk+H8Eb7lRGxLIKaMw7C9tTCwt2g6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjs6eCRA9TVsSAnZWagAAZC8P/iIkgEvDV4rhsZnJ0zNO\nfUY2GbGDA0OlfqZOXbnnSayCC6pGDJgqLIpt2Z9T8SmHKZ/m6PEueBQ+TRV8\nDj4fS2luwBiav7JLb3Q93NM04s9TP4EEzzWjAFvsNkrLVHaQS7aOTaJeaMZu\nrBO7uEpNqyeluaWAnpA0hniZERMJN9yGtD85wOL8L0pJ7Gxtq/H3kKhO9BcU\nNkBbbxfqm276ZmirdHfNU11Yk4s5jstTuCjXM5ajMoSLEZ+tp/isksqqdCOc\nRgFktJAypqrt39WmGOY/4xLSXFfvlB1dtDCpoWOrwJU9fMDRFaHLkELkKj78\nOERHmFHsqeC06zOJECjjRrbqje+hb7fCp2BelKBCBjxPL2OiaVduYAXhvTpH\nFyFewy/ryzJ6yF8KdtsfC5v6rIH2tESl3AffqQJ7oNXw84oeBvss412jBcpR\nTczBkK+QZ8Dst3Wv5+jxSXounhOb4Bd49pNTSKveuPsRkvuKvNoOGG8JADwg\nWNcZzU3INQ7GTa4xZCv2nOPjr+oz7J/d5rRFRXXzS7ePdRXzTp8NUgZibZxp\n41YOcvspiBBIWkt86m7owfjkdSawOxySLieDZE5IXp4mYMpyNc4ldsl701Pu\nwfLemtypmgAUas7SyELHnjGQBvFVlop1pCBnK1M0gqBp5A9XK3puW72pomaB\npWA7\r\n=1tWE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","funding":{"url":"https://opencollective.com/storybook","type":"opencollective"},"gitHead":"d3942573e1cff3aa16066b798b22fd732259e67b","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.18","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.18","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.18","@storybook/channels":"6.3.0-alpha.18","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.18","@storybook/components":"6.3.0-alpha.18","@storybook/core-events":"6.3.0-alpha.18","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.18_1619971741716_0.2178777385389088","host":"s3://npm-registry-packages"}},"6.3.0-alpha.19":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.19","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.19","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"6d2ee0be5452c98a9af12d36971711007711d084","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.19.tgz","fileCount":119,"integrity":"sha512-CT78PB/VIVBCv/63ghrdwr6V6S3yyKGEovrpBRaTfXva6wFxuKuZFv/BTAjRfibNGemUZv4M/xGimQ5iYy4C2g==","signatures":[{"sig":"MEQCICAihtL8nRYQzxSWNfYqUX4CpTAkNt7zpPGf/C7c/5UrAiAx1mLvDVDXLTyzK0jm+0Ve0hPQz3RHRT4SwiKbAkq2IQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgj9kcCRA9TVsSAnZWagAA+WAP/A+2iCZr/3nKVodF3anu\nFbxY+vANc3ZfFdDtlQSlP74EcPnQYPjH6nryjb1FKOSewFcl0UZZyR9gI4ud\n6bNFzZ/DY95H4yTDBUADmwT6s/V3427jLSpoAzAsKN9KFrjDParIWEx7ELJY\nsWYlSrA+FkS09geJmKnGvr5+FjahGGZwC3UGxJ7tnVAXk0ybdLnyhaJLsDNg\nLMUOrkQfNLcRfU1jd1d4RMnFeNrG67i7ZI5hDsscCK1nQabt73UstLzYnPyT\nZPD128VeWL/1PxfHxNApw2NTyWHXSWaKbfhbUGTRfswgsHsg22rfVA7vr4vP\nTmaaufMSOCjOIfY+THgQA+PS/k+8OuT3piwEcUEnsFgBa5q5x3kpjMUuZpPr\nDbmoJ1cEzqJZZAlu36oIES6UqW7Vf3CUnVwHmBFCTB7p8hl80ZUJ2SCrO8Pd\n0JkUGOf258ab91A28Gq1/38h/qUQa50aQHZ9g4yOjUZ3eCY44ZSLu7lSlVYB\nCYdA4mUuy9Q81anYORXx5BZLXlYzgY/D5Ngc5q3Vb2CtlyqJvM9igBiNGdEc\nkl7vF2ZGNhxnYiwwe77bHPHwBCI6hb/bWbL3je2X8NPGPIQtGGNoUXE4XsKp\njR7NWOeE2pbB++r5WuAYGozKFOZDZg1QSFcHwU0VWVyqrlKFdJw7hmzgRtr2\nSr7e\r\n=7JFJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","funding":{"url":"https://opencollective.com/storybook","type":"opencollective"},"gitHead":"8ba485343b31df4e65fce2494a5f615d6d6c661d","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.19","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.19","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.19","@storybook/channels":"6.3.0-alpha.19","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.19","@storybook/components":"6.3.0-alpha.19","@storybook/core-events":"6.3.0-alpha.19","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.19_1620039964266_0.07831173373843292","host":"s3://npm-registry-packages"}},"6.3.0-alpha.20":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.20","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.20","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"2e95f972049b9bf21f1747c1016b629ab37c9055","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.20.tgz","fileCount":119,"integrity":"sha512-4qlwrWXx6WmpyY93D6CPAwY80COm9pA6hizzycDF2TMtVkGAZ6M34qiWK1bcTap8tShBWiFegOF0VV7DmveQkg==","signatures":[{"sig":"MEYCIQCAsgMVTF9+4ngzBW487LpSFBJsoJG5JrojUBWoqEfH1gIhAMHCsYMVc0dcvIMVOY0czoDAwGKNlN6hTEI7QYhKHWYr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk/S5CRA9TVsSAnZWagAAyQIP/iihYsvsdevLsShUZKZq\ngtyvZvPMdR/RwacU6Y/d099N9HDhH1kCc9hu8o4xkZQfSlpKeREAVRSpcHD8\nS5m75hQRjCdOIOxEoFmfCzTbhr+givYeXXAAI65/HLWPUjaGUfwEDn5otGni\nUOXrRcTiHl+E9ocZSUD3qIjpdAN1GFbnbccRQU9iF3kC15vClhRVL5uyPzk1\nmNRfRhd2LLtIpdqbI2rY9/tISbEYKYKONaiOVXhGRTvG4aPXaYuq4KuTRFzv\nod+XGaedSetENEzcaj36LP5VbF0kzwUIvAXX3y87pYBXvnWN9Xf7z16ar1Yk\nkkkQPSe7w1I1bnc4Vv6nD9ZaoggU5au/IRIjkuWNmtl9ZDK7PkmONLkJwCtG\nQCk7HUyuak6QgYNvPSRTznj3nrG+C1X6UMGQjZGpYjYhDSnTHLqnnUyq2SRf\nJRlLLQGxvQ0NhVnNGtuQ+VCNRVpyLZdds6B121so+opZL+Qtx/3h9I9dCIBe\nSIsmrHd5rcqGATI4Qf8S5dZOov/NBUGL3Hfkr0q2j79pDHtCGpgywaOFw8bV\nForUSGTfnPK7W/Ns3+zeDIBOAo6tamfWVMtxr/PJZDSGkh9RWY4seuCm5GuH\n7YA5zghIK9jhb9Se/dqbCHEQpsA0gtBla2tR0OFB7YuQ6Ecu0vX7NY7pEp4g\nnGTv\r\n=odrS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","funding":{"url":"https://opencollective.com/storybook","type":"opencollective"},"gitHead":"fedb50ac466a65a406e65bbabb95141315ae22c1","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.20","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.20","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.20","@storybook/channels":"6.3.0-alpha.20","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.20","@storybook/components":"6.3.0-alpha.20","@storybook/core-events":"6.3.0-alpha.20","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.20_1620309177234_0.550103462453644","host":"s3://npm-registry-packages"}},"6.3.0-alpha.21":{"name":"@storybook/addon-knobs","version":"6.3.0-alpha.21","keywords":["addon","storybook","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-alpha.21","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/storybook/tree/master/addons/knobs","bugs":{"url":"https://github.com/storybookjs/storybook/issues"},"dist":{"shasum":"f546942f53e08b98aae26c6409b92d5009af1c86","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-alpha.21.tgz","fileCount":119,"integrity":"sha512-gE1GneSWF+Z6EgUkTogTw7CNSjBx2kNXkvPm3h2C5jt21st96bhvmI4Y3tf0dZUKJlAbU4ZP3Sk8i4UEW9jQAw==","signatures":[{"sig":"MEYCIQD9SQktSxWuai77RYVoH3CmRoxdUXQ9+HVH2jxCDzNrRAIhAKROqWr2kw41nUkwS9ZUDNrnfuPeTsddzO6fArDIScq9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglNiMCRA9TVsSAnZWagAA3x0P/iOlgc+CvJlC2hgLHy/j\nNn2z3wrTu6ltZItHekmzlrK7qf9BUYzC+tBzhzDM2fSsCuHOi+mfWRsBpHJ8\n7Bja5WkBnCfhgitB2JfQEdVJSEJB5qedxLukiPKeXBlbaDwbhYAdJ3hzAr7l\nC1+nKDi5Bt3RciDe8cH6ycVeK3ZDo54gBeiRIzMpUcQevfRHdPFAhYYhEWbw\n3h36NdGgH37U2VE/n3an+6hy4rM0/hXrsk1zmDXsc6KPV3us60zEaWxjtB7D\nXuAyI5mOjS5C2eKwH+Aa/48BLH9soU4VRcgcb51CTdUpUdUDhSe78A2zmtm6\nRXWsc2J5obmmV04FR9P0aZ+DlnnEZnntWbadm/ATBZsTKCg2LOzZ96JgQA/H\n2eV+zAz4CzkrYXgGu+qGgpNbolHFLLK4UCNUeHjL5VZflPERc+hEXN/mdtn3\ncN55HmJr6SLkozqWiquyDMMccapgst/0ZkhTyZLWi10G5e6HWk1hHJ+aDgBh\n4V8U20naRscomZutZixsLaIweTG/cYA4p4eEGeD3owx1PY3rFx89Y/K/STqD\nCraUU/S1ZDHgRdzGjrFF/fCebfeyWHatsZR5Fz95SBoA5cF9sVFshSwwX9Xp\n+oqKzNPUe8M+YGlX/2SiDShKPCJHZJ0CmfchM5zVxRPVbQ1426mrIxuZwpTI\nOHUe\r\n=zMme\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/ts3.9/index.d.ts","module":"dist/esm/index.js","readme":"# Storybook Addon Knobs\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```\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","funding":{"url":"https://opencollective.com/storybook","type":"opencollective"},"gitHead":"c3ffd75d5ae104f678f2f0bea2042b017373aa4a","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"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.22.1/node@v14.16.1+x64 (darwin)","description":"Storybook addon prop editor component","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","@storybook/api":"6.3.0-alpha.21","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","@storybook/addons":"6.3.0-alpha.21","copy-to-clipboard":"^3.3.1","@storybook/theming":"6.3.0-alpha.21","@storybook/channels":"6.3.0-alpha.21","regenerator-runtime":"^0.13.7","@storybook/client-api":"6.3.0-alpha.21","@storybook/components":"6.3.0-alpha.21","@storybook/core-events":"6.3.0-alpha.21","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"typesVersions":{"<3.8":{"*":["dist/ts3.4/*"]}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"enzyme":"^3.11.0","@types/enzyme":"^3.10.8","@types/escape-html":"1.0.0","@types/webpack-env":"^1.16.0","@types/react-select":"^3.1.2","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-alpha.21_1620367499624_0.3764818473326004","host":"s3://npm-registry-packages"}},"6.3.0-next.1":{"name":"@storybook/addon-knobs","version":"6.3.0-next.1","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-next.1","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"83112126fe96e0b6d43e9f3b8bdf90594fa7f243","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-next.1.tgz","fileCount":71,"integrity":"sha512-Z3VRqUsvX12uSIV1QXnJzZR7Exue9UyAm3quyl/8FSsop5yA4O/2r73GQ7gpB99pf4jFYxfEOTMGuvrxhcn6Uw==","signatures":[{"sig":"MEUCIH1oxWBoyXc22ff/lkwkBK+cVF+btpbqHEYsWqFbeZnSAiEAqThF/KNrm1mMiOBR81BCtwF93GU0HIzwPFckaXm447c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrxiTCRA9TVsSAnZWagAAVOQP/RP8H3TyL/sWHDc3zUUc\ne0ihzbFVB3NWAuTcmbEasw3c7w/5IuHwmuQuiuUuI3nsl1JjlPvpl+n08dKs\nz/wtUj/FRc9RbYrI/BSWSf+mxKgY31nDD2QrkOuj1QHb72t74XcbPRoWNySD\nOR1Tcm0hiJuC+oEugSKwB8b2xa0wvAsOcNY/ntMnF9tE5PDnzpTCmepENaQr\n9Yn2x0OQ40k/ie5cQuYLq6jv4dN8J9OBtauEtgYue+dtXUtlZz28TYoLNVkv\n3dGwE7y+DBVlTQFy2/5DU8o3uFDZcDjTMlcF0CCLgevdxQZoBbeoUkbvaT/S\n1MndSFUtrNJnvImI+GrJcuJzdE+Q0zPhewC1gelJlNX8scd4w0VCj0q/9dxa\nn6c30MEr7aaVfbYgR8R+RMLCSokz50lLPweZez2/oN83qvOVAb1CzkrWhiDc\nPeKKaP1qnJ9SHZPIaoZM/4NUkDqJ8T72rIprPj91UIwnsGmjwHfeh5+S9jc7\n5jEtXhGmfQaRcRchIHcj1C7bhudws/EJtfYeWR3hff13Kj2Sm+cld4ism48O\nqR44hDauBsaZhbwdMLPEJnLMqvB91lElVuM9NBKVEhCAOVTiOPfwCUdEl4mL\nXfAVaXa0x3eDRdJd2oPIKpggDCb+ex8V79UH+yDEX6kAebsExVYNeDkd/xvb\n2rwT\r\n=JaHn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/preset","readme":"# Storybook Addon Knobs\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```\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","gitHead":"fc5d0249c6ac5ea4de482adafac2929bdb854d50","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"start-storybook -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","prerelease":"node check-metadata.js","build-storybook":"build-storybook"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"7.7.6","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"15.14.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^10.3.0","chalk":"^2.4.2","react":"^17.0.1","rimraf":"^3.0.2","react-dom":"^17.0.1","@babel/cli":"^7.12.1","typescript":"^3.9.7","@babel/core":"^7.12.3","babel-loader":"^8.1.0","concurrently":"^5.3.0","@types/lodash":"^4.14.168","@storybook/react":"^6.1.14","@babel/preset-env":"^7.12.1","@types/escape-html":"^1.0.1","@types/webpack-env":"^1.16.0","@babel/preset-react":"^7.12.5","@types/react-select":"^3.1.2","@babel/preset-typescript":"^7.13.0","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","@storybook/api":"^6.1.14","@storybook/addons":"^6.1.14","@storybook/theming":"^6.1.14","@storybook/components":"^6.1.14","@storybook/core-events":"^6.1.14"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-next.1_1622087826624_0.3235095151877838","host":"s3://npm-registry-packages"}},"6.3.0-next.2":{"name":"@storybook/addon-knobs","version":"6.3.0-next.2","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0-next.2","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"1881abc968aedb24a2fc55807afb618bc1d3c629","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0-next.2.tgz","fileCount":71,"integrity":"sha512-FBh5uEtUVuRaK6ew+m28HLG6tdH62+CBUP/OV+9ymkUwGa7caiuXKtxRQWfPEqWLCwe5uwKxUV8fHkoagwM2Fg==","signatures":[{"sig":"MEQCIHIjnmtCDvCiMjOlOLWJrWzD3XpaHCk0R7APjtYDfRvTAiAOZ1y91ytiIqJNnrmbfRtZmBQ9WybVRCj/DxoPcZb6qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrx/KCRA9TVsSAnZWagAADkEP/jr+yfk/89xm/THt4UOj\nQZiKhcRFUqcX+LlZbVqq8vu5LVj2hY0pEzr1P/sc2qpjB3W399jYfc5tNHej\ngmzChOPneVhaN8D1sSKj+IcuCgB2MA2n1fbqntN39KxBWRJbSK+cyLPMC1Pn\neYiTo2pYuLbztMI/bz972LQP9TWD2RXmIT3vt5nj25w4/s9PmmFWOLFrzulU\nc0gIMAS2+c2CJ4j2SgZEdE4tTxGq0JHmoawSzS4jgMb/+46E/yEFacKHCI5H\nUQ0SZGeR+pge/z2x5tl1BiyevcLm9TnApMBrCG9M3ILzUjFlOcqhaYlRLtiY\nbYQL0RnG7f3xUg9TEjliiDkkLDlCjSrDkqBlV20pAeKJQ4gglgNrDItwh+Zb\nW3hu8QnN/qa6c10bKiEoPlXv5h1PjQAqFAUE9I9LP/HKVEo6+KsKOS7fkyCB\nW+WyG1rXOMj9viXHPFMeEl0/BHakzc1g/soJ7O2Z5r5EPqWEDrkO/NYOmOdb\nfWysR9VQLp+5uNAbblxn6QAalsn5jMkSnpCdb4S+WanMXHNudheZZ8oSD4qs\nBZqmg0Kaq5oD4s/PU+XS0WyILsvIb5J+7q3WAMLjdmPNo5AgU1en5zGERd1V\nADnuyOa/WxugbgrlbLz/A08BCCgAvc4ludi1Q+JBy1JAkIBkz4bkPgyFB17z\niFu9\r\n=BMsP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","readme":"# Storybook Addon Knobs\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```\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","gitHead":"59f984a44ec57b4789fdcd40d42c3b3b02050b60","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"start-storybook -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","prerelease":"node check-metadata.js","build-storybook":"build-storybook"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"7.7.6","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"15.14.0","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^10.3.0","chalk":"^2.4.2","react":"^17.0.1","rimraf":"^3.0.2","react-dom":"^17.0.1","@babel/cli":"^7.12.1","typescript":"^3.9.7","@babel/core":"^7.12.3","babel-loader":"^8.1.0","concurrently":"^5.3.0","@types/lodash":"^4.14.168","@storybook/react":"^6.1.14","@babel/preset-env":"^7.12.1","@types/escape-html":"^1.0.1","@types/webpack-env":"^1.16.0","@babel/preset-react":"^7.12.5","@types/react-select":"^3.1.2","@babel/preset-typescript":"^7.13.0","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","@storybook/api":"^6.1.14","@storybook/addons":"^6.1.14","@storybook/theming":"^6.1.14","@storybook/components":"^6.1.14","@storybook/core-events":"^6.1.14"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0-next.2_1622089673893_0.24392494586542957","host":"s3://npm-registry-packages"}},"6.3.0":{"name":"@storybook/addon-knobs","version":"6.3.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.0","maintainers":[{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"f289c072729651150a27a163371df20922c24f93","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.0.tgz","fileCount":72,"integrity":"sha512-wsZZ1t38KHdaxzrc9oPyiIJDihJnjHRRabrENQbylktJwETEjb2z3eX0iBRJGiz/YCHO+tGd0ItyZArOdijT6g==","signatures":[{"sig":"MEUCIBw09aco54y9g6vSOZT5zrHg6u2/R/hCzNrAMNaPhrSVAiEA314dhnnPHhIUOZiPmSqShb9vc6OA2B+PEJWszDrB2To=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0wpmCRA9TVsSAnZWagAAYiUP/ifYNV0d7khKkUK5tWvu\nO9aodte+CgOHRGei7adOf9Hz+ZDyTS8BcD92UJ9OX87BZNZbQXHEw/OOODDP\nm/yB3Je0HgEzcgoaNNBM7Lh5ABdpNuY7gpmHLRZZDHC2oDkOYBIsfivZV4/X\n1debDfFRuHHhiDtYPcJlGk91xUh13KUuEUVv+JZ1muqS9nl1QDAZXr57axqd\npDucn/WvQcu+V6f+n8g2OWOwWwYqtrsoaMlv4M6hgm/yYdACGuP9DIaey1ia\nIhXwfpDAx6fy0ej8yL5SV4txh6xEv/6KzheAFiWa3djiKkTt7+iSkfc/5BxR\nfN9gr2oF6xP9jtL+qFX2kFs/xVF5dAthn+sPxlu6NLvVu1LVpVHkRz2HwxeF\ntUcaUNbjkTPFSxxaX3GSutFyWv8ZuTn4cjrSPgCTEmDGmGWkpM3GzjSJ900P\nIf3M+BhvLlWV+y8Egr0Mr/27GN3H6MbQfCeX4M6oLe9ZS7kTdKaMOSlahICr\nZPopcnwUa1CKma17GgYgKYt53N6jszfJRjld9wdj7/UPfUmC/nX7N4aJYan7\nAW+EiE/JlT/vE0zNnYkrREUk1LevTuwCOkcmEgH+belQfwOcaED/EFhLGcuq\n4qUAONrsAUn5Gmt4rPJRUqZ4w6/ajXGdHmlEEYuoUpqI8ZxBzV4O3gt19MnA\nTrmm\r\n=5Q+q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","gitHead":"df711f1a2728600096f98d8b948c2dc5c79d57be","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"start-storybook -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","prerelease":"node check-metadata.js","build-storybook":"build-storybook"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"6.14.12","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"12.22.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^10.3.0","chalk":"^2.4.2","react":"^17.0.1","rimraf":"^3.0.2","react-dom":"^17.0.1","@babel/cli":"^7.12.1","typescript":"^3.9.7","@babel/core":"^7.12.3","babel-loader":"^8.1.0","concurrently":"^5.3.0","@types/lodash":"^4.14.168","@storybook/react":"^6.3.0","@babel/preset-env":"^7.12.1","@types/escape-html":"^1.0.1","@types/webpack-env":"^1.16.0","@babel/preset-react":"^7.12.5","@types/react-select":"^3.1.2","@babel/preset-typescript":"^7.13.0","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","@storybook/api":"^6.3.0","@storybook/addons":"^6.3.0","@storybook/theming":"^6.3.0","@storybook/components":"^6.3.0","@storybook/core-events":"^6.3.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.0_1624443494079_0.22597147987247923","host":"s3://npm-registry-packages"}},"6.3.1-next.0":{"name":"@storybook/addon-knobs","version":"6.3.1-next.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.1-next.0","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"da5171b62ff0621d4bc2e1c37731ec01648adda6","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.1-next.0.tgz","fileCount":76,"integrity":"sha512-Hlq3g9T7Lr4N1MIyuBNOcKcxPuLwTD7F072Sxtf62LBSdEgld7EiBxpN01/gNKdoZnFXCskC10pErPX4PcUbeQ==","signatures":[{"sig":"MEQCIHSBSrJqbZ1PbhaWApgs2YeVpPXhqwzeU2b8j7pWOvhoAiAZ0514hNGX7HHsfG1u6ZQA6eOqLhX4ZAaV2p9DzoYfnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":232133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMmuNCRA9TVsSAnZWagAAxPUP/iXWqolT4V/YkFpe43l8\nyCQX2KqeVTnSukJCpAa+q/H8Y4SKIUQZQwL3qStL2QwPGS5Cab4GnBI9BPJe\nFnWSY7Jo17nnU9dnEzoYizS1QQOHZ/JSlLeaOskkDn3+Bkp20hQ6/zsqx05a\nwEHmqopPaiv8xxhu3WRobuC4bQwtLkT6lG7PTi21RHOimCiZPJ/OO+AwQBYE\n3Zwt3MmytgzgRrYC4CLakd8Fs6LtJZImdw9yrqEQCo9i4/02+gpgLvNRs3bB\n0g/1nAHPQXvSxl9f5cvu645K7P9T6TRPf59Kg8XyojYqbS+mtHrRIOxB64Bn\nVNr8VYCpReF8+GtOrOjIOmY/FxESwHb6mivXM9yJChu2KR7sn7ueYbYXAaTd\nFsDQY8eLilVjYsnsbMEhK7WJa9VUc/zIEUr3h2SfHJPNeX8Y1Zr2szyGPUqj\nMCZRRupnnfnEmFWkDLzAR1teoQ5W0GYVm59vqYbGEHFZgXb7jhXEKnkrVys+\nEDEVaztIDuSu6mx3iHqaHf5mO2OJBc2nXuF3P5oLvH8WkfYmwARS9MXyDr0T\nv9OQ9ouLxh3nEzx4PNnhfEGrf3s9sJiDugJ50os0UvYkCQf/xQU1S9yivp4z\neiDaXV4fJoQ4TpXgNQlDe+Qo6cIQZlgAM9Y7slpIeETUmH4VWzR6qtdqJoMa\nQkIA\r\n=WfZp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","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","gitHead":"761ffbfd7f4df94206f7d7e4044a1a12dc1a3cf7","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"start-storybook -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","prerelease":"node check-metadata.js","build-storybook":"build-storybook"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"6.14.12","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^10.3.0","jest":"^27.0.6","chalk":"^2.4.2","react":"^17.0.1","rimraf":"^3.0.2","react-dom":"^17.0.1","@babel/cli":"^7.12.1","typescript":"^3.9.7","@babel/core":"^7.12.3","babel-loader":"^8.1.0","concurrently":"^5.3.0","@emotion/jest":"^11.3.0","@types/lodash":"^4.14.168","@storybook/react":"^6.3.0","@babel/preset-env":"^7.12.1","@types/escape-html":"^1.0.1","@types/webpack-env":"^1.16.0","@babel/preset-react":"^7.12.5","@types/react-select":"^3.1.2","@testing-library/react":"^12.0.0","@babel/preset-typescript":"^7.13.0","@testing-library/jest-dom":"^5.14.1","@testing-library/user-event":"^13.2.1","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","@storybook/api":"^6.3.0","@storybook/addons":"^6.3.0","@storybook/theming":"^6.3.0","@storybook/components":"^6.3.0","@storybook/core-events":"^6.3.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.1-next.0_1630694285726_0.8952819658205291","host":"s3://npm-registry-packages"}},"6.3.1":{"name":"@storybook/addon-knobs","version":"6.3.1","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.3.1","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"2115c6f0d5759e4fe73d5f25710f4a94ebd6f0db","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.3.1.tgz","fileCount":77,"integrity":"sha512-2GGGnQSPXXUhHHYv4IW6pkyQlCPYXKYiyGzfhV7Zhs95M2Ban08OA6KLmliMptWCt7U9tqTO8dB5u0C2cWmCTw==","signatures":[{"sig":"MEUCIFTo1KexL4srtLhi/21+kSUoYBk8UC5H0aYHy6uKgYR4AiEArii50AjzYcN1YZdvdEtUYOwzhADIUEnZhhMiON9BIdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhM4dcCRA9TVsSAnZWagAAKF0P/1ehI0zRmZNwhSXNw8DZ\nnc149TquU1U7/W6FD+AwBg64PApwlfrAWYjpRs2xAjMHGY4Wo4sM6BjAZX9K\n7Y7SylsMwFpAMMgUWWMDqXdUPwjcxo8B4Km17LzcXC0AOHuG2kDb74K55kw5\nFBjoPh511V9rgU6vixlIz7JNBgotMo6GXUO0reEwT8S0R64TM4V6Izj9OrSE\nm2LnF97pHdunQcskNzQudiPa2kX8JOOl8BEaFiiW2iT5WM66+nkfFdVDMVod\ngJyGIzYEtgUOo8nQPotIq8Y0z/ZK/mVdGRb1R8gdnC/+sGb00n/3X72ujTPd\nIGAscYZj9h7leo0PX3v5vqpt7X/7TICbjV8/F/USMtgghw1i7+LKiZnv6Mmz\nApu1zHujQlyPrJlBLMtTkRmBnI8NeGjWLTRqMytR7emGzpNC+R/e+CuHV5ki\njcBxdec91+txbGylnH9/e3gYzlv70ebSU6Ix6zII6CfcFV/KWYAiUcMbjJCd\nBqbwnd+nqNP3QssNMWPM9HLhxxMogB44qCJ/G19VuRmoMGqxyBYPHMfF3uVG\n+M95ngIgrQrO5nFFVJqSeJmv7nWZPFmZ8Zih9vE/e/eWtDtOmJJGKV7C/vGA\nazQSuiEzLIkm9pfqNGiGytzmAJ88MVXOUTPAC7r6glxUyQojG8GS77SVLDpJ\nsxNk\r\n=+IkA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","gitHead":"e0dd9e8f167432356b4c3f3707e4281644417787","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"start-storybook -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","prerelease":"node check-metadata.js","build-storybook":"build-storybook"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"6.14.12","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"14.16.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^10.3.0","jest":"^27.0.6","chalk":"^2.4.2","react":"^17.0.1","rimraf":"^3.0.2","react-dom":"^17.0.1","@babel/cli":"^7.12.1","typescript":"^3.9.7","@babel/core":"^7.12.3","babel-loader":"^8.1.0","concurrently":"^5.3.0","@emotion/jest":"^11.3.0","@types/lodash":"^4.14.168","@storybook/react":"^6.3.0","@babel/preset-env":"^7.12.1","@types/escape-html":"^1.0.1","@types/webpack-env":"^1.16.0","@babel/preset-react":"^7.12.5","@types/react-select":"^3.1.2","@testing-library/react":"^12.0.0","@babel/preset-typescript":"^7.13.0","@testing-library/jest-dom":"^5.14.1","@testing-library/user-event":"^13.2.1","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","@storybook/api":"^6.3.0","@storybook/addons":"^6.3.0","@storybook/theming":"^6.3.0","@storybook/components":"^6.3.0","@storybook/core-events":"^6.3.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.3.1_1630766940452_0.3678076362087339","host":"s3://npm-registry-packages"}},"6.4.0--canary.41.da84f4d.0":{"name":"@storybook/addon-knobs","version":"6.4.0--canary.41.da84f4d.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.4.0--canary.41.da84f4d.0","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"62441a9ce21918e88631fc5200e484135cd83cca","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.4.0--canary.41.da84f4d.0.tgz","fileCount":70,"integrity":"sha512-EF7eHPnNNk7dV4M/UXMiDzkmYZUfAnbpj59DosgQKzw1SbiUWGzzB8HKL1ZoHmpzgcf/KhzAz/LvZF4weDHGlg==","signatures":[{"sig":"MEUCIF4BHNi6bPfyPUODOaY3vbnKVyerzuC+TDniZYDSDqFRAiEApXNvI9oeQszyYY+K85p2OivzWQuqCkaiXFNrDoPXO98=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJholtnCRA9TVsSAnZWagAAjGkP/AvO2zS64Ay8AmZLg9v4\nCjx+A5NrJ+NiiyzRspQA0uR119dxqCPsNFtEIJqFt+seMRhTCx6SwDtRIiFg\nscdRFI3OOOuzeHTTTIplsorn4YvfNQp/vVhO5j8Vh+dRnZvOV5WaXv4l8lxA\ndIXkZY85DGPs0IdZSbt6aBSIZq9meOzSgVFKcD4RhZ3uROndza5m07DgDSq4\nhc4V4UNgohzR3F57sn5Ob23nrN6yPuttuh3VUN+CywawS7pT6WhsPUq+8u3V\n2P9O9QitLvCRWGt/fKRgVpp+5/tk3lK63Hjm4bLB3ynUM+tz4XrTvGTwo2n6\ne1BTQVAlRgOIfKGVCNP2dpSd2xtdpHOlK7ZuZ2uSfvzQjKqpz+zBzub8PEr8\nP+JSzI/E2UnxWICgYLSDrpTDp0wv8zRWlWicSQNK5tm6dN2r1DREfOrj1307\nUzommzm9wblosqnkhv7ve3JZ4coBy9KTwgHRVxOwi5HbNIjL2wcv/Q2eSlpk\n0zudS/GtTgxutEbm6+o9SaBYLsWskvYBpzce5HqXbJW9wUoK58VQASdBZ6Vi\n3fyVEOVKjbp/lbLeDGrgnI82y8M/WXvwGmMXYK3xH3PtSfL/sjRwUBzWcZXI\n02+BroIEn57GhIi1IT0Nhgabcj8570Hzdunio10BhaW6DwCW5gtyvog/Mlt+\nk2Pn\r\n=Ndwb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","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","gitHead":"da84f4d970100f13b93112bdf9bb4226c02f7909","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"start-storybook -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","prerelease":"node check-metadata.js","build-storybook":"build-storybook"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"6.14.15","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"14.18.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^10.3.0","jest":"^27.0.6","chalk":"^2.4.2","react":"^17.0.1","rimraf":"^3.0.2","react-dom":"^17.0.1","@babel/cli":"^7.12.1","typescript":"^3.9.7","@babel/core":"^7.12.3","babel-loader":"^8.1.0","concurrently":"^5.3.0","@emotion/jest":"^11.3.0","@types/lodash":"^4.14.168","@storybook/react":"^6.4.0","@babel/preset-env":"^7.12.1","@types/escape-html":"^1.0.1","@types/webpack-env":"^1.16.0","@babel/preset-react":"^7.12.5","@types/react-select":"^3.1.2","@testing-library/react":"^12.0.0","@babel/preset-typescript":"^7.13.0","@testing-library/jest-dom":"^5.14.1","@testing-library/user-event":"^13.2.1","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","@storybook/api":"^6.4.0","@storybook/addons":"^6.4.0","@storybook/theming":"^6.4.0","@storybook/components":"^6.4.0","@storybook/core-events":"^6.4.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.4.0--canary.41.da84f4d.0_1638030182878_0.31294821991946464","host":"s3://npm-registry-packages"}},"6.4.0-next.0":{"name":"@storybook/addon-knobs","version":"6.4.0-next.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.4.0-next.0","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"7c0d838cfcf74b224750abf0bd3fc5ee76b4d3a3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.4.0-next.0.tgz","fileCount":70,"integrity":"sha512-ITeloqRXpRC1RfKOWP3vgIuA+JDjaFisAwg+fOpd29C4QtILX17Vieu5QjS9O3PzleV1YqkBlx8g+H8i6s7t1g==","signatures":[{"sig":"MEUCIQC8kkiJR5T8W/fxb13sWR3QxvPmSieLwLgw5T14assQWwIgO5x1JQ78H3/LNY7u5WW8wyKeeCzz63OEG74Cd+7gWCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJholxYCRA9TVsSAnZWagAAFjAP/RVmAEKSjFeqbdlHewVf\ngkvqvtBi80m+kUlYbLBJfP393QmvZ6YxsumxdvsDXjyaGLxrqEWxrU/ZZlsG\nDfFolPFGPuF0UUoRy5JYVlHlHxnz4SrJoDmcGEzD/zKYIttMi/loDuh2e6bU\noQN4yXNuvr5PrAGGQ/dE3T+xaB5uzQ8Y3Q9nZz+lyuwZBGmqTU6e9VEmAMBm\n3DZkKL5XsuzDcJP1PXLg/tLBhXr8E8iE0v2eJ5FUw+xsQar891YRk1KFNpb8\ndqSAFJlYeuUk0i+yZiPTyT1JO8rm9MGkKT+8QkWUEZFyE3uTyobHZVPintzi\no2uF6RsJClqWo+wl8q8935INh8Ai6eybZSUfKTQcBs3GVA4eoVJjpvdOlVUT\nwO0wtdd/rIxgyM4LeuYD7h29G4qFLvDeujbiqzDwVzlpCrmF/mJr1sgualt9\nc3LQ+fY8TAS74ot6/lCmjkT3ffIZUGRT7P4LCykSnQ9BraiqWg3ZmfccYeYi\n/EHPwUHv6DcfP001+w/nFfowuw8lrG2QyQ7r0AUFALQfVcIaVxDAdepnqAJz\ngqEdeVTKiidKRNs0WaYj54CttaAvFF+vA5/7+o4F/kgVkfIB8f/wwFF+O6W1\nM6zE2/HS31854ma0ACGXBkOnaRNatoyR3gjFC8oY91f1yMNgYNKIBuEEI5U7\nvBxK\r\n=/1iV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","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","gitHead":"68a9c410be21a0ece7311dfffe99be242446e962","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"start-storybook -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","prerelease":"node check-metadata.js","build-storybook":"build-storybook"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"6.14.15","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"14.18.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^10.3.0","jest":"^27.0.6","chalk":"^2.4.2","react":"^17.0.1","rimraf":"^3.0.2","react-dom":"^17.0.1","@babel/cli":"^7.12.1","typescript":"^3.9.7","@babel/core":"^7.12.3","babel-loader":"^8.1.0","concurrently":"^5.3.0","@emotion/jest":"^11.3.0","@types/lodash":"^4.14.168","@storybook/react":"^6.4.0","@babel/preset-env":"^7.12.1","@types/escape-html":"^1.0.1","@types/webpack-env":"^1.16.0","@babel/preset-react":"^7.12.5","@types/react-select":"^3.1.2","@testing-library/react":"^12.0.0","@babel/preset-typescript":"^7.13.0","@testing-library/jest-dom":"^5.14.1","@testing-library/user-event":"^13.2.1","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","@storybook/api":"^6.4.0","@storybook/addons":"^6.4.0","@storybook/theming":"^6.4.0","@storybook/components":"^6.4.0","@storybook/core-events":"^6.4.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.4.0-next.0_1638030424367_0.6399478547188582","host":"s3://npm-registry-packages"}},"6.4.0":{"name":"@storybook/addon-knobs","version":"6.4.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.4.0","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"fa5943ef21826cdc2e20ded74edfdf5a6dc71dcf","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.4.0.tgz","fileCount":71,"integrity":"sha512-DiH1/5e2AFHoHrncl1qLu18ZHPHzRMMPvOLFz8AWvvmc+VCqTdIaE+tdxKr3e8rYylKllibgvDOzrLjfTNjF+Q==","signatures":[{"sig":"MEQCICxSt5fUcm3bXaxL9ibSx7yqEz6roysxWu8ob+mdnSz7AiA6nGQjI21Jf0fIL33riWJ73fq2GPK0YEXaz/TJkWwYuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":215841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhol4fCRA9TVsSAnZWagAAU+cP/00CFZ497FydmAN0l7C8\nWgZ7nWKmeccZvgTmamjEC2jT7bZVm30isI9aAwl2zvIyZFRMbyAheYtl0amT\niJHKyEaik/DoH1GCJ5P5QXeUjjhKj9WJMO5sTWkp9HM3JTsz7eIKJm/YUj96\npaEO7xct+sPhnQ+MGx12vzT9rO4CXLVh+h4ZchMhiPXV3cJgJeymD/AGXajM\nnd7FMxwKTkiGsX613qxJ4vJtwqVw827XeGOnHKHApjMWrRAfkeiQbtKXkKgp\nhOeE258QNGt+0LHrGR7XA0w3LAoP08VwApI4IRFdT594+7m546jqEMqdqVDo\neQuOULkzhCy/9ym+qLuxm1fpNKvEDzoZ907Io17xoOoTe4g+56+PAH0tKBCr\nB2StNbBLec16hST1Kuq2KQY0K7DqUySdnCTtu4Q7m5SGQ0EuifLwz8fWB8/Z\nfyBGm2iLd/3pqTR8qyzCAC8OgAHBMUGqX08EAwY2ba3TWTALnBg3JXCauoha\nO2y7INz69+3yzSeSiMlpa1VEUBuiZAlw9e67ZaZ3gm04+YB8HEJ6uC0VOPgL\no0RerobHqzFB1b34NiiXv9I9qBBgb9SMtPz8rXHDE5E84y7WP1KQgwTLSFcq\nOV5aB3hBJsnHgxFzafZ+h5lUzmFELaZxTN/xj9bI+X3t0VGnrFFF0B8N+x4e\ntMde\r\n=wQIf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","gitHead":"d70657cf98030fbafdf6e2574668100bc3612912","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"start-storybook -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","prerelease":"node check-metadata.js","build-storybook":"build-storybook"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"deprecated":"deprecating @storybook/addon-knobs in favor of @storybook/addon-controls","repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"6.14.15","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"14.18.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^10.3.0","jest":"^27.0.6","chalk":"^2.4.2","react":"^17.0.1","rimraf":"^3.0.2","react-dom":"^17.0.1","@babel/cli":"^7.12.1","typescript":"^3.9.7","@babel/core":"^7.12.3","babel-loader":"^8.1.0","concurrently":"^5.3.0","@emotion/jest":"^11.3.0","@types/lodash":"^4.14.168","@storybook/react":"^6.4.0","@babel/preset-env":"^7.12.1","@types/escape-html":"^1.0.1","@types/webpack-env":"^1.16.0","@babel/preset-react":"^7.12.5","@types/react-select":"^3.1.2","@testing-library/react":"^12.0.0","@babel/preset-typescript":"^7.13.0","@testing-library/jest-dom":"^5.14.1","@testing-library/user-event":"^13.2.1","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","@storybook/api":"^6.4.0","@storybook/addons":"^6.4.0","@storybook/theming":"^6.4.0","@storybook/components":"^6.4.0","@storybook/core-events":"^6.4.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.4.0_1638030879660_0.33535428205586393","host":"s3://npm-registry-packages"}},"6.4.1--canary.39adcfc.0":{"name":"@storybook/addon-knobs","version":"6.4.1--canary.39adcfc.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.4.1--canary.39adcfc.0","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"b1bd2bd10bee133a8298dbbe51271e10c9d5bf48","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.4.1--canary.39adcfc.0.tgz","fileCount":70,"integrity":"sha512-LPM7e+1cDtdWSzyU7v5arML+wt+HigkPSArm6lW5skfXNGOxn6lX0ClbwxzhEhAOkpFMMPEm4wdLf/AIpzVePQ==","signatures":[{"sig":"MEUCIQC71qd14h7enWCFkY2YwvoDr+C2Z5cdIuVMse+YyuBVIAIgBykoPtqcFM1+dzOixVLgDCaMTWYR6jZLr6Lj1cMePGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":213956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKIYjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLrQ//f5kMPVHZTFQHlQpTq+o3hbuqOELhTtKWP6ipgDmSrI18ZWpd\r\nBaiNuKU/qwvG7R3EqkaOtFeplIan6XdNTFbemQlpREGU3uOxDchKvAV0iXRm\r\nrL9/PJX8+E92AZzv9Kxqwm5dVGelp5QQbPSOL1d33DcNtJBfK2I7HEVxvLlC\r\ngj+YYhF5lLCqeDh1EoZXk0E6c1WR4g8qvB6hMA8EiZhYFCT/CykMbsKRIW/3\r\n/Pd5R3hv4ef8Q2EqTWWKPpqO8bKVN74QN8GS3HyVXPX7Jxkd6fmaJprmtUQK\r\nWFPiqsUYgyZcEtRsshndgImSU93eKrurqfTHj7N3CKc5DAONQbrZxtIzqki7\r\nH1x+J1yL3+nCzViN8sqD8stQHMXDA3qZsYp2zGRTyi9BxogcKTdam8dJyUVI\r\nKdUWlbeYEFXJCbfYNTJ5OAFvNsRHU0RYt/CH9sbMjU2L2MVZBaP08bYWA/Te\r\nTIejLSJh9RbtWb8KSFdl88oEfIuHHY8GmM/KLVBfaNz49R+HKDnvQhEV64vy\r\nNadMjsGB7Skl6Q/R1qyzm6AuJRjL3scNO/R+ctLI7VToW350hRrOghsxXuqP\r\n+bQrrnjOu411fjkkQ80CfOWgXOLHqLiClpW79XumLC2kgQ4VJlT6na8mDWA4\r\nJ/nJmVq6hNNppULqgPx03bP0Yn0JhBBD+b0=\r\n=Jej3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","types":"./dist/index.d.ts","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://storybook.js.org/docs/react/api/frameworks-feature-support).\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","gitHead":"39adcfcc794398534806dd2b26b4551da237c693","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"start-storybook -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","prerelease":"node check-metadata.js","build-storybook":"build-storybook"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"8.19.3","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"16.19.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^10.3.0","jest":"^27.0.6","chalk":"^2.4.2","react":"^17.0.1","rimraf":"^3.0.2","react-dom":"^17.0.1","@babel/cli":"^7.12.1","typescript":"^3.9.7","@babel/core":"^7.12.3","babel-loader":"^8.1.0","concurrently":"^5.3.0","@emotion/jest":"^11.3.0","@types/lodash":"^4.14.168","@storybook/react":"^6.4.0","@babel/preset-env":"^7.12.1","@types/escape-html":"^1.0.1","@types/webpack-env":"^1.16.0","@babel/preset-react":"^7.12.5","@types/react-select":"^3.1.2","@testing-library/react":"^12.0.0","@babel/preset-typescript":"^7.13.0","@testing-library/jest-dom":"^5.14.1","@testing-library/user-event":"^13.2.1","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","@storybook/api":"^6.4.0","@storybook/addons":"^6.4.0","@storybook/theming":"^6.4.0","@storybook/components":"^6.4.0","@storybook/core-events":"^6.4.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.4.1--canary.39adcfc.0_1680377378834_0.9077052657465325","host":"s3://npm-registry-packages"}},"6.4.1--canary.0f1cfd9.0":{"name":"@storybook/addon-knobs","version":"6.4.1--canary.0f1cfd9.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.4.1--canary.0f1cfd9.0","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"fab522c4717b3a6512d3db4d4ab4f648a5d6ad81","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.4.1--canary.0f1cfd9.0.tgz","fileCount":70,"integrity":"sha512-UcibTTQCjC09UoI9iTprgAr6ScvNkzu3Eu5nn8KI0XV1J+7jCatD2Rau2EhS/4a9AVdYZVHNIeZHKEK8twAniw==","signatures":[{"sig":"MEYCIQDRrjsANxLPv+WsG4AgNp/F/u5ah+bAd2iGO/NCDmj4jwIhAN/NYcfutgxCrM1tZVqlPW31wPNtmDOMB3AqothIhdJ7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKIYtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNJg/+LB4qhSScW7lPgYAFYQE1VGy6jdOsU3PAW/QaUvtjb0hFJ/OT\r\nA3ZWitWz0tS4CiD9kIkfugUAwUw2gU4HBjL8bRgASbv51x936eto81OIR5Rs\r\n4QK0to2rsTc0/sls2M9MrASs7yEq1GbOjAfK4GHOTMU9Ghcio5SgY2IQA0R4\r\nWoplnmDYaDO8R1aANCv/HbekZ+BDLMrCwSg/iJuUMmYuCcHdDwqqRpwPR95x\r\n92eiezJycozSxuJtKDGSW4TgL/V0rMbrfzNyBGt44whaCyiq1kwJBeVE4vag\r\nfcS1aWr/cR42TaAnzD7oRHsrsEeDAxWYrQlCz5F58egeKdMmHUwp1/s32QFs\r\nylV7zGLGfsh+49uYD7xSYEwF1oLSOrm16mQF2rhZ1QdWGr/Yik0I2MZQCU3t\r\n0uF3CNEdPep9Ii3cx9AcLcK8U/AniRkocs7Bj9f3dweZxgyGxmDUVfFn113B\r\n5L2QGpR/36qfw7aktukVsg3zWL5pcFjjVysLw8221YqgvuxaxBFQA8oYYCVE\r\ngmlAtOPKP3KyJVl1bkqJaIGJw3vbF3KlwRE3U4B1xzDAG7/BSCLe8i6C1XnW\r\nIjZf7VsLq2a5PFiNCI1JJFfvTmSfoJBuEmD4DmxtBCvet4aMI+PkL4C9A+nL\r\nSdoPZFOT02yKbq8V3ek9rjMkQ2n3xSQIfL4=\r\n=fDk1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","types":"./dist/index.d.ts","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://storybook.js.org/docs/react/api/frameworks-feature-support).\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\nThe latest version of this addon supports Storybook v7. If you're using a previous version of Storybook you need to install the matching version of this addon, eg `@storybook/addon-knobs@6.4.0`.\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","gitHead":"0f1cfd9bc60fb5d91ab09e4bee98994a92cdf186","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"start-storybook -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","prerelease":"node check-metadata.js","build-storybook":"build-storybook"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"8.19.3","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"16.19.1","dependencies":{"qs":"^6.10.0","global":"^4.4.0","lodash":"^4.17.20","core-js":"^3.8.2","prop-types":"^15.7.2","escape-html":"^1.0.3","react-select":"^3.2.0","react-colorful":"^5.1.2","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.1","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^10.3.0","jest":"^27.0.6","chalk":"^2.4.2","react":"^17.0.1","rimraf":"^3.0.2","react-dom":"^17.0.1","@babel/cli":"^7.12.1","typescript":"^3.9.7","@babel/core":"^7.12.3","babel-loader":"^8.1.0","concurrently":"^5.3.0","@emotion/jest":"^11.3.0","@types/lodash":"^4.14.168","@storybook/react":"^6.4.0","@babel/preset-env":"^7.12.1","@types/escape-html":"^1.0.1","@types/webpack-env":"^1.16.0","@babel/preset-react":"^7.12.5","@types/react-select":"^3.1.2","@testing-library/react":"^12.0.0","@babel/preset-typescript":"^7.13.0","@testing-library/jest-dom":"^5.14.1","@testing-library/user-event":"^13.2.1","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","@storybook/api":"^6.4.0","@storybook/addons":"^6.4.0","@storybook/theming":"^6.4.0","@storybook/components":"^6.4.0","@storybook/core-events":"^6.4.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.4.1--canary.0f1cfd9.0_1680377388939_0.4785498585911385","host":"s3://npm-registry-packages"}},"6.4.1--canary.f87792d.0":{"name":"@storybook/addon-knobs","version":"6.4.1--canary.f87792d.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@6.4.1--canary.f87792d.0","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"7935bddabab2d3c14b92e6582d6bd9a2a6a7fb9d","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.4.1--canary.f87792d.0.tgz","fileCount":69,"integrity":"sha512-25vid6HKo9ZqjOiaUaqnlezSkfR62mgiUuX7GZ6AnrWDNkN2noIFjJPbp2jEtZYC8QecJ9nhi9gE3Yzqgp6E0w==","signatures":[{"sig":"MEQCIEMYl1upoVOGV7iP8yTUwgksLbwYUmk6HbUynyEQNtfoAiBVrt+m+lcIHL++od5U3hLXjP3F4lw1SnNqhGFstABDtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKIhdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZDA//eDvc9nsfjRgm6EYnFeClMnGljJfFWqveUNmW6CWe1lwzm+BY\r\njGFCPBdl9zbmdnVrD3eL2oyga4TqJnlaevtr+qkoYUYsggiqIgeF4oihWnkc\r\nGfGUb30o+Oqpzcbf5UmH2zh4Ry+inGYGWpDCNNTntElH8nPlXFOh9VeSFaql\r\nFf4EoLr4MTjgqUmUh0tv6N0Kpv5Mp7YwxnrejpFLQ0OwFh0vawNGyD6AKP2z\r\n46ACqNJSYN3x1y67gMEwBXeh4EhDeTwV3FYpe3v8ahv/CTKicWdWM/igMfOf\r\n6BmHoKOWZlsEKkKyShucw5Qs5vZmWRg13Pz48kiVVMANTfHmdegSyVCNzXhQ\r\nXRD2lz4eNxss38jM3tMxKwpVZYJ3+BoOzjmFKU4tKOGkltr/F9msjiUAPj41\r\nwM3H3fdueEUvYkJUrs53JBwajOgur6qFqxqv0ywMBWS2aQqoCwEcxyI6PSw9\r\nCwxn7J5Ukx7OgM/KpO4DVfN5XY/R7Y0aPsfoGUC4zTelB39YUjTDr8WKcKnT\r\nJkdqn4SUsV5xt3LclUFDqlcxxS/GxOWRCH4qmP3R6jayCdd/GLQ2OqDDawmh\r\nWZ+qPmnEmlRUCzx+h7QDDGwV+4bsWA38vyZI7r9Jrt0HO4XSzmOHsf/v+9BZ\r\nTBdC45P7TNuTrKA8zwDbSfENZ9i7jIOzLOA=\r\n=hWw3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","types":"./dist/index.d.ts","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://storybook.js.org/docs/react/api/frameworks-feature-support).\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\nThe latest version of this addon supports Storybook v7. If you're using a previous version of Storybook you need to install the matching version of this addon, eg `@storybook/addon-knobs@6.4.0`.\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","gitHead":"f87792d010441160ab165a929ceec4fa60729ea0","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"storybook dev -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","build-storybook":"storybook build"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"8.19.3","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"16.19.1","dependencies":{"qs":"^6.11.1","global":"^4.4.0","lodash":"^4.17.21","core-js":"^3.29.0","prop-types":"^15.8.1","escape-html":"^1.0.3","react-select":"^5.7.0","react-colorful":"^5.6.1","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^10.43.0","jest":"^29.5.0","chalk":"^5.2.0","react":"^18.2.0","rimraf":"^4.4.0","react-dom":"^18.2.0","storybook":"^7.0.0","@babel/cli":"^7.21.0","typescript":"^4.9.5","@babel/core":"^7.21.0","@types/node":"^18.15.11","concurrently":"^7.6.0","@emotion/jest":"^11.10.5","@types/lodash":"^4.14.191","@storybook/react":"^7.0.0","@babel/preset-env":"^7.20.2","@types/escape-html":"^1.0.2","@types/webpack-env":"^1.18.0","@babel/preset-react":"^7.18.6","@types/react-select":"^3.1.2","@testing-library/dom":"^9.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@babel/preset-typescript":"^7.21.0","@storybook/react-webpack5":"^7.0.0","@testing-library/jest-dom":"^5.16.5","@testing-library/user-event":"^14.4.3","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","@storybook/api":"7.0.0","@storybook/addons":"7.0.0","@storybook/theming":"7.0.0","@storybook/components":"7.0.0","@storybook/core-events":"7.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_6.4.1--canary.f87792d.0_1680377949269_0.6621101690485613","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@storybook/addon-knobs","version":"7.0.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@7.0.0","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"a5678ef95d267e446729e3ea8ea783715eda764f","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-7.0.0.tgz","fileCount":69,"integrity":"sha512-HLmRBYi9hE6260RwQ563/aSYjcPICZhqu1ad6U5dVFfnlKtvbXD39obw70uUTUISSmR3sp0ncUGVw9sIV8m5ag==","signatures":[{"sig":"MEYCIQDlF0EGeuBIaLNb7Y/CUubgAOp1fwFfN2iQChKNA6zklAIhAOgXuTCou0TWJl9QJ7DgFegvjvLIapxrWZmVywmHXErM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKIriACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/QQ/9FFB5CON3reuASTD3whUSToSHPCIcy5DLazleTeZXQUxsoDPl\r\npiVwpSmoKzUU0MFQ1iAQH6lZeBk+1zIAE+bPwujx+QuMWTFQlS9MejFOE4r0\r\nGwp65GU/jwErgg3NKWifF5qd/uF9v6aJrMFQnhx9/68LC6wvgsBMd0M81Dpp\r\nr1sLwliuC08ZaqpZgJlmwFCSm8bmVMv7faF/CLd8YT/sn+YKOsyGuDVNVSqb\r\nl8AIWGZmb1SdcSW8Hya6SKpsOHJNokRF+dxM2qW8qA69DIgdlROy8dGaoxfy\r\nARsNtq/LRuEZn0xdZPKCGOzB3CHFiAdwhIzKKR+a+JVeAPvhZINidzUCi1k4\r\nZVQN33bZ5yJZ+Bbx4mrll90VqkCorUKs7kwEC7FtvmT7N/rk32XqbbUgGduX\r\ncmIANo7YysbJSvHYenxndElQw70lcjfzU2YKyc52MD5MDisPo37ygmDI31C8\r\nPbP4eDT6nKDhrN+w3/ExSonDHIlVGGrPBhctS1oC1w4Rjda2Glozfe0iwFuG\r\nCMAohsDBqnI9LcVRC7eFHy5muN1vAQlMRgTMMejw59dl0xPjIbzt8nepdpTl\r\nR6CCI3XFjWJqr0+y2rLL7XlvgtjpLO4rvMUmP+ucu8EGxxLeqRbZzuZVkaMb\r\nqfQGli2878/x75uj/uF8eUWmpMT5+KBvew0=\r\n=2Wgk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","types":"./dist/index.d.ts","gitHead":"4774db3e4526b575a704e4bb7e0e53af8da7925a","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"storybook dev -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","build-storybook":"storybook build"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"8.19.3","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"16.19.1","dependencies":{"qs":"^6.11.1","global":"^4.4.0","lodash":"^4.17.21","core-js":"^3.29.0","prop-types":"^15.8.1","escape-html":"^1.0.3","react-select":"^5.7.0","react-colorful":"^5.6.1","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^10.43.0","jest":"^29.5.0","chalk":"^5.2.0","react":"^18.2.0","rimraf":"^4.4.0","react-dom":"^18.2.0","storybook":"^7.0.0","@babel/cli":"^7.21.0","typescript":"^4.9.5","@babel/core":"^7.21.0","@types/node":"^18.15.11","concurrently":"^7.6.0","@emotion/jest":"^11.10.5","@types/lodash":"^4.14.191","@storybook/react":"^7.0.0","@babel/preset-env":"^7.20.2","@types/escape-html":"^1.0.2","@types/webpack-env":"^1.18.0","@babel/preset-react":"^7.18.6","@types/react-select":"^3.1.2","@testing-library/dom":"^9.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@babel/preset-typescript":"^7.21.0","@storybook/react-webpack5":"^7.0.0","@testing-library/jest-dom":"^5.16.5","@testing-library/user-event":"^14.4.3","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","@storybook/api":"7.0.0","@storybook/addons":"7.0.0","@storybook/theming":"7.0.0","@storybook/components":"7.0.0","@storybook/core-events":"7.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_7.0.0_1680378594424_0.6477834195238146","host":"s3://npm-registry-packages"}},"7.0.1":{"name":"@storybook/addon-knobs","version":"7.0.1","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@7.0.1","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"abb52956e7fcb35525be6e846a13b9ac21f95325","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-7.0.1.tgz","fileCount":69,"integrity":"sha512-JYDwMkRogM77zT0JOGLrni/4gp+hOUSMaZ17MK763peQk4FyMzbkTIh69HtR7HI0xZP2QUwKY5KWXVesQt02uQ==","signatures":[{"sig":"MEQCIGH9gG9QLtLV1Qn8WdWjfhmhip28eWy11Akb0Yn6BDGvAiA8r37WtbNrXZ5HvPXyrWlsJilrXFY3IRRWT4uGReGTeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSkHaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwixAAl7Cpii3nGNLfqOAP+2SPMAFHg1YnBwJ9bJaodk2nlU+u+2N1\r\nQhnCNZGhlZlFSPwPwbvF+ZUerpYwEGxA9LNTzUSpsWsOO+BJyoZEL+KqeLFD\r\ndrzsziQ1kI2NpG1rL2IRjaR8UifDls/4E8a5fIJuGJSLITdO8/M6izHIZEBC\r\nugo6BnH8YX2EWEhUoVkgXQGX8bCRY03e6lXfWXHQAMLqVvPzptpEbTHghw4m\r\nKjmtiJN9uqbyl22xge8be3KiQuc64Zr9xpNHga70L1qGraCwPmL9WXRyYvOr\r\nuF4MCBSz5RAfBw+LFWY2ZQZ6bK376AdkbJqCllaGoXIAae9mXjnC9yRF9hxA\r\nY4Ge5j3zXFd9fRRWCWIGocWqLgl3m4bNhvug/8DTyDL7+GJ6G+Z7Ofii8Vhi\r\n6UAYVLKEWa8pkkRKkxs2UicSM53VTC0V5jEtSUkf20n9ODiavaPwnzOIyRU1\r\na2bRUcuyyFdbmWD2HZ/ggdIgw1TVXc9SrGKWOnSJ72ISUX/b734LRftO6BhM\r\nAC9UPIpcPj04PSv/ksXm3CLE4yt4SAdQfxKQS7J+fX4anyujLGpDCecNCzPc\r\nV+SSf3bkyl2ZmJEBtNWCrCMKUdjPwVZTobWEpdDfPyAfse20NgQjgu5Rt3Bs\r\nwf8rb793G6aPXop8s7+0Dt3n1gseYDSajcA=\r\n=NnAT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","types":"./dist/index.d.ts","gitHead":"11d65f96bf1f269336592d7f9c98c4f28530a8cc","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"storybook dev -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","build-storybook":"storybook build"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"8.19.4","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"16.20.0","dependencies":{"qs":"^6.11.1","global":"^4.4.0","lodash":"^4.17.21","core-js":"^3.29.0","prop-types":"^15.8.1","escape-html":"^1.0.3","react-select":"^5.7.0","react-colorful":"^5.6.1","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^10.43.0","jest":"^29.5.0","chalk":"^5.2.0","react":"^18.2.0","rimraf":"^4.4.0","react-dom":"^18.2.0","storybook":"^7.0.0","@babel/cli":"^7.21.0","typescript":"^4.9.5","@babel/core":"^7.21.0","@types/node":"^18.15.11","concurrently":"^7.6.0","@emotion/jest":"^11.10.5","@types/lodash":"^4.14.191","@storybook/react":"^7.0.0","@babel/preset-env":"^7.20.2","@types/escape-html":"^1.0.2","@types/webpack-env":"^1.18.0","@babel/preset-react":"^7.18.6","@types/react-select":"^3.1.2","@testing-library/dom":"^9.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@babel/preset-typescript":"^7.21.0","@storybook/react-webpack5":"^7.0.0","@testing-library/jest-dom":"^5.16.5","@testing-library/user-event":"^14.4.3","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","@storybook/api":"^7.0.0","@storybook/addons":"^7.0.0","@storybook/theming":"^7.0.0","@storybook/components":"^7.0.0","@storybook/core-events":"^7.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_7.0.1_1682588122583_0.4784159510768733","host":"s3://npm-registry-packages"}},"7.0.2-next.0":{"name":"@storybook/addon-knobs","version":"7.0.2-next.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@7.0.2-next.0","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"58a96917544178e2d77dd71f67c120e6a4f9eb85","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-7.0.2-next.0.tgz","fileCount":69,"integrity":"sha512-AGtZ1JxaJZ4bA6su4gokoy+wo68rrfTk+lWowXfoRrTHx/7Tj5ivx2SzjSfzrGLNxWFe1iHozcYeFta1jNBddg==","signatures":[{"sig":"MEUCIAegFAxi0IZwvjJPrkJ0y210Di7VdX0VIEIhoHiAoqIEAiEAsugmh8fzWU3niA5UQShej2WKDOW4qOqnwP+OLGwYXvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSkKaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQMg/7BvaizvT+t8QO5Pi+LWLv01lzLBvQFBc10kuK2OVy5EL+K1Eq\r\nSaWfdr42/DXitvlZjqHOgfplMnKl6dyUaSSQNaXFhzZH/Dfv3UszqaSsPFGa\r\nNQ6EjC2yn3GDxvavOZwB/o/u0sa4+7b25TDtVl1Egz8L/4YjoW+7Skjt050j\r\nUZDESV+83gH9fMouMUfb4yiEjBu1hqSWddN7dEpVdUGr0twTL6VTSu/UPB9g\r\njj+wQCyEJiYaWIe1ViTISykwiqQNS+zMCbl65L32YDDnFXlJG0fpzzjxL544\r\n1yf7h/F0ZNfuDcAU8PPBHPL2+lCSfZGCmfQ04BYwHnNXpl0WLaxuIYQKFY8G\r\nSLlZaIC49emC6yBniDjE3u893MhoI7sODRtmOKs2eGci6+BTib4lB9YbMLnx\r\nCk9sd4mokZOEYKbpxGXB0jJF4OhcjpTZF6sKUcW2bGgN9dmJgS3fdKGfHpeL\r\nGHk0eFoY6SUMyitLPZy5HFlxNqt+ZOw6fGYt78VtEZI+ANQzhFEwc7h98afj\r\n8mLuTGRXrx3xy2poXugn0ZHzTVqs44xGnD++3txwIWiT2g8HcdKc/JNFq1+x\r\n2rYY57NNmljy5GxOU7eK7wxncVL5F31kKAFqrlZyE3i32rhaoXSaajCsP/7k\r\nmv8jjWew6kKBXpUla75D8hDYAgYTl9FP+ZA=\r\n=el8d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","types":"./dist/index.d.ts","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://storybook.js.org/docs/react/api/frameworks-feature-support).\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\nThe latest version of this addon supports Storybook v7. If you're using a previous version of Storybook you need to install the matching version of this addon, eg `@storybook/addon-knobs@6.4.0`.\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","gitHead":"703e5fa376f60a43cb4d09be3c533a4cef0792a9","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"storybook dev -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","build-storybook":"storybook build"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"8.19.4","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"16.20.0","dependencies":{"qs":"^6.11.1","global":"^4.4.0","lodash":"^4.17.21","core-js":"^3.29.0","prop-types":"^15.8.1","escape-html":"^1.0.3","react-select":"^5.7.0","react-colorful":"^5.6.1","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^10.43.0","jest":"^29.5.0","chalk":"^5.2.0","react":"^18.2.0","rimraf":"^4.4.0","react-dom":"^18.2.0","storybook":"^7.0.0","@babel/cli":"^7.21.0","typescript":"^4.9.5","@babel/core":"^7.21.0","@types/node":"^18.15.11","concurrently":"^7.6.0","@emotion/jest":"^11.10.5","@types/lodash":"^4.14.191","@storybook/react":"^7.0.0","@babel/preset-env":"^7.20.2","@types/escape-html":"^1.0.2","@types/webpack-env":"^1.18.0","@babel/preset-react":"^7.18.6","@types/react-select":"^3.1.2","@testing-library/dom":"^9.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@babel/preset-typescript":"^7.21.0","@storybook/react-webpack5":"^7.0.0","@testing-library/jest-dom":"^5.16.5","@testing-library/user-event":"^14.4.3","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","@storybook/api":"^7.0.0","@storybook/addons":"^7.0.0","@storybook/theming":"^7.0.0","@storybook/components":"^7.0.0","@storybook/core-events":"^7.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_7.0.2-next.0_1682588314463_0.3031931498650997","host":"s3://npm-registry-packages"}},"7.0.2":{"name":"@storybook/addon-knobs","version":"7.0.2","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@7.0.2","maintainers":[{"name":"shilman","email":"michael@lab80.co"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"igor-dv","email":"davydkin.igor@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"f28fd180d8a283df6eb67f8f2578f1563b7b7615","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-7.0.2.tgz","fileCount":69,"integrity":"sha512-PzKuscxcBPhA2jpDxJ/F+BvBRqHJ8qBki1kS1IOjmJbAfE96WFnweXZ73ImyAJnRtmtReCL6p0ZmFkrNDMDpUw==","signatures":[{"sig":"MEQCIETH6s3/PJBBT0yRLCgDNZtAswm5dfyZzpZ1ebBojbSkAiBOmwdn8x5uruDfBuWa3tHorK6g5j14ZCBer3PfBnL36w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSkMQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjxg/9HYsSjKNYbnBDyGF/0RUpCTAsHwDVKFBO9GwA4J+dntyS01w3\r\nzseU3NY3vsNZFRgNwtqAP8cALrR8GM7fKHicBVnCyVbKAmXm7K3KPJYFSvQc\r\njIZ5sMUBIDqAfOu1K0y2y343L3PBCQQwCI67zFhRcJpI+Rh3usHv2BqXSG9k\r\n521InUVSkWAGRHH1Uf3xtemR63JV0gHVhPH3qSqep/nXpj1r+m7tI0DFJP0T\r\n7BxyVFLPfa0z1+JYD3Vv/c97Ga/gsrMw4qUKBgX100++i7ghKC6t8a0UF055\r\nAwWf82xRz2ktdH8qN9IDRkTkBBEo/6NRHcGvOIQAmvPN8RRTmrrOWQz5nZd/\r\nbMHmtQy0q8AGyyggcceGnlolFf5n+vD2a7VKPZFI+wf26ZMjs4ozxIraw7uf\r\nKRgBeHXXxYDuL20SqNv7m8DxtDeebo7oheNv7ybbAjpKaKo7UTBdoxg5w/oI\r\nNQAI/6/svkIqaDTNl5MpgxvOtawoDGmLzu0+5mAvfLAye17jF/eF2yxWwn91\r\nAYo3XyDkZWLglpjCtgv6RmHRbxfY8KvoJZTbYjnXlZF0YzW1tCL01Z8XoErA\r\n/d/1jPm+xUdvbTcRSlQF5E/mhbRkhaFrsbP7eEAG/UOYY+jkRpta4wVbgUa4\r\nP7MI4FVDJS5S1xgohSIu47pQYNtjG5eHheY=\r\n=aTlR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","types":"./dist/index.d.ts","gitHead":"e2228f41b8cee56fbd40713cea102696bffa72fe","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"storybook dev -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","build-storybook":"storybook build"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"8.19.4","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"16.20.0","dependencies":{"qs":"^6.11.1","global":"^4.4.0","lodash":"^4.17.21","core-js":"^3.29.0","prop-types":"^15.8.1","escape-html":"^1.0.3","react-select":"^5.7.0","react-colorful":"^5.6.1","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^10.43.0","jest":"^29.5.0","chalk":"^5.2.0","react":"^18.2.0","rimraf":"^4.4.0","react-dom":"^18.2.0","storybook":"^7.0.0","@babel/cli":"^7.21.0","typescript":"^4.9.5","@babel/core":"^7.21.0","@types/node":"^18.15.11","concurrently":"^7.6.0","@emotion/jest":"^11.10.5","@types/lodash":"^4.14.191","@storybook/react":"^7.0.0","@babel/preset-env":"^7.20.2","@types/escape-html":"^1.0.2","@types/webpack-env":"^1.18.0","@babel/preset-react":"^7.18.6","@types/react-select":"^3.1.2","@testing-library/dom":"^9.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@babel/preset-typescript":"^7.21.0","@storybook/react-webpack5":"^7.0.0","@testing-library/jest-dom":"^5.16.5","@testing-library/user-event":"^14.4.3","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","@storybook/api":"^7.0.0","@storybook/addons":"^7.0.0","@storybook/theming":"^7.0.0","@storybook/components":"^7.0.0","@storybook/core-events":"^7.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_7.0.2_1682588432508_0.963060985080259","host":"s3://npm-registry-packages"}},"7.1.0":{"name":"@storybook/addon-knobs","version":"7.1.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@7.1.0","maintainers":[{"name":"domyen","email":"dom@hichroma.com"},{"name":"kasperpeulen","email":"kasperpeulen@gmail.com"},{"name":"valentinpalkovic","email":"dev@valentinpalkovic.dev"},{"name":"jreinhold","email":"jeppe@reinhold.is"},{"name":"kylegach","email":"kyle.gach@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"yannbf","email":"yannbf@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"d696ec4b135323be239b7754f9c6edd9da7a244a","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-7.1.0.tgz","fileCount":69,"integrity":"sha512-DKkWHgRK6bEeqsH8crGCQ8BeY+aJv+ohSpJrfmDf7awQfDpQX8rCvXAqIK/A7aNqQS1xxcxmIlFB9BpU+4jSNw==","signatures":[{"sig":"MEUCIQDy5+ewihWwxl1xrmlbwDoMiJXYyCXw6+xGMmlKGQQfWwIgORRgL/9tC7sgDn4HE2bySXS9hlmjqGKgcKFXb6zqm/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222071},"main":"dist/index","types":"./dist/index.d.ts","gitHead":"fd9eafccbe9200db32cfd966944f439d567f9562","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"storybook dev -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","build-storybook":"storybook build"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"10.5.2","description":"Storybook addon for editing props","directories":{},"resolutions":{"jackspeak":"2.1.1"},"_nodeVersion":"20.13.1","dependencies":{"qs":"^6.11.1","global":"^4.4.0","lodash":"^4.17.21","core-js":"^3.29.0","prop-types":"^15.8.1","escape-html":"^1.0.3","react-select":"^5.7.0","react-colorful":"^5.6.1","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.6","jest":"^29.5.0","chalk":"^5.2.0","react":"^18.2.0","rimraf":"^4.4.0","react-dom":"^18.2.0","storybook":"^8.0.0","@babel/cli":"^7.21.0","typescript":"^4.9.5","@babel/core":"^7.21.0","@types/node":"^20.12.12","concurrently":"^7.6.0","@emotion/jest":"^11.10.5","@types/lodash":"^4.14.191","@storybook/react":"^8.0.0","@babel/preset-env":"^7.20.2","@types/escape-html":"^1.0.2","@types/webpack-env":"^1.18.0","@babel/preset-react":"^7.18.6","@types/react-select":"^3.1.2","@testing-library/dom":"^9.2.0","@storybook/components":"^8.0.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@babel/preset-typescript":"^7.21.0","@storybook/react-webpack5":"^8.0.0","@testing-library/jest-dom":"^5.16.5","@testing-library/user-event":"^14.4.3","@types/react-lifecycles-compat":"^3.0.1","@storybook/addon-webpack5-compiler-babel":"^3.0.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","@storybook/api":"^8.0.0","@storybook/theming":"^8.0.0","@storybook/components":"^8.0.0","@storybook/core-events":"^8.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_7.1.0_1716758555385_0.3823495280261713","host":"s3://npm-registry-packages"}},"7.1.1":{"name":"@storybook/addon-knobs","version":"7.1.1","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@7.1.1","maintainers":[{"name":"domyen","email":"dom@hichroma.com"},{"name":"kasperpeulen","email":"kasperpeulen@gmail.com"},{"name":"valentinpalkovic","email":"dev@valentinpalkovic.dev"},{"name":"jreinhold","email":"jeppe@reinhold.is"},{"name":"kylegach","email":"kyle.gach@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"yannbf","email":"yannbf@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"39a8676f0d96ce7a062731c521096774ef3dfee2","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-7.1.1.tgz","fileCount":69,"integrity":"sha512-sgTBqXPsLROcA1qdIXH8YsmeXzO975tK70QVYYvPkQJxGihCg3BtyxKxdulkfcVLkaAPQcvzbtooE6rrH/oJdQ==","signatures":[{"sig":"MEYCIQDQq+s+lDMcfuVYxuem5Y/1QA/RLUD1Y9TvDP6eVgrb4QIhAMkq4OhPbFHFs5/sPBZIXLxh0E1BIt9jwVnofQUH5oX1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236712},"main":"dist/index","types":"./dist/index.d.ts","gitHead":"96aec6156a0b71022fe067fb513ecd4026cfc045","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"storybook dev -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","build-storybook":"storybook build"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"8.19.4","description":"Storybook addon for editing props","directories":{},"_nodeVersion":"16.20.2","dependencies":{"qs":"^6.11.1","global":"^4.4.0","lodash":"^4.17.21","core-js":"^3.29.0","prop-types":"^15.8.1","escape-html":"^1.0.3","react-select":"^5.7.0","react-colorful":"^5.6.1","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.6","jest":"^29.5.0","chalk":"^5.2.0","react":"^18.2.0","rimraf":"^4.4.0","react-dom":"^18.2.0","storybook":"^7.0.0","@babel/cli":"^7.21.0","typescript":"^4.9.5","@babel/core":"^7.21.0","@types/node":"^18.15.11","concurrently":"^7.6.0","@emotion/jest":"^11.10.5","@types/lodash":"^4.14.191","@storybook/react":"^7.0.0","@babel/preset-env":"^7.20.2","@types/escape-html":"^1.0.2","@types/webpack-env":"^1.18.0","@babel/preset-react":"^7.18.6","@types/react-select":"^3.1.2","@testing-library/dom":"^9.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@babel/preset-typescript":"^7.21.0","@storybook/react-webpack5":"^7.0.0","@testing-library/jest-dom":"^5.16.5","@testing-library/user-event":"^14.4.3","@types/react-lifecycles-compat":"^3.0.1"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","@storybook/api":"^7.0.0","@storybook/addons":"^7.0.0","@storybook/theming":"^7.0.0","@storybook/components":"^7.0.0","@storybook/core-events":"^7.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_7.1.1_1716761418790_0.6043512321709321","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@storybook/addon-knobs","version":"8.0.0","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@8.0.0","maintainers":[{"name":"domyen","email":"dom@hichroma.com"},{"name":"kasperpeulen","email":"kasperpeulen@gmail.com"},{"name":"valentinpalkovic","email":"dev@valentinpalkovic.dev"},{"name":"jreinhold","email":"jeppe@reinhold.is"},{"name":"kylegach","email":"kyle.gach@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"yannbf","email":"yannbf@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"b33a31ba2d20ca735a93d4d9baf81793b39dd6e3","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-8.0.0.tgz","fileCount":69,"integrity":"sha512-xgu9KzXFf+RSdahC3C1dmarulYDQcc+oemNMxVd7hcam3npOkbCP0ZOYiL5VmXjB/pd7dpKhzutbO+JkTrZdkw==","signatures":[{"sig":"MEQCIHTi8w34vEq2EJHrFnYtJ3Z1sIe10sZqVOBS0RNVeTwnAiBkU6v/zWUKMiR+pGFFL+P/ry3DaRJUrqjMQueuPPJ8pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222071},"main":"dist/index","types":"./dist/index.d.ts","gitHead":"57a127dea04fa6d5cacd43d85978d7ef6c8e7da3","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"storybook dev -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","build-storybook":"storybook build"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"10.5.2","description":"Storybook addon for editing props","directories":{},"resolutions":{"jackspeak":"2.1.1"},"_nodeVersion":"20.13.1","dependencies":{"qs":"^6.11.1","global":"^4.4.0","lodash":"^4.17.21","core-js":"^3.29.0","prop-types":"^15.8.1","escape-html":"^1.0.3","react-select":"^5.7.0","react-colorful":"^5.6.1","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.6","jest":"^29.5.0","chalk":"^5.2.0","react":"^18.2.0","rimraf":"^4.4.0","react-dom":"^18.2.0","storybook":"^8.0.0","@babel/cli":"^7.21.0","typescript":"^4.9.5","@babel/core":"^7.21.0","@types/node":"^20.12.12","concurrently":"^7.6.0","@emotion/jest":"^11.10.5","@types/lodash":"^4.14.191","@storybook/react":"^8.0.0","@babel/preset-env":"^7.20.2","@types/escape-html":"^1.0.2","@types/webpack-env":"^1.18.0","@babel/preset-react":"^7.18.6","@types/react-select":"^3.1.2","@testing-library/dom":"^9.2.0","@storybook/components":"^8.0.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@babel/preset-typescript":"^7.21.0","@storybook/react-webpack5":"^8.0.0","@testing-library/jest-dom":"^5.16.5","@testing-library/user-event":"^14.4.3","@types/react-lifecycles-compat":"^3.0.1","@storybook/addon-webpack5-compiler-babel":"^3.0.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","@storybook/api":"^8.0.0","@storybook/theming":"^8.0.0","@storybook/components":"^8.0.0","@storybook/core-events":"^8.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_8.0.0_1716761822588_0.6991454315923509","host":"s3://npm-registry-packages"}},"8.0.1":{"name":"@storybook/addon-knobs","version":"8.0.1","keywords":["storybook-addons","test"],"license":"MIT","_id":"@storybook/addon-knobs@8.0.1","maintainers":[{"name":"domyen","email":"dom@hichroma.com"},{"name":"kasperpeulen","email":"kasperpeulen@gmail.com"},{"name":"valentinpalkovic","email":"dev@valentinpalkovic.dev"},{"name":"jreinhold","email":"jeppe@reinhold.is"},{"name":"kylegach","email":"kyle.gach@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"tmeasday","email":"tom@thesnail.org"},{"name":"ghengeveld","email":"gert@chromatic.com"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"yannbf","email":"yannbf@gmail.com"}],"homepage":"https://github.com/storybookjs/addon-knobs#readme","bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"dist":{"shasum":"0e67dd99504abd53d1a67f57395fee5c075eb324","tarball":"https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-8.0.1.tgz","fileCount":69,"integrity":"sha512-UKfYnlJ6BVx95CinnKtYqFae+uIGrPQKZB73JLDMeuf4FDpgpHtaf+553X6VZ4ht2o9ztEA6dNrxpE7czoqvkw==","signatures":[{"sig":"MEUCIBrK59yckUOkETMxcy6EUDOAL5rsSf9/uET2+QOjef4lAiEA9rNuUrgB1jQvBZUVc2lRonMHL5uSv9Qd3zX9cYUvhbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222079},"main":"dist/index","types":"./dist/index.d.ts","gitHead":"46480e193229f3405a0740ccd9459d368c41c0ee","scripts":{"test":"jest","build":"concurrently \"npm run buildBabel\" \"npm run buildTsc\"","clean":"rimraf ./dist","start":"concurrently \"npm run storybook -- --quiet\" \"npm run build -- --watch\"","release":"npm run build && auto shipit","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist","storybook":"storybook dev -p 6006","buildBabel":"babel ./src --out-dir ./dist --extensions \".js,.jsx,.ts,.tsx\"","build-storybook":"storybook build"},"_npmUser":{"name":"shilman","email":"michael@lab80.co"},"storybook":{"displayName":"Knobs","unsupportedFrameworks":["react-native"]},"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"_npmVersion":"10.7.0","description":"Storybook addon for editing props","directories":{},"resolutions":{"jackspeak":"2.1.1"},"_nodeVersion":"20.14.0","dependencies":{"qs":"^6.11.1","global":"^4.4.0","lodash":"^4.17.21","core-js":"^3.29.0","prop-types":"^15.8.1","escape-html":"^1.0.3","react-select":"^5.7.0","react-colorful":"^5.6.1","fast-deep-equal":"^3.1.3","copy-to-clipboard":"^3.3.3","react-lifecycles-compat":"^3.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.6","jest":"^29.5.0","chalk":"^5.2.0","react":"^18.2.0","rimraf":"^4.4.0","react-dom":"^18.2.0","storybook":"^8.0.0","@babel/cli":"^7.21.0","typescript":"^4.9.5","@babel/core":"^7.21.0","@types/node":"^20.12.12","concurrently":"^7.6.0","@emotion/jest":"^11.10.5","@types/lodash":"^4.14.191","@storybook/react":"^8.0.0","@babel/preset-env":"^7.20.2","@types/escape-html":"^1.0.2","@types/webpack-env":"^1.18.0","@babel/preset-react":"^7.18.6","@types/react-select":"^3.1.2","@testing-library/dom":"^9.2.0","@storybook/components":"^8.0.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@babel/preset-typescript":"^7.21.0","@storybook/react-webpack5":"^8.0.0","@testing-library/jest-dom":"^5.16.5","@testing-library/user-event":"^14.4.3","@types/react-lifecycles-compat":"^3.0.1","@storybook/addon-webpack5-compiler-babel":"^3.0.0"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","@storybook/theming":"^8.0.0","@storybook/components":"^8.0.0","@storybook/core-events":"^8.0.0","@storybook/manager-api":"^8.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/addon-knobs_8.0.1_1718757169954_0.3963690304754086","host":"s3://npm-registry-packages"}}},"time":{"created":"2017-05-17T20:03:44.897Z","modified":"2026-10-01T17:06:51.607Z","3.0.0-alpha.0":"2017-05-17T20:03:44.897Z","3.0.0-alpha.1":"2017-05-19T20:41:17.746Z","3.0.0-alpha.3":"2017-05-21T18:04:28.717Z","3.0.0-alpha.4":"2017-05-22T22:09:52.567Z","3.0.0-rc.0":"2017-05-25T16:29:16.348Z","3.0.0-rc.2":"2017-05-27T11:47:06.326Z","3.0.0-rc.3":"2017-05-30T08:46:32.218Z","3.0.0":"2017-05-30T13:39:55.830Z","3.0.1":"2017-06-05T12:59:12.705Z","3.1.2":"2017-06-09T11:54:52.039Z","3.2.0-alpha.0":"2017-06-20T15:36:32.377Z","3.1.5":"2017-06-22T06:37:45.543Z","3.1.6":"2017-06-26T06:34:02.512Z","3.2.0-alpha.5":"2017-07-02T17:23:13.816Z","3.2.0-alpha.7":"2017-07-06T08:39:56.240Z","3.1.8":"2017-07-06T09:17:46.117Z","3.1.9":"2017-07-16T20:50:33.381Z","3.2.0-alpha.8":"2017-07-20T20:30:55.272Z","3.2.0-alpha.10":"2017-07-27T08:07:57.741Z","3.2.0":"2017-07-31T14:13:30.659Z","3.2.5":"2017-08-17T04:51:14.443Z","3.2.6-alpha.0":"2017-08-22T07:33:13.935Z","3.2.6":"2017-08-22T18:03:33.441Z","3.2.7":"2017-08-23T16:24:02.276Z","3.2.8":"2017-08-23T20:55:31.535Z","3.3.0-alpha.0":"2017-09-06T20:47:07.636Z","3.2.10":"2017-09-22T21:43:31.836Z","3.3.0-alpha.1":"2017-10-02T18:59:10.830Z","3.2.12":"2017-10-02T22:31:40.640Z","3.3.0-alpha.2":"2017-10-03T20:12:28.918Z","3.2.13":"2017-10-20T19:45:56.665Z","3.2.14":"2017-11-01T07:22:29.554Z","3.3.0-alpha.3":"2017-11-07T03:58:02.622Z","3.2.15":"2017-11-10T02:41:19.562Z","3.2.16":"2017-11-16T02:04:29.938Z","3.3.0-alpha.4":"2017-11-22T11:16:26.687Z","3.2.17":"2017-12-03T20:00:07.172Z","3.2.18":"2017-12-18T21:59:56.066Z","3.3.0-alpha.5":"2017-12-23T17:06:44.681Z","3.3.0-alpha.6":"2017-12-23T17:26:06.419Z","3.2.19":"2017-12-23T17:59:46.841Z","3.3.0-rc.0":"2017-12-24T04:20:54.247Z","3.3.0-rc.1":"2017-12-26T17:49:41.748Z","3.3.0":"2017-12-26T23:58:26.358Z","3.3.1":"2017-12-27T03:30:51.305Z","3.3.2":"2017-12-28T03:11:35.243Z","3.3.3":"2017-12-28T17:06:28.065Z","3.3.4":"2018-01-07T12:55:28.760Z","3.4.0-alpha.0":"2018-01-07T16:04:44.677Z","3.3.5":"2018-01-08T03:42:32.768Z","3.3.6":"2018-01-08T10:41:57.304Z","3.3.7":"2018-01-10T06:36:14.811Z","3.4.0-alpha.1":"2018-01-10T07:08:33.097Z","3.3.8":"2018-01-11T12:17:53.081Z","3.4.0-alpha.2":"2018-01-11T12:46:43.171Z","3.3.9":"2018-01-13T07:32:00.740Z","3.4.0-alpha.3":"2018-01-13T12:41:29.335Z","3.4.0-alpha.4":"2018-01-13T13:04:16.001Z","3.3.10":"2018-01-19T11:28:14.217Z","3.4.0-alpha.5":"2018-01-19T12:52:36.993Z","3.3.11":"2018-01-27T06:40:58.867Z","3.4.0-alpha.6":"2018-01-27T07:16:32.724Z","3.3.12":"2018-02-03T02:23:45.095Z","3.4.0-alpha.7":"2018-02-03T02:55:09.319Z","3.3.13":"2018-02-11T06:12:38.886Z","3.4.0-alpha.8":"2018-02-11T06:57:33.504Z","3.3.14":"2018-02-21T08:38:43.553Z","3.4.0-alpha.9":"2018-02-22T08:46:39.149Z","3.3.15":"2018-03-07T09:54:22.208Z","3.4.0-rc.0":"2018-03-08T03:04:54.545Z","3.4.0-rc.1":"2018-03-13T10:37:20.417Z","3.4.0-rc.2":"2018-03-13T11:04:46.680Z","3.4.0-rc.3":"2018-03-19T23:04:47.322Z","3.4.0-rc.4":"2018-03-29T04:26:26.703Z","4.0.0-alpha.0":"2018-03-29T05:34:37.920Z","4.0.0-alpha.1":"2018-03-29T15:29:18.716Z","3.4.0":"2018-03-30T23:44:56.361Z","3.4.1":"2018-04-10T22:34:28.212Z","4.0.0-alpha.2":"2018-04-11T00:41:54.010Z","3.4.2":"2018-04-17T23:14:42.458Z","4.0.0-alpha.3":"2018-04-17T23:53:09.097Z","3.4.3":"2018-04-27T19:10:05.972Z","4.0.0-alpha.4":"2018-04-27T19:47:14.367Z","3.4.4":"2018-05-12T19:48:45.572Z","4.0.0-alpha.6":"2018-05-12T20:35:15.822Z","3.4.5":"2018-05-17T22:13:15.112Z","4.0.0-alpha.7":"2018-05-17T23:05:28.847Z","3.4.6":"2018-05-27T00:39:55.999Z","4.0.0-alpha.8":"2018-05-27T01:49:51.929Z","3.4.7":"2018-06-10T04:30:06.886Z","4.0.0-alpha.9":"2018-06-10T07:45:08.429Z","3.4.8":"2018-06-21T13:05:02.074Z","4.0.0-alpha.10":"2018-06-21T13:52:13.127Z","4.0.0-alpha.11":"2018-07-02T18:16:21.745Z","4.0.0-alpha.12":"2018-07-03T23:00:51.903Z","4.0.0-alpha.13":"2018-07-10T04:34:58.776Z","4.0.0-alpha.14":"2018-07-12T00:16:56.719Z","3.4.10":"2018-08-03T09:27:37.958Z","4.0.0-alpha.15":"2018-08-03T10:00:13.322Z","4.0.0-alpha.16":"2018-08-06T14:30:12.842Z","4.0.0-alpha.17":"2018-08-24T18:43:46.945Z","4.0.0-alpha.18":"2018-08-25T20:59:43.447Z","4.0.0-alpha.20":"2018-08-31T23:04:47.868Z","4.0.0-alpha.21":"2018-09-07T17:21:00.184Z","3.4.11":"2018-09-17T23:01:52.404Z","4.0.0-alpha.22":"2018-09-19T21:04:09.427Z","4.0.0-alpha.23":"2018-09-25T22:44:17.108Z","4.0.0-alpha.24":"2018-10-04T08:28:13.285Z","4.0.0-alpha.25":"2018-10-13T09:40:31.916Z","4.0.0-rc.0":"2018-10-15T15:43:32.924Z","4.0.0-rc.1":"2018-10-18T01:57:19.876Z","4.0.0-rc.2":"2018-10-22T13:42:56.323Z","4.0.0-rc.3":"2018-10-23T16:22:48.390Z","4.0.0-rc.4":"2018-10-25T02:58:36.736Z","4.0.0-rc.5":"2018-10-25T03:45:23.889Z","4.0.0-rc.6":"2018-10-25T04:39:16.407Z","4.0.0":"2018-10-29T02:33:46.405Z","4.0.1":"2018-10-31T07:14:43.354Z","4.0.2":"2018-10-31T08:51:18.286Z","4.0.3":"2018-11-06T04:54:16.257Z","4.0.4":"2018-11-06T05:41:17.444Z","4.1.0-alpha.1":"2018-11-06T09:19:05.809Z","4.0.6":"2018-11-13T11:16:41.740Z","4.1.0-alpha.2":"2018-11-13T11:37:01.264Z","4.0.7":"2018-11-15T13:35:26.182Z","4.1.0-alpha.3":"2018-11-15T14:14:58.662Z","4.0.8":"2018-11-21T10:04:57.832Z","4.1.0-alpha.4":"2018-11-21T10:46:49.224Z","4.1.0-alpha.7":"2018-11-22T04:36:58.889Z","4.1.0-alpha.8":"2018-11-25T02:04:22.131Z","4.0.9":"2018-11-25T15:32:23.830Z","4.1.0-alpha.9":"2018-11-29T09:52:18.348Z","4.1.0-alpha.10":"2018-12-01T03:27:45.774Z","4.0.10":"2018-12-01T22:50:55.806Z","4.0.11":"2018-12-03T02:49:22.299Z","4.1.0-alpha.11":"2018-12-05T19:14:46.068Z","4.0.12":"2018-12-05T19:30:12.380Z","4.1.0-alpha.12":"2018-12-11T17:32:35.238Z","4.1.0-alpha.13":"2018-12-12T17:47:48.563Z","4.1.0":"2018-12-12T19:03:04.938Z","4.1.1":"2018-12-13T01:24:06.877Z","4.2.0-alpha.0":"2018-12-13T01:44:05.591Z","4.2.0-alpha.1":"2018-12-13T02:02:30.688Z","4.1.2":"2018-12-16T15:23:28.163Z","4.2.0-alpha.2":"2018-12-16T16:39:48.841Z","4.2.0-alpha.3":"2018-12-18T15:06:20.570Z","4.2.0-alpha.4":"2018-12-19T07:25:04.096Z","4.2.0-alpha.5":"2018-12-19T16:08:14.029Z","4.2.0-cra-debug.0":"2018-12-20T01:49:18.002Z","4.1.3":"2018-12-20T08:22:22.459Z","4.2.0-alpha.6":"2018-12-20T22:24:26.220Z","4.2.0-alpha.7":"2018-12-25T20:34:25.826Z","4.1.4":"2018-12-25T21:12:28.831Z","4.2.0-alpha.8":"2018-12-28T03:20:46.611Z","4.2.0-alpha.9":"2019-01-04T04:40:48.994Z","4.2.0-alpha.10":"2019-01-06T11:00:54.014Z","5.0.0-debug.0":"2019-01-07T15:03:28.848Z","4.1.5-react-debug.0":"2019-01-09T03:36:00.184Z","4.1.5-react-debug.1":"2019-01-09T04:36:07.494Z","4.1.6":"2019-01-09T07:09:05.185Z","4.2.0-alpha.11":"2019-01-09T10:05:46.317Z","5.0.0-debug.1":"2019-01-09T10:52:01.596Z","5.0.0-debug.2":"2019-01-12T05:29:49.831Z","5.0.0-debug.3":"2019-01-12T07:27:50.137Z","5.0.0-alpha.0":"2019-01-13T07:18:23.291Z","5.0.0-alpha.1":"2019-01-14T15:47:25.146Z","5.0.0-alpha.2":"2019-01-16T02:56:21.377Z","5.0.0-alpha.3":"2019-01-16T04:16:44.044Z","5.0.0-alpha.4":"2019-01-16T17:10:56.958Z","5.0.0-alpha.5":"2019-01-17T08:47:00.747Z","4.1.7":"2019-01-17T14:16:48.130Z","5.0.0-alpha.6":"2019-01-18T16:08:31.651Z","5.0.0-alpha.7":"2019-01-20T08:50:09.260Z","5.0.0-alpha.8":"2019-01-22T09:14:06.333Z","4.1.8":"2019-01-23T10:32:02.873Z","4.1.9":"2019-01-23T10:51:50.176Z","5.0.0-alpha.9":"2019-01-23T13:42:10.304Z","4.1.10":"2019-01-24T14:37:29.724Z","4.1.11":"2019-01-24T14:50:46.683Z","5.0.0-alpha.10":"2019-01-28T04:50:12.426Z","5.0.0-alpha.11":"2019-01-31T18:41:48.089Z","5.0.0-beta.1":"2019-02-01T06:44:59.563Z","5.0.0-beta.2":"2019-02-09T03:33:58.632Z","5.0.0-beta.3":"2019-02-13T03:26:23.217Z","5.0.0-beta.4":"2019-02-15T08:30:23.596Z","5.0.0-rc.0":"2019-02-16T14:53:06.239Z","5.0.0-rc.1":"2019-02-16T16:11:29.587Z","4.1.12":"2019-02-18T09:41:27.897Z","5.0.0-rc.2":"2019-02-19T07:27:05.986Z","5.0.0-rc.3":"2019-02-19T11:25:59.458Z","4.1.13":"2019-02-21T08:02:06.290Z","5.0.0-rc.4":"2019-02-21T10:18:46.350Z","5.0.0-rc.5":"2019-02-23T08:57:01.826Z","5.0.0-rc.6":"2019-02-25T16:08:30.110Z","5.0.0-rc.7":"2019-02-27T17:37:01.474Z","5.0.0-rc.8":"2019-03-01T17:24:24.428Z","5.0.0-rc.9":"2019-03-03T06:29:27.642Z","5.0.0-rc.10":"2019-03-04T06:32:20.040Z","5.0.0-rc.11":"2019-03-05T02:18:08.245Z","5.0.0":"2019-03-05T07:48:53.315Z","5.1.0-alpha.0":"2019-03-06T02:44:05.844Z","5.1.0-alpha.1":"2019-03-07T14:17:26.455Z","5.1.0-alpha.2":"2019-03-08T10:40:08.749Z","4.1.14":"2019-03-08T15:17:14.658Z","5.0.1":"2019-03-08T16:27:29.297Z","5.1.0-alpha.3":"2019-03-09T15:29:12.080Z","5.1.0-alpha.4":"2019-03-11T14:33:55.093Z","5.1.0-alpha.5":"2019-03-12T21:29:28.422Z","5.1.0-alpha.6":"2019-03-14T00:59:54.132Z","5.1.0-alpha.7":"2019-03-16T07:18:18.593Z","5.0.2":"2019-03-17T05:04:06.221Z","5.1.0-alpha.8":"2019-03-17T15:32:16.586Z","5.1.0-alpha.9":"2019-03-18T09:33:29.467Z","5.0.3":"2019-03-18T11:11:41.618Z","5.1.0-alpha.10":"2019-03-19T13:40:39.477Z","5.1.0-alpha.11":"2019-03-20T20:37:30.003Z","5.1.0-alpha.12":"2019-03-22T04:32:14.853Z","5.1.0-alpha.13":"2019-03-23T05:23:22.520Z","4.1.16":"2019-03-24T07:31:23.313Z","5.0.4":"2019-03-24T08:10:29.897Z","3.4.12":"2019-03-24T12:51:39.459Z","5.0.5":"2019-03-24T23:06:12.112Z","5.1.0-alpha.14":"2019-03-25T15:34:14.052Z","5.1.0-alpha.15":"2019-03-26T03:11:14.361Z","5.1.0-alpha.16":"2019-03-26T10:44:46.108Z","5.1.0-alpha.17":"2019-03-26T13:05:07.231Z","5.1.0-alpha.18":"2019-03-26T23:38:00.189Z","5.1.0-alpha.19":"2019-03-28T03:24:13.921Z","5.1.0-alpha.20":"2019-03-29T02:06:22.751Z","5.0.6":"2019-04-01T04:45:28.058Z","5.1.0-alpha.21":"2019-04-04T15:37:08.480Z","5.1.0-alpha.22":"2019-04-05T13:45:34.464Z","5.1.0-alpha.23":"2019-04-08T10:26:28.685Z","5.1.0-alpha.24":"2019-04-09T02:16:02.134Z","5.1.0-alpha.25":"2019-04-11T22:57:59.576Z","5.1.0-alpha.26":"2019-04-13T01:06:03.427Z","5.1.0-alpha.27":"2019-04-14T01:24:44.126Z","5.0.7":"2019-04-14T02:07:51.643Z","4.1.18":"2019-04-15T07:17:00.065Z","5.0.8":"2019-04-15T07:39:16.461Z","5.1.0-alpha.28":"2019-04-16T10:45:00.283Z","5.0.9":"2019-04-17T00:02:08.134Z","5.1.0-alpha.29":"2019-04-17T08:33:16.364Z","5.1.0-alpha.30":"2019-04-18T01:24:16.812Z","5.0.10":"2019-04-18T06:09:26.824Z","5.1.0-alpha.31":"2019-04-19T05:01:18.305Z","5.1.0-alpha.32":"2019-04-22T03:21:40.992Z","5.1.0-alpha.33":"2019-04-23T06:31:09.779Z","5.1.0-alpha.34":"2019-04-24T15:08:44.189Z","5.1.0-alpha.35":"2019-04-26T17:34:22.917Z","5.1.0-alpha.36":"2019-04-27T05:15:58.951Z","5.0.11":"2019-04-28T03:14:44.167Z","5.2.0-alpha.0":"2019-04-29T14:31:05.420Z","5.2.0-alpha.1":"2019-04-30T10:42:29.507Z","5.2.0-alpha.2":"2019-04-30T12:05:59.743Z","5.2.0-alpha.3":"2019-05-01T09:20:10.416Z","5.1.0-alpha.37":"2019-05-01T11:03:22.821Z","5.1.0-alpha.39":"2019-05-02T06:40:46.070Z","5.1.0-alpha.40":"2019-05-08T15:37:21.744Z","5.1.0-beta.0":"2019-05-10T08:52:10.267Z","5.2.0-alpha.4":"2019-05-11T06:25:42.498Z","5.2.0-alpha.5":"2019-05-12T09:09:10.531Z","5.2.0-alpha.6":"2019-05-14T17:20:07.935Z","5.2.0-alpha.7":"2019-05-15T09:43:58.050Z","5.2.0-alpha.8":"2019-05-15T14:01:00.089Z","5.1.0-beta.1":"2019-05-16T06:03:45.748Z","5.2.0-alpha.9":"2019-05-17T09:14:25.185Z","5.2.0-alpha.10":"2019-05-20T07:50:44.302Z","5.1.0-rc.0":"2019-05-21T11:14:42.747Z","5.2.0-alpha.11":"2019-05-21T14:00:40.497Z","5.2.0-alpha.12":"2019-05-21T15:55:34.402Z","5.2.0-alpha.13":"2019-05-25T00:17:14.611Z","5.1.0-rc.1":"2019-05-25T01:03:52.680Z","5.2.0-alpha.14":"2019-05-25T22:34:50.155Z","5.2.0-alpha.15":"2019-05-26T00:45:10.546Z","5.2.0-alpha.16":"2019-05-26T06:15:08.010Z","5.2.0-alpha.17":"2019-05-26T16:58:22.945Z","5.2.0-alpha.18":"2019-05-27T05:39:45.895Z","5.1.0-rc.2":"2019-05-27T14:20:28.667Z","5.2.0-alpha.19":"2019-05-29T04:26:15.517Z","5.1.0-rc.3":"2019-05-30T06:22:29.198Z","5.2.0-alpha.20":"2019-06-01T08:37:28.762Z","5.2.0-alpha.21":"2019-06-03T02:44:47.305Z","5.1.0-rc.4":"2019-06-03T06:42:36.218Z","5.1.0-rc.5":"2019-06-04T18:02:33.378Z","5.1.1":"2019-06-05T08:35:03.658Z","5.1.3":"2019-06-06T21:27:01.394Z","5.2.0-alpha.22":"2019-06-07T15:09:51.911Z","5.2.0-alpha.23":"2019-06-11T03:29:24.712Z","5.2.0-alpha.24":"2019-06-13T06:27:42.989Z","5.1.4":"2019-06-13T07:14:17.098Z","5.1.5":"2019-06-13T22:11:38.633Z","5.1.7":"2019-06-13T23:40:36.157Z","5.2.0-alpha.26":"2019-06-14T12:14:31.106Z","5.1.8":"2019-06-14T12:31:09.037Z","5.2.0-alpha.27":"2019-06-16T22:56:44.377Z","5.2.0-alpha.28":"2019-06-17T15:05:29.962Z","5.2.0-alpha.29":"2019-06-17T15:27:36.024Z","5.1.9":"2019-06-20T00:36:40.500Z","5.2.0-alpha.30":"2019-06-25T12:25:38.396Z","5.2.0-alpha.31":"2019-06-27T04:36:11.380Z","5.2.0-alpha.32":"2019-06-29T03:33:09.138Z","5.2.0-alpha.33":"2019-07-01T11:18:57.133Z","5.2.0-alpha.34":"2019-07-02T01:39:49.351Z","5.2.0-alpha.35":"2019-07-02T16:28:47.860Z","5.2.0-alpha.36":"2019-07-05T10:20:06.223Z","5.2.0-alpha.37":"2019-07-08T05:10:51.798Z","5.2.0-alpha.38":"2019-07-08T18:41:41.469Z","5.2.0-alpha.39":"2019-07-10T02:49:51.193Z","5.2.0-alpha.40":"2019-07-10T13:19:10.348Z","5.2.0-alpha.41":"2019-07-11T00:07:58.340Z","5.2.0-alpha.42":"2019-07-12T03:44:01.253Z","5.2.0-alpha.43":"2019-07-13T13:56:50.586Z","5.2.0-alpha.44":"2019-07-15T01:38:06.064Z","5.2.0-beta.0":"2019-07-15T12:58:29.743Z","5.2.0-beta.1":"2019-07-18T02:15:49.571Z","5.2.0-beta.2":"2019-07-18T14:27:21.234Z","5.2.0-beta.3":"2019-07-19T12:23:53.298Z","5.2.0-beta.4":"2019-07-20T04:47:12.113Z","5.2.0-beta.5":"2019-07-21T02:05:35.081Z","5.2.0-beta.6":"2019-07-22T18:10:55.873Z","5.2.0-beta.7":"2019-07-23T10:01:50.200Z","5.2.0-beta.8":"2019-07-25T10:27:57.349Z","5.2.0-beta.9":"2019-07-25T17:19:13.669Z","5.2.0-beta.10":"2019-07-26T11:53:49.578Z","5.2.0-beta.12":"2019-07-27T01:54:36.659Z","5.2.0-beta.13":"2019-07-27T08:42:58.460Z","5.2.0-beta.14":"2019-07-29T04:35:39.465Z","5.2.0-beta.15":"2019-07-29T04:52:00.988Z","5.2.0-beta.16":"2019-07-29T08:33:46.887Z","5.2.0-beta.17":"2019-07-29T11:09:23.421Z","5.2.0-beta.18":"2019-07-29T23:45:45.547Z","5.1.10":"2019-07-31T08:59:21.938Z","5.2.0-beta.19":"2019-07-31T09:24:11.555Z","5.2.0-beta.20":"2019-08-01T15:47:18.092Z","5.2.0-beta.21":"2019-08-02T16:32:26.748Z","5.2.0-beta.22":"2019-08-03T04:12:06.767Z","5.2.0-beta.23":"2019-08-05T16:41:40.331Z","5.2.0-beta.24":"2019-08-07T03:21:26.539Z","5.2.0-beta.25":"2019-08-08T02:01:28.945Z","5.2.0-beta.26":"2019-08-09T02:40:55.191Z","5.2.0-beta.28":"2019-08-10T12:46:00.676Z","5.2.0-beta.29":"2019-08-13T01:23:25.218Z","5.1.11":"2019-08-13T01:56:02.600Z","5.2.0-beta.30":"2019-08-14T08:04:11.398Z","5.2.0-beta.31":"2019-08-16T10:18:55.106Z","5.2.0-beta.32":"2019-08-17T13:46:38.199Z","5.2.0-beta.33":"2019-08-18T13:47:54.188Z","5.2.0-beta.36":"2019-08-19T19:26:07.913Z","5.2.0-beta.37":"2019-08-20T08:06:43.756Z","5.2.0-beta.38":"2019-08-20T16:11:15.168Z","5.2.0-beta.39":"2019-08-22T03:34:34.133Z","5.2.0-beta.40":"2019-08-23T14:55:14.234Z","5.2.0-beta.41":"2019-08-27T16:03:18.507Z","5.2.0-beta.42":"2019-08-27T16:31:26.883Z","5.2.0-beta.43":"2019-08-28T00:07:53.258Z","5.2.0-beta.45":"2019-08-28T12:30:36.618Z","5.2.0-beta.46":"2019-08-29T03:45:42.322Z","5.2.0-beta.47":"2019-08-29T16:51:55.951Z","5.2.0-beta.48":"2019-08-30T04:19:44.258Z","5.2.0-rc.0":"2019-08-30T06:44:49.414Z","5.2.0-rc.1":"2019-08-31T02:58:37.581Z","5.2.0-rc.2":"2019-09-01T06:00:14.461Z","5.2.0-rc.4":"2019-09-03T09:57:24.500Z","5.2.0-rc.5":"2019-09-04T02:52:15.209Z","5.2.0-rc.6":"2019-09-05T06:52:31.450Z","5.2.0-rc.8":"2019-09-07T05:23:27.850Z","5.2.0-rc.9":"2019-09-08T04:58:49.418Z","5.2.0-rc.10":"2019-09-09T22:00:52.319Z","5.2.0-rc.11":"2019-09-10T20:43:17.257Z","5.2.0":"2019-09-14T03:52:54.762Z","5.3.0-alpha.0":"2019-09-17T04:16:46.310Z","5.2.1":"2019-09-17T16:30:08.634Z","5.3.0-alpha.1":"2019-09-24T03:57:41.893Z","5.3.0-alpha.2":"2019-09-24T13:47:24.358Z","5.3.0-alpha.3":"2019-09-25T18:40:07.428Z","5.3.0-alpha.4":"2019-09-27T06:13:52.161Z","5.3.0-alpha.5":"2019-09-28T06:54:22.422Z","5.3.0-alpha.6":"2019-10-01T22:14:53.733Z","5.3.0-alpha.7":"2019-10-03T07:06:14.686Z","5.3.0-alpha.9":"2019-10-04T07:44:22.989Z","5.3.0-alpha.10":"2019-10-04T22:34:35.981Z","5.3.0-alpha.11":"2019-10-06T01:39:41.606Z","5.2.2":"2019-10-07T10:09:10.672Z","5.2.3":"2019-10-07T11:10:44.564Z","5.3.0-alpha.12":"2019-10-07T14:43:25.036Z","5.3.0-alpha.13":"2019-10-08T01:39:29.294Z","5.3.0-alpha.15":"2019-10-08T10:14:36.223Z","5.3.0-alpha.17":"2019-10-10T04:51:34.192Z","5.3.0-alpha.18":"2019-10-14T07:55:24.862Z","5.2.4":"2019-10-14T09:44:30.832Z","5.3.0-alpha.19":"2019-10-14T17:43:51.742Z","5.3.0-alpha.20":"2019-10-15T10:51:48.424Z","5.3.0-alpha.21":"2019-10-17T14:59:21.161Z","5.3.0-alpha.22":"2019-10-17T17:58:56.365Z","5.3.0-alpha.23":"2019-10-19T02:38:47.944Z","5.2.5":"2019-10-22T01:44:22.952Z","5.3.0-alpha.24":"2019-10-22T02:04:20.014Z","5.3.0-alpha.25":"2019-10-23T01:38:23.963Z","5.3.0-alpha.26":"2019-10-23T02:20:48.250Z","5.3.0-alpha.27":"2019-10-24T15:10:23.691Z","5.3.0-alpha.28":"2019-10-25T01:59:58.827Z","5.3.0-alpha.29":"2019-10-25T08:02:19.132Z","5.3.0-alpha.30":"2019-10-26T16:21:08.477Z","5.3.0-alpha.31":"2019-10-26T17:46:36.768Z","5.3.0-alpha.32":"2019-10-27T19:15:11.399Z","5.3.0-alpha.33":"2019-10-28T01:57:35.801Z","5.3.0-alpha.34":"2019-10-30T09:33:59.251Z","5.3.0-alpha.35":"2019-11-01T01:57:38.750Z","5.3.0-alpha.36":"2019-11-01T17:39:40.548Z","5.3.0-alpha.37":"2019-11-02T02:26:01.262Z","5.3.0-alpha.38":"2019-11-03T08:39:27.319Z","5.3.0-alpha.39":"2019-11-05T13:46:19.947Z","5.3.0-alpha.40":"2019-11-06T02:59:06.167Z","5.3.0-alpha.41":"2019-11-07T03:18:37.767Z","5.3.0-alpha.42":"2019-11-09T08:05:51.134Z","5.2.6":"2019-11-09T09:52:03.089Z","5.3.0-alpha.43":"2019-11-11T15:45:06.804Z","5.3.0-alpha.44":"2019-11-13T00:49:35.146Z","5.3.0-alpha.45":"2019-11-14T09:36:49.978Z","5.3.0-alpha.46":"2019-11-15T21:56:23.649Z","5.3.0-alpha.47":"2019-11-16T13:05:35.987Z","5.3.0-beta.0":"2019-11-16T15:34:11.688Z","5.3.0-beta.1":"2019-11-18T14:38:17.293Z","5.3.0-beta.2":"2019-11-19T10:29:22.702Z","5.3.0-beta.3":"2019-11-21T06:47:28.829Z","5.3.0-beta.6":"2019-11-24T08:58:27.183Z","5.3.0-beta.7":"2019-11-25T16:28:18.347Z","5.3.0-beta.8":"2019-11-26T01:05:18.571Z","5.3.0-beta.9":"2019-11-26T09:54:10.918Z","5.3.0-beta.10":"2019-11-27T01:26:07.979Z","5.3.0-beta.11":"2019-11-27T23:13:45.890Z","5.3.0-beta.12":"2019-11-28T17:11:05.092Z","5.3.0-beta.13":"2019-11-30T09:42:24.719Z","5.2.7":"2019-11-30T13:17:53.587Z","5.3.0-beta.14":"2019-12-02T03:47:11.199Z","5.2.8":"2019-12-02T06:30:04.706Z","5.3.0-beta.15":"2019-12-04T04:00:23.727Z","5.3.0-beta.16":"2019-12-05T03:44:16.021Z","5.3.0-beta.17":"2019-12-06T14:46:44.617Z","5.3.0-beta.18":"2019-12-06T15:11:24.006Z","5.3.0-beta.19":"2019-12-07T08:54:05.649Z","5.3.0-beta.20":"2019-12-09T12:56:43.115Z","5.3.0-beta.21":"2019-12-10T16:55:22.927Z","5.3.0-beta.22":"2019-12-12T15:30:03.543Z","5.3.0-beta.23":"2019-12-14T14:14:43.394Z","5.3.0-beta.25":"2019-12-15T10:14:07.231Z","5.3.0-beta.26":"2019-12-16T03:54:21.396Z","5.3.0-beta.27":"2019-12-16T04:13:37.291Z","5.3.0-beta.28":"2019-12-16T05:19:54.395Z","5.3.0-beta.29":"2019-12-16T06:50:45.605Z","5.3.0-beta.30":"2019-12-16T09:43:45.459Z","5.3.0-beta.31":"2019-12-16T13:21:57.878Z","5.3.0-rc.0":"2019-12-19T08:58:07.892Z","5.3.0-rc.1":"2019-12-23T09:25:12.221Z","5.3.0-rc.3":"2019-12-26T12:14:36.943Z","5.3.0-rc.4":"2019-12-28T13:13:33.135Z","5.3.0-rc.5":"2019-12-30T19:40:55.738Z","5.3.0-rc.6":"2019-12-31T08:29:39.441Z","5.3.0-rc.7":"2020-01-02T03:08:37.892Z","5.3.0-rc.8":"2020-01-03T08:52:59.123Z","5.3.0-rc.9":"2020-01-04T13:01:33.254Z","5.3.0-rc.10":"2020-01-06T14:36:04.692Z","5.3.0-rc.11":"2020-01-07T14:02:26.557Z","5.3.0-rc.12":"2020-01-08T14:58:58.047Z","5.3.0-rc.13":"2020-01-11T02:20:57.219Z","5.3.0-rc.14":"2020-01-11T08:53:10.219Z","5.3.0":"2020-01-11T09:36:07.089Z","5.3.1":"2020-01-12T15:39:00.150Z","5.3.2":"2020-01-13T15:39:21.691Z","5.3.3":"2020-01-14T10:00:25.388Z","5.3.4":"2020-01-16T06:24:26.919Z","5.3.5":"2020-01-16T19:34:43.897Z","5.3.6":"2020-01-17T08:17:05.811Z","5.3.7":"2020-01-20T06:58:21.872Z","6.0.0-alpha.0":"2020-01-21T14:25:42.089Z","5.3.8":"2020-01-21T16:55:29.302Z","6.0.0-alpha.1":"2020-01-23T12:25:17.914Z","5.3.9":"2020-01-24T14:16:12.461Z","6.0.0-alpha.2":"2020-01-30T13:42:52.958Z","6.0.0-alpha.3":"2020-02-02T05:53:18.711Z","5.3.10":"2020-02-02T07:05:20.669Z","6.0.0-alpha.4":"2020-02-03T15:55:01.656Z","6.0.0-alpha.5":"2020-02-04T08:58:06.478Z","5.3.11":"2020-02-04T16:01:29.057Z","5.3.12":"2020-02-04T23:24:31.202Z","6.0.0-alpha.6":"2020-02-04T23:50:01.539Z","6.0.0-alpha.7":"2020-02-07T15:52:38.028Z","6.0.0-alpha.8":"2020-02-07T16:28:17.209Z","6.0.0-alpha.9":"2020-02-08T17:30:51.221Z","6.0.0-alpha.10":"2020-02-11T14:36:41.492Z","5.3.13":"2020-02-12T03:50:27.212Z","6.0.0-alpha.11":"2020-02-13T04:13:48.287Z","6.0.0-alpha.12":"2020-02-13T17:07:19.576Z","6.0.0-alpha.13":"2020-02-15T12:49:12.503Z","6.0.0-alpha.14":"2020-02-18T23:01:14.311Z","6.0.0-alpha.15":"2020-02-20T04:02:25.181Z","6.0.0-alpha.17":"2020-02-21T04:07:22.671Z","6.0.0-alpha.18":"2020-02-21T20:39:31.264Z","6.0.0-alpha.19":"2020-02-24T14:36:44.870Z","5.3.14":"2020-02-25T15:21:01.018Z","6.0.0-alpha.20":"2020-02-27T00:34:23.710Z","6.0.0-alpha.21":"2020-03-05T09:33:48.943Z","6.0.0-alpha.22":"2020-03-10T10:52:49.583Z","6.0.0-alpha.24":"2020-03-11T09:05:02.052Z","6.0.0-alpha.25":"2020-03-11T11:02:25.472Z","6.0.0-alpha.26":"2020-03-12T13:01:43.072Z","6.0.0-alpha.27":"2020-03-13T12:38:14.687Z","5.3.15":"2020-03-14T03:39:00.146Z","5.3.17":"2020-03-14T07:48:32.576Z","6.0.0-alpha.28":"2020-03-23T06:04:18.894Z","6.0.0-alpha.29":"2020-03-26T02:47:11.212Z","6.0.0-alpha.30":"2020-03-31T11:15:33.254Z","5.3.18":"2020-03-31T13:40:59.221Z","6.0.0-alpha.31":"2020-04-07T10:27:07.005Z","6.0.0-alpha.32":"2020-04-11T08:15:37.772Z","6.0.0-alpha.33":"2020-04-13T23:59:25.070Z","6.0.0-alpha.34":"2020-04-15T09:07:05.606Z","6.0.0-alpha.35":"2020-04-15T16:15:25.238Z","6.0.0-alpha.36":"2020-04-16T00:39:25.977Z","6.0.0-alpha.37":"2020-04-16T18:51:10.120Z","6.0.0-alpha.39":"2020-04-18T11:46:43.762Z","6.0.0-alpha.40":"2020-04-20T08:19:35.252Z","6.0.0-alpha.41":"2020-04-20T23:19:41.748Z","6.0.0-alpha.42":"2020-04-23T00:20:45.639Z","6.0.0-alpha.43":"2020-04-23T22:32:47.624Z","6.0.0-alpha.44":"2020-04-27T04:15:16.593Z","6.0.0-alpha.45":"2020-04-28T03:33:32.086Z","6.0.0-alpha.46":"2020-04-29T09:06:22.442Z","6.0.0-beta.0":"2020-04-29T13:35:27.090Z","6.0.0-beta.1":"2020-05-02T14:07:06.119Z","6.0.0-beta.2":"2020-05-04T12:15:31.779Z","6.0.0-beta.3":"2020-05-07T04:58:18.102Z","6.0.0-beta.4":"2020-05-08T13:07:03.418Z","6.0.0-beta.5":"2020-05-11T08:58:26.517Z","6.0.0-beta.6":"2020-05-12T13:28:12.435Z","6.0.0-beta.7":"2020-05-15T04:16:47.486Z","6.0.0-beta.8":"2020-05-17T11:10:14.264Z","6.0.0-beta.9":"2020-05-20T23:24:45.708Z","6.0.0-beta.11":"2020-05-21T04:33:21.658Z","6.0.0-beta.12":"2020-05-21T06:05:50.002Z","6.0.0-beta.13":"2020-05-22T18:13:47.795Z","5.3.19":"2020-05-24T04:24:19.041Z","6.0.0-beta.14":"2020-05-25T13:42:50.032Z","6.0.0-beta.15":"2020-05-26T23:13:42.957Z","6.0.0-beta.16":"2020-05-27T16:29:44.024Z","6.0.0-beta.17":"2020-05-28T04:42:12.290Z","6.0.0-beta.18":"2020-05-29T15:02:41.487Z","6.0.0-beta.19":"2020-05-29T19:36:33.680Z","6.0.0-beta.20":"2020-06-01T14:14:23.219Z","6.0.0-beta.21":"2020-06-04T00:44:43.421Z","6.0.0-beta.22":"2020-06-05T19:04:22.186Z","6.0.0-beta.23":"2020-06-08T07:51:35.139Z","6.0.0-beta.24":"2020-06-11T13:03:49.550Z","6.0.0-beta.25":"2020-06-11T13:25:32.381Z","6.0.0-beta.26":"2020-06-12T09:48:36.137Z","6.0.0-beta.27":"2020-06-14T02:09:57.959Z","6.0.0-beta.28":"2020-06-15T11:02:29.917Z","6.0.0-beta.29":"2020-06-16T06:11:53.036Z","6.0.0-beta.30":"2020-06-16T14:43:53.885Z","6.0.0-beta.31":"2020-06-17T11:08:15.811Z","6.0.0-beta.32":"2020-06-19T13:34:01.998Z","6.0.0-beta.33":"2020-06-22T02:55:12.199Z","6.0.0-beta.34":"2020-06-23T15:49:26.442Z","6.0.0-beta.35":"2020-06-24T09:40:55.344Z","6.0.0-beta.36":"2020-06-25T02:19:09.191Z","6.0.0-beta.37":"2020-06-26T05:50:44.743Z","6.0.0-beta.38":"2020-06-30T15:45:40.780Z","6.0.0-beta.39":"2020-07-02T11:39:42.755Z","6.0.0-beta.40":"2020-07-03T16:25:31.024Z","6.0.0-beta.41":"2020-07-04T07:22:47.293Z","6.0.0-beta.42":"2020-07-05T04:17:37.860Z","6.0.0-beta.43":"2020-07-05T10:42:38.678Z","6.0.0-beta.44":"2020-07-06T14:29:45.477Z","6.0.0-beta.45":"2020-07-07T13:05:56.883Z","6.0.0-beta.46":"2020-07-08T08:55:10.767Z","6.0.0-rc.0":"2020-07-08T10:54:43.961Z","6.0.0-rc.1":"2020-07-09T07:27:04.279Z","6.0.0-rc.2":"2020-07-10T14:09:53.429Z","6.0.0-rc.3":"2020-07-11T08:34:41.094Z","6.0.0-rc.5":"2020-07-15T12:49:59.900Z","6.0.0-rc.8":"2020-07-16T11:54:54.930Z","6.0.0-rc.9":"2020-07-17T14:42:38.249Z","6.0.0-rc.10":"2020-07-18T14:08:01.160Z","6.0.0-rc.11":"2020-07-19T09:09:13.277Z","6.0.0-rc.12":"2020-07-20T12:36:58.453Z","6.0.0-rc.13":"2020-07-21T10:30:42.502Z","6.0.0-rc.14":"2020-07-22T15:55:36.630Z","6.0.0-rc.15":"2020-07-27T05:01:23.744Z","6.0.0-rc.16":"2020-07-28T14:30:04.142Z","6.0.0-rc.18":"2020-07-29T17:29:39.216Z","6.0.0-rc.19":"2020-07-30T16:37:19.709Z","6.0.0-rc.20":"2020-07-31T06:32:08.384Z","6.0.0-rc.21":"2020-08-01T13:53:36.617Z","6.0.0-rc.22":"2020-08-02T14:37:50.011Z","6.0.0-rc.23":"2020-08-03T03:37:35.163Z","6.0.0-rc.24":"2020-08-03T13:36:44.071Z","6.0.0-rc.25":"2020-08-04T06:47:22.055Z","6.0.0-rc.26":"2020-08-04T16:38:44.790Z","6.0.0-rc.27":"2020-08-05T18:04:43.185Z","6.0.0-rc.28":"2020-08-06T14:58:05.476Z","6.0.0-rc.29":"2020-08-07T11:41:48.812Z","6.0.0-rc.30":"2020-08-10T09:35:27.277Z","6.0.0":"2020-08-11T06:43:15.336Z","6.0.1":"2020-08-11T11:43:17.551Z","6.0.2":"2020-08-11T15:12:50.827Z","6.0.3":"2020-08-12T01:41:22.498Z","6.0.4":"2020-08-12T09:20:22.844Z","6.0.5":"2020-08-12T18:06:29.083Z","6.0.6":"2020-08-13T17:29:17.779Z","6.0.7":"2020-08-14T10:03:35.770Z","6.0.9":"2020-08-15T07:28:10.826Z","6.0.10":"2020-08-15T09:18:39.238Z","6.0.11":"2020-08-17T14:20:24.762Z","6.0.12":"2020-08-17T14:38:52.230Z","6.0.13":"2020-08-19T09:10:19.149Z","6.0.14":"2020-08-20T08:13:09.010Z","6.0.15":"2020-08-20T10:53:20.796Z","6.0.16":"2020-08-20T14:14:58.515Z","6.0.17":"2020-08-25T00:06:19.161Z","6.0.18":"2020-08-25T16:40:49.760Z","5.3.20":"2020-08-26T17:01:08.598Z","6.0.19":"2020-08-26T17:23:29.829Z","5.3.21":"2020-08-28T00:13:45.257Z","6.0.20":"2020-08-28T00:45:17.614Z","6.0.21":"2020-08-31T12:14:27.115Z","6.1.0-alpha.0":"2020-08-31T12:56:58.630Z","6.1.0-alpha.1":"2020-08-31T14:28:18.030Z","6.1.0-alpha.3":"2020-09-03T14:04:55.552Z","6.1.0-alpha.4":"2020-09-08T10:52:57.310Z","6.1.0-alpha.6":"2020-09-10T00:33:40.854Z","6.1.0-alpha.7":"2020-09-10T15:42:01.388Z","6.1.0-alpha.8":"2020-09-11T16:47:16.457Z","6.1.0-alpha.9":"2020-09-12T17:44:51.785Z","6.1.0-alpha.10":"2020-09-16T04:57:09.582Z","6.1.0-alpha.11":"2020-09-19T15:32:15.690Z","6.1.0-alpha.12":"2020-09-20T16:26:19.357Z","6.1.0-alpha.14":"2020-09-21T17:03:42.595Z","6.1.0-alpha.15":"2020-09-24T12:55:12.948Z","6.1.0-alpha.16":"2020-09-25T09:36:41.390Z","6.0.22":"2020-09-26T05:14:27.625Z","6.1.0-alpha.17":"2020-09-26T12:05:44.497Z","6.1.0-alpha.18":"2020-09-30T11:02:44.032Z","6.1.0-alpha.19":"2020-10-03T13:51:30.104Z","6.0.23":"2020-10-03T18:05:29.902Z","6.0.24":"2020-10-03T18:17:28.471Z","6.0.25":"2020-10-03T18:25:49.095Z","6.1.0-alpha.20":"2020-10-05T05:18:27.149Z","6.0.26":"2020-10-05T07:33:02.377Z","6.1.0-alpha.21":"2020-10-08T15:25:16.129Z","6.1.0-alpha.22":"2020-10-10T02:28:33.087Z","6.1.0-alpha.23":"2020-10-12T11:45:11.809Z","6.1.0-alpha.24":"2020-10-15T14:51:38.504Z","6.1.0-alpha.25":"2020-10-16T13:11:36.750Z","6.1.0-alpha.26":"2020-10-18T10:40:48.587Z","6.1.0-alpha.27":"2020-10-19T10:49:31.362Z","6.1.0-alpha.28":"2020-10-23T07:34:06.105Z","6.0.27":"2020-10-23T10:22:04.712Z","6.1.0-alpha.29":"2020-10-23T10:45:14.653Z","6.1.0-alpha.30":"2020-10-26T15:42:46.675Z","6.1.0-alpha.31":"2020-10-27T11:19:42.234Z","6.0.28-alpha.0":"2020-10-28T01:12:13.652Z","6.0.28-alpha.1":"2020-10-29T01:36:53.664Z","6.0.28-alpha.2":"2020-10-29T01:58:40.890Z","6.0.28-alpha.3":"2020-10-29T02:30:09.250Z","6.1.0-alpha.32":"2020-10-30T04:18:23.318Z","6.0.28":"2020-10-30T11:14:11.778Z","6.1.0-alpha.33":"2020-10-30T15:52:47.371Z","6.1.0-alpha.34":"2020-11-01T07:15:31.063Z","6.1.0-alpha.35":"2020-11-02T06:46:57.076Z","6.1.0-beta.0":"2020-11-02T18:32:04.974Z","6.1.0-beta.1":"2020-11-03T07:30:56.906Z","6.1.0-beta.2":"2020-11-04T09:08:08.782Z","6.1.0-beta.3":"2020-11-06T01:08:33.065Z","6.1.0-beta.4":"2020-11-06T13:40:09.585Z","6.1.0-beta.5":"2020-11-07T16:32:08.354Z","6.1.0-beta.6":"2020-11-09T15:09:44.970Z","6.1.0-beta.7":"2020-11-10T23:43:48.108Z","6.1.0-rc.0":"2020-11-12T10:27:25.209Z","6.1.0-rc.1":"2020-11-13T00:36:10.833Z","6.1.0-rc.2":"2020-11-13T08:44:36.642Z","6.1.0-rc.3":"2020-11-16T09:14:04.032Z","6.1.0-rc.4":"2020-11-16T23:09:39.030Z","6.1.0-rc.5":"2020-11-18T19:19:17.583Z","6.1.0-rc.6":"2020-11-19T01:55:58.019Z","6.1.0":"2020-11-19T02:25:05.950Z","6.1.1":"2020-11-19T17:17:39.493Z","6.1.2":"2020-11-21T05:51:09.560Z","6.1.3":"2020-11-23T15:49:34.104Z","6.1.4":"2020-11-23T23:59:00.849Z","6.1.5":"2020-11-24T09:21:44.813Z","6.1.6":"2020-11-25T00:20:50.726Z","6.1.7":"2020-11-26T17:16:07.563Z","6.1.8":"2020-11-27T14:29:20.424Z","6.1.9":"2020-11-29T13:00:38.448Z","6.2.0-alpha.0":"2020-12-01T03:49:40.132Z","6.2.0-alpha.1":"2020-12-01T13:28:15.199Z","6.2.0-alpha.2":"2020-12-03T07:37:58.616Z","6.1.10":"2020-12-04T03:04:13.368Z","6.2.0-alpha.3":"2020-12-04T06:52:11.356Z","6.2.0-alpha.4":"2020-12-06T05:29:19.274Z","6.2.0-alpha.5":"2020-12-08T04:57:31.271Z","6.2.0-alpha.6":"2020-12-12T03:36:53.798Z","6.1.11":"2020-12-12T12:31:05.596Z","6.2.0-alpha.7":"2020-12-15T14:52:58.776Z","6.2.0-alpha.8":"2020-12-16T14:45:22.504Z","6.2.0-alpha.9":"2020-12-20T12:02:07.274Z","6.2.0-alpha.10":"2020-12-28T03:55:06.044Z","6.2.0-alpha.11":"2021-01-11T10:52:47.007Z","6.2.0-alpha.12":"2021-01-11T18:50:29.146Z","6.1.12":"2021-01-11T23:40:42.496Z","6.1.14":"2021-01-12T11:30:43.013Z","6.2.0-alpha.13":"2021-01-13T10:13:09.413Z","6.2.0-alpha.14":"2021-01-14T00:27:43.002Z","6.2.0-alpha.15":"2021-01-15T06:28:25.405Z","6.2.0-alpha.16":"2021-01-16T00:55:53.051Z","6.2.0-alpha.17":"2021-01-22T04:41:33.641Z","6.2.0-alpha.18":"2021-01-22T13:23:29.046Z","6.1.15":"2021-01-22T14:32:06.755Z","6.2.0-alpha.19":"2021-01-29T00:52:06.857Z","6.2.0-alpha.20":"2021-02-02T01:45:03.033Z","6.1.16":"2021-02-02T02:22:16.257Z","6.2.0-alpha.21":"2021-02-04T08:12:20.180Z","6.1.17":"2021-02-04T16:01:41.821Z","6.2.0-alpha.22":"2021-02-04T22:32:57.544Z","6.2.0-alpha.23":"2021-02-05T06:55:35.446Z","6.2.0-alpha.24":"2021-02-06T01:48:59.874Z","6.2.0-alpha.25":"2021-02-11T01:28:27.419Z","6.2.0-alpha.26":"2021-02-13T03:29:04.723Z","6.1.18":"2021-02-14T17:05:20.430Z","6.2.0-alpha.27":"2021-02-14T17:24:27.163Z","6.2.0-alpha.28":"2021-02-15T06:36:53.017Z","6.2.0-alpha.29":"2021-02-17T22:17:26.923Z","6.2.0-alpha.30":"2021-02-20T12:09:25.496Z","6.2.0-alpha.31":"2021-02-20T13:46:49.189Z","6.2.0-alpha.32":"2021-02-21T08:54:11.790Z","6.2.0-alpha.33":"2021-02-22T01:48:05.644Z","6.2.0-alpha.34":"2021-02-22T09:13:51.040Z","6.2.0-alpha.35":"2021-02-22T14:41:45.106Z","6.2.0-beta.0":"2021-02-22T15:44:54.161Z","6.1.19":"2021-02-23T03:21:11.662Z","6.2.0-beta.1":"2021-02-23T03:47:31.347Z","6.1.20":"2021-02-24T04:46:48.473Z","6.2.0-beta.2":"2021-02-24T05:05:18.998Z","6.2.0-beta.3":"2021-02-25T03:29:08.054Z","6.2.0-beta.4":"2021-02-26T13:09:04.416Z","6.2.0-beta.5":"2021-03-01T15:28:22.114Z","6.2.0-beta.6":"2021-03-03T11:05:22.601Z","6.1.21":"2021-03-03T11:38:22.302Z","6.2.0-beta.8":"2021-03-04T00:01:19.372Z","6.2.0-beta.9":"2021-03-04T11:08:18.543Z","6.2.0-beta.10":"2021-03-05T09:57:26.644Z","6.2.0-beta.11":"2021-03-08T16:50:59.950Z","6.2.0-beta.12":"2021-03-09T23:27:54.115Z","6.2.0-beta.13":"2021-03-10T22:34:41.423Z","6.2.0-beta.14":"2021-03-11T14:05:14.377Z","6.2.0-beta.15":"2021-03-15T11:23:30.165Z","6.2.0-rc.0":"2021-03-15T15:06:58.986Z","6.2.0-rc.1":"2021-03-16T14:54:52.923Z","6.2.0-rc.2":"2021-03-17T10:06:48.972Z","6.2.0-rc.3":"2021-03-18T14:07:46.553Z","6.2.0-rc.4":"2021-03-19T05:41:33.125Z","6.2.0-rc.5":"2021-03-20T08:56:33.025Z","6.2.0-rc.6":"2021-03-20T16:27:46.084Z","6.2.0-rc.7":"2021-03-22T16:25:36.222Z","6.2.0-rc.8":"2021-03-23T02:11:43.530Z","6.2.0-rc.9":"2021-03-24T16:48:32.240Z","6.2.0-rc.10":"2021-03-26T08:01:34.169Z","6.2.0-rc.11":"2021-03-29T08:37:49.380Z","6.2.0-rc.12":"2021-03-30T02:52:29.748Z","6.2.0-rc.13":"2021-03-30T10:51:21.136Z","6.2.0":"2021-03-30T16:04:25.101Z","6.2.1":"2021-03-31T04:07:34.121Z","6.2.2":"2021-04-02T09:53:52.450Z","6.2.3":"2021-04-05T14:32:01.249Z","6.2.4":"2021-04-07T04:08:19.802Z","6.2.5":"2021-04-07T10:40:00.715Z","6.3.0-alpha.0":"2021-04-08T09:59:27.344Z","6.3.0-alpha.1":"2021-04-08T16:29:21.124Z","6.2.6":"2021-04-09T02:22:54.976Z","6.3.0-alpha.2":"2021-04-09T05:10:35.066Z","6.2.7":"2021-04-09T05:38:21.061Z","6.3.0-alpha.3":"2021-04-10T04:40:15.832Z","6.3.0-alpha.4":"2021-04-10T12:50:54.229Z","6.3.0-alpha.5":"2021-04-11T15:43:50.403Z","6.3.0-alpha.6":"2021-04-13T08:35:06.584Z","6.3.0-alpha.7":"2021-04-14T02:23:15.846Z","6.2.8":"2021-04-14T02:46:48.197Z","6.3.0-alpha.8":"2021-04-15T14:27:11.115Z","6.3.0-alpha.9":"2021-04-16T16:48:08.414Z","6.3.0-alpha.10":"2021-04-18T13:22:01.180Z","6.3.0-alpha.11":"2021-04-19T14:20:09.940Z","6.3.0-alpha.12":"2021-04-19T18:02:30.266Z","6.3.0-alpha.13":"2021-04-21T02:45:30.504Z","6.3.0-alpha.14":"2021-04-23T02:18:07.371Z","6.2.9":"2021-04-23T03:06:51.882Z","6.3.0-alpha.15":"2021-04-27T17:35:57.763Z","6.3.0-alpha.16":"2021-04-29T03:43:46.396Z","6.3.0-alpha.17":"2021-04-30T06:30:24.356Z","6.3.0-alpha.18":"2021-05-02T16:09:01.925Z","6.3.0-alpha.19":"2021-05-03T11:06:04.403Z","6.3.0-alpha.20":"2021-05-06T13:52:57.465Z","6.3.0-alpha.21":"2021-05-07T06:04:59.776Z","6.3.0-next.1":"2021-05-27T03:57:06.750Z","6.3.0-next.2":"2021-05-27T04:27:54.044Z","6.3.0":"2021-06-23T10:18:14.251Z","6.3.1-next.0":"2021-09-03T18:38:05.893Z","6.3.1":"2021-09-04T14:49:00.608Z","6.4.0--canary.41.da84f4d.0":"2021-11-27T16:23:03.003Z","6.4.0-next.0":"2021-11-27T16:27:04.525Z","6.4.0":"2021-11-27T16:34:39.828Z","6.4.1--canary.39adcfc.0":"2023-04-01T19:29:39.061Z","6.4.1--canary.0f1cfd9.0":"2023-04-01T19:29:49.146Z","6.4.1--canary.f87792d.0":"2023-04-01T19:39:09.499Z","7.0.0":"2023-04-01T19:49:54.629Z","7.0.1":"2023-04-27T09:35:22.745Z","7.0.2-next.0":"2023-04-27T09:38:34.657Z","7.0.2":"2023-04-27T09:40:32.691Z","7.1.0":"2024-05-26T21:22:35.620Z","7.1.1":"2024-05-26T22:10:18.973Z","8.0.0":"2024-05-26T22:17:02.764Z","8.0.1":"2024-06-19T00:32:50.192Z"},"bugs":{"url":"https://github.com/storybookjs/addon-knobs/issues"},"license":"MIT","homepage":"https://github.com/storybookjs/addon-knobs#readme","keywords":["storybook-addons","test"],"repository":{"url":"git+https://github.com/storybookjs/addon-knobs.git","type":"git"},"description":"Storybook addon for editing props","maintainers":[{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"shilman@gmail.com","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"gert@chromatic.com","name":"ghengeveld"},{"email":"varunvachhar@gmail.com","name":"winkervsbecks"},{"email":"yannbf@gmail.com","name":"yannbf"},{"email":"kyle.gach@gmail.com","name":"kylegach"},{"email":"jeppe@reinhold.is","name":"jreinhold"},{"email":"kasperpeulen@gmail.com","name":"kasperpeulen"},{"email":"dev@valentinpalkovic.dev","name":"valentinpalkovic"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"storybookbot@gmail.com","name":"storybook-bot"},{"email":"vanessa.yh.yuen@gmail.com","name":"vanessayuenn"}],"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://storybook.js.org/docs/react/api/frameworks-feature-support).\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\nThe latest version of this addon supports Storybook v7. If you're using a previous version of Storybook you need to install the matching version of this addon, eg `@storybook/addon-knobs@6.4.0`.\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","users":{"hexagon6":true,"stefan.age":true}}